<label> - onclick 시 id값에 커서 이동.
label
- label은 폼의 양식에 이름 붙이는 태그입니다.
- 주요 속성은 for입니다.
- label의 for의 값과 양식의 id의 값이 같으면 연결됩니다.
- label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제합니다.
예제
- label의 문구를 클릭하면 for로 정의한 id값에 커서가 이동한다.
|
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
32
33
34
35
36
37
38
39
|
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title></title>
<style>
#loginArea{
width : 400px;
margin : auto;
border : 1px solid black;
}
table {
margin : auto;
}
td{
text-align : center;
}
</style>
</head>
<body>
<section id="loginArea">
<form action="" method="post">
<table>
<tr>
<td><label for="id">아이디 : </label></td>
<td><input type="text" name="id" id="id"></td>
</tr>
<tr>
<td><label for="pass">비밀번호 :</label></td>
<td><input type="password" name="pass" id="pass"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="로그인"> <input
type="reset" value="다시 작성"></td>
</tr>
</table>
</form>
</section>
</body>
</html>
|
'◽ HTML & CSS & JS, jQuery' 카테고리의 다른 글
| survey 설문지 소스 (0) | 2019.06.16 |
|---|---|
| [CSS] Margin, Padding - 사진 (0) | 2019.06.15 |
| [HTTML - 태그] "<input>" type별로 정리 (0) | 2019.06.13 |
| <div> 기본적으로 활용하는 속성 정리 (0) | 2019.06.09 |
| [HTML&CSS] 태그(Tag), 요소(Element), 속성(Attribute) 정의 (0) | 2019.06.09 |
| [JavaScript - (4) ] 이미지 슬라이드(몇초마다 이미지 변경) (0) | 2019.05.30 |
| [JavaScript - (3) ] 특정 URL 페이지로 가기 - "window.location.href" (0) | 2019.05.12 |