label 태그
양식 입력창의 요소들을 위한 캡션을 명시함
1. 명시적 작성방법
label의 for속성과 input의 id속성을 명시함으로써 연결해주는 방식
ex>
<label for="userName">이름</label>
<input type="text" id="userName" name="userName">
밑줄 친 애들 일치시켜야 함
2. 암시적 작성방법
label태그안에 input태그를 넣음으로써 for속성을 명시하지 않더라도 암무적으로 연결하는 방식
ex>
<label>
이름
<input type="text" name="userName" id="userName">
</label>
label 태그를 왜 붙여야하나요?
-> 웹 접근성을 위해서! (CSS를 이용해 숨길 수 있음)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<h1>개인정보 입력</h1>
<form>
<ul>
<li>
이메일:
<label>
<span>이메일 아이디</span>
<input type="text" name="userEmail">
</label>
@
<label>
<span>이메일 주소</span>
<input type="text" name="userEmail2">
</label>
<select name="userEmail3">
<option value="">직접입력</option>
<option value="hanmail.co.kr">한메일</option>
<option value="naver.com">네이버</option>
<option value="gmail.com">지메일</option>
</select>
<imput type="button" value="인증"></imput>
</li>
<li>
<label for="userName">이름</label>
<input type="text" name="userName" placeholder="이름">
</li>
</ul>
</form>
</div>
</body>
</html>'Stack > HTML' 카테고리의 다른 글
| [HTML] HTML5 시멘틱태그 (0) | 2022.04.14 |
|---|---|
| [HTML] 홈페이지 마크업 (0) | 2022.04.06 |
| [HTML] div / form 태그 (0) | 2022.04.05 |
| [HTML] p / a 태그 (0) | 2022.04.05 |
| [HTML] index / list / text / table / image / video 태그 (0) | 2022.04.04 |