폼의 관련요소들을 그룹화하여 하나로 묶은 필드셋 태그(Fieldset Tag)에 대한 머리말을 정의해주는 간단한 레전드 태그(legend tag)코딩에 대하여 소개하고자 합니다
01. 레전드 태그(legend 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) 아이디, 패스워드, 전화번호를 하나의 레전드로 묶기 위해 <legend>~~~</legend>태그로 감싸게 합니다.
08) HTML 레전드 태그(Legend Tag)코딩이 완료되었으면, 단축키인 Ctrl+S를 누른 후 저장하면 됩니다
----------
----------
02. 웹브라우저에서 보이는 HTML 레전드 태그(Legend Tag)
HTML에서 작성한 대로 웹상에 보이게 하기 위하여 Ctrl+ F1키를 눌러 해당 HTML을 불러옵니다. 여기서는 구글의 크롬 브라우저을 연결하였습니다. 아이디, 패스워드. 전화번호가 하나의 사각형 박스로 묶은 제목은 레전드를 볼 수 있습니다
