필드셋 태그는(Fieldset Tag) 폼의 관련요소들을 그룹화하여 하나로 묶는 것을 말하며, 레전드 태그(legend tag)는 필드셋 태그에 대한 머리말을 정의합니다. 여기서는 간단한 필드셋 태그(Fieldset tag)코딩에 대하여 소개하고자 합니다
01. 필드셋 태그(Fieldset tag)코딩
01) <body>~~~</body> 태그안에서 <form>~~~</form>태그를 작성해야 합니다. 웹상에서 폼을 만들때는 <form>이라는 태그를 사용하여 관련된 정보를 하나의 묶음으로 처리합니다. <form>태그에서 많이 사용되는 속성 action=""은 폼에서 입력된 내용의 처리방식을 말하며, 속성 method=""는 서버로의 전달방식을 말합니다.
02) 입력받을 정보들 적습니다. 여기서는 아이디, 패스워드, 전화번호를 입력받습니다
03) <input>~~~</input> 태그를 작성하며, 아이디, 패스워드 전화번호의 input 속성인 type과 속성값을 지정합니다
- 아이디는 문자로 받기 때문에 속성값을 text로 받게 됩니다
- 패스워드는 속성값이 password 이기 때문에 입력된 값이 보이지 않게 암호화 처리되어 마스크(***)로 표시됩니다
- 전화번호는 속성값이 tel로 숫자이기 때문에 입력시 숫자로만 받고 문자로는 받지 않습니다
<input>태그는 기본값으로 옆으로 나오기 때문에, 아래로 표시하기 위해 <br>태그로 줄바꿈을 하여 줍니다
04) label for="이름"과 input id="이름"이 일치하는 방식으로 묶습니다. 브라우저에서 실행한 뒤 아이디, 패스워드, 전화번호 등 텍스트를 클릭하게 되면 커서가 아이디, 패스워드, 전화번호 등의 input 박스에서 깜빡거리는 것을 볼 수 있습니다.
05) 입력된 정보는 submit 버튼으로 하고 속성값은 login으로 지정합니다
06) 아이디, 패스워드, 전화번호를 하나의 그룹을 묶기 위해 <fieldset>~~~</fieldset>태그로 감싸게 합니다.
07) HTML 필드셋 태그(fieldset tag)코딩이 완료되었으면, 단축키인 Ctrl+S를 누른 후 저장하면 됩니다
----------
----------
02. 웹브라우저에서 보이는 HTML 필드셋 태그(fieldset tag)
HTML에서 작성한 대로 웹상에 보이게 하기 위하여 Ctrl+ F1키를 눌러 해당 HTML을 불러옵니다. 여기서는 구글의 크롬 브라우저을 연결하였습니다. 아이디, 패스워드. 전화번호가 하나의 사각형 박스로 묶인 것을 볼 수 있는 데, 이를 필드셋이라 합니다
