<label>
<label>은 form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용합니다.
모든 form 요소에 사용할 수 있습니다.
<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>
form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어주어야 합니다.
<label>을 사용하면 이를 클릭했을 경우 해당 form 요소를 클릭한 것처럼 동작합니다.
또한, 스크린 리더기를 통해 듣게 되면 해당 form 요소에 접근 시 <label>을 함께 읽어주게 됩니다.
<label>은 사용성, 접근성적인 측면으로 중요한 역할을 하므로 반드시 써주는 것이 좋습니다.
<fieldset>, <legend>
<fieldset>, <legend>는 form 요소를 구조화 하기 위해 필요한 태그입니다.
- <fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
- <legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성
<fieldset>은 보통 form의 성격에 따라 구분합니다.
<legend>는 <fieldset>의 자식으로 반드시 최상단에 위치해야 합니다.
<fieldset>
<legend>기본 정보</legend>
... 폼 요소들 ...
</fieldset>
<fieldset>
<legend>부가 정보</legend>
... 폼 요소들 ...
</fieldset>
<form>
<form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그입니다.
만약 <fieldset>으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할을 합니다.
<form action="" method="">
<fieldset>
<legend>기본 정보</legend>
... 폼 요소들 ...
</fieldset>
<fieldset>
<legend>부가 정보</legend>
... 폼 요소들 ...
</fieldset>
</form>
<form>에는 대표적인 2가지 속성이 있습니다.
- action: 데이터를 처리하기 위한 서버의 주소
- method: 데이터를 전송하는 방식을 지정
method 속성값에는 get/post 2가지 방식이 존재합니다.
get 방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출됩니다.
반면, post 방식은 데이터가 전송될 때 데이터가 노출되지 않습니다.
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<h1>Form 관련 요소</h1>
<fieldset>
<legend>기본 정보</legend>
<label for="userid">아이디 : </label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
<label for="userpw">비밀번호 : </label> <input type="password" id="userpw"><br>
성별 : <label for="male">남자</label> <input type="radio" name="gender" id="male" checked>, <label for="female">여자</label> <input type="radio" name="gender" id="female"><br>
</fieldset>
<fieldset>
<legend>부가 정보</legend>
취미 : 영화 감상 <input type="checkbox" name="hobby" checked>, 음악 감상 <input type="checkbox" name="hobby">, 독서 <input type="checkbox" name="hobby"><br>
프로필 사진 업로드 : <input type="file"><br>
사는 지역 : <select>
<option>서울</option>
<option>경기</option>
<option>강원</option>
<option selected>제주</option>
</select><br>
자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea><br>
<button type="submit">전송</button>
<button type="reset">취소</button>
</fieldset>
</form>
</body>
</html>
참고링크
HTML elements reference
This page lists all the HTML elements, which are created using tags.
'코딩 공부' 카테고리의 다른 글
| 비전공자를 위한 HTML/CSS-시멘틱 마크업 (0) | 2022.05.03 |
|---|---|
| 비전공자를 위한 HTML/CSS-콘텐츠 모델 (0) | 2022.05.03 |
| 비전공자를 위한 HTML/CSS-폼 요소3 (0) | 2022.05.02 |
| 전공자를 위한 HTML/CSS-폼 요소2 (0) | 2022.05.02 |
| 비전공자를 위한 HTML/CSS-폼 요소1 (0) | 2022.05.02 |