Stack/HTML

[HTML] label 태그

7ingout 2022. 4. 5. 15:27

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>