[HTML5] <form> 태그 2
<form> 태그 2
1. 폼 요소 그룹으로 묶기
(1) <fieldset>, <legend> 태그
<fieldset>, <legend> 태그는 폼 요소들을 보기 쉽게 그룹으로 묶어주는 태그이다. 예를 들어 쇼핑몰 사이트에서 주문서를 작성하는 폼에서 '사용자 정보'와 배송 정보'를 따로 나우어 표시하면 사용자가 정보를 입력하기에도 편리하고 화면도 깔끔하게 정리할 수 있다.
이렇게 하나의 폼 안에서 여러 구현을 나눠 표시하려고 할 때 <fieldset> 태그를 이용하면 <fieldset> 과 </fielset> 태그 사이의 폼들을 하나의 영역으로 묶고
외곽선을 그려준다.
(2) <fieldset> 태그의 속성
1) disabled: 이 속성을 사용하면 <fieldset> 태그의 자식 요소들을 사용할 수 없게 만든다. 즉, 화면에는 표시되지만, 사용자가 내용을 입력하거나 항목을 선택할 수 없다.
2) form: 현재 <fieldset> 태그가 속해 있는 form의 이름을 표시할 수 있다.
3) name: 이 속성을 이용해 서버로 넘겨줄 이름을 지정할 수 있다.
<fieldset> 태그로 나누어진 구역에 제목을 붙이고 싶다면 <legend> 태그를 사용한다. <legend> 태그는 <fieldset> 태그 다음에 오며, 필수 옵션은 아니므로 생략할 수 있다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>폼 만들기</title>
<style>
ul {
list-style-type:none;
}
fieldset {
margin : 5px 2px;
width: 350px;
}
</style>
</head>
<body>
<h1> 회원 가입 양식</h1>
<form>
<fieldset>
<legend> 로그인 정보 </legend>
<ul>
<li>아이디 : <input type="text" id="user_id"></li>
<li>비밀번호 : <input type="password" id="pw"></li>
</ul>
</fieldset>
<fieldset>
<legend> 가입자 정보</legend>
<ul>
<li>이름 : <input type="text" id="user_name"></li>
<li>메일 주소 : <input type="text" id="user_mail"></li>
<li>생년월일 : <input type="text" id="birth"></li>
</ul>
</fieldset>
<fieldset>
<input type="submit" value="가입하기"></input>
</fieldset>
</form>
</body>
</html>
2. 폼 요소 캡션 붙이기
(1) <label> 태그
<label> 태그는 폼 요소에 캡션을 붙이기 위한 것으로, 폼 요소와 캡션으로 사용하는 텍스트가 짝을 이루고 있으므로 폼 요소의 위치가 바뀌더라도 캡션이 항상 따라다니게 된다.
cf.) 기존 input 태그
아이디(6자이상)<input type="text" id="id">
cf.) <label> 태그 사용하면 장점
체크 박스나 라디오 버튼에서 텍스트(영어 회화)를 클릭해도 체크가 된다.
※ <label> 태그를 사용하는 방법
1) <label> 태그 안에 폼 요소를 넣는다.
<label>아이디(6자이상)<input type="text" id="id></label>
폼 요소의 앞뒤에 <label> 태그와 </label> 태그를 붙여도 결과 화면은 달라지지 않지만, 브라우저에서 폼 요소를 인식할 때 '아이디(6자이상)'이라는 캡션과 텍스트 입력 창을 한 묶음으로 인식하게 된다.
<form>
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li>
<label>아이디(6자 이상)<input type="text" id="id"></label>
</li>
<li>
<label>비밀번호<input type="password" id="pw1"></label>
</li>
<li>
<label>비밀번호(확인)<input type="password" id="pw2"></label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li><label>이름 <input type="text" id="name"></label></li>
<li><label>이메일 주소 <input type="email" id="email"></label></li>
<li>...</li>
</ul>
</fieldset>
</form>
2) <label> 요소와 폼 요소를 따로 쓰고 for 속성과 id 속성을 이용해 연결한다.
<label [속성="속성 값"] for="이름"> 캡션 </label>
<input ....id="이름">
<form>
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li><label for="id">아이디(6자 이상)</label>
<input type="text" id="id"></li>
<li><label for="pw1">비밀번호</label>
<input type="password" id="pw1"></li>
<li><label for="pw2">비밀번호(확인)</label>
<input type="password" id="pw2"></li>
</ul>
</fieldset>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li><label for="name">이름</label>
<input type="text" id="name"></li>
<li><label for="email">이메일 주소</label>
<input type="email" id="email"></li>
<li>...</li>
</ul>
</fieldset>
</form>
<label> 태그에서 for 속성을 사용해 어떤 폼 요소에 연결할지를 결정하게 된다.
출처: https://devbox.tistory.com/entry/HTML5-form-태그-2?category=574553 [장인개발자를 꿈꾸는 :: 기록하는 공간]
'Web Programing > HTML5' 카테고리의 다른 글
| [HTML5[ <table> 태그 (0) | 2020.07.06 |
|---|---|
| [HTML5] <a> 태그 (0) | 2020.07.06 |
| [HTML5] <input> 태그 (0) | 2020.07.06 |
| [HTML5] <form> 태그_GET과 POST (0) | 2020.07.06 |
| [HTML5] <form> 태그 1 (0) | 2020.07.06 |
| [HTML5] 아이프레임과 프레임 (0) | 2020.07.06 |
| [HTML5] <meta> 태그 (0) | 2020.07.06 |
| [HTML5] 이스케이핑 (0) | 2020.07.06 |