label

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

codingfarm

label 본문

web/HTML5

label

scarecrow1992 2020. 9. 28. 00:06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<body>
    <form action="">
        <p>
            <label for = "id_txt">text</label> :   <!--label을 통해 text의 역할이 무언가의 이름표임을 정확히 기술 할 수 있다.-->
            <input id="id_txt" type="text" name = "id" value="default value">
        </p>
        <p>
            <label for = "password">password</label> : 
            <input id="password" type="password" name = "pwd" value="default value">
        </p>
        <p>
            <lable for="comment">textarea </lable> : 
            <textarea id="comment" cols="50" rows="2">default value</textarea>
        </p>
</form>
</body>
</html>
Colored by Color Scripter

cs

위 HTML파일을 브라우저로 열면 아래와 같다

겉보기에는 label 태그의 역할을 잘 모르겠다.

하지만 label에서 for로 설정한 text나 password문자열을 클릭하면 이와 연결된 input창의 커서가 활성화 되는것을 확인 할 수 있다.

for를 통해 일일이 활성화 하는것이 귀찮다면 아래처럼 label태그로 통째로 감싸는 방법도 존재한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<html>
<body>
    <form action="">
        <p>
            <label>
            text :   <!--label을 통해 text의 역할이 무언가의 이름표임을 정확히 기술 할 수 있다.-->
            <input type="text" name = "id" value="default value">
            </label>
        </p>
        <p>
            <label>
            password : 
            <input type="password" name = "pwd" value="default value">
            </label>
        </p>
        <p>
            <label>
            textarea : 
            <textarea cols="50" rows="2">default value</textarea>
            </label>
        </p>
        <p>
            <label>
            <input type="checkbox" name="color" value = "red"> 붉은색
            </label>
        </p>
</form>
</body>
</html>
Colored by Color Scripter

cs