티스토리 뷰
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
<head>
<title>form-2</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>html5에서 추가된 입력 요소들</h1>
<form action="test.jsp" method="post">
<h3><input type="color"> - 색상을 포함해야 하는 입력 영역에 사용</h3>
<input type="color"><br>
<h3><input type="date"> - 날짜를 포함해야 하는 입력 영역에 사용</h3>
<input type="date"><br>
<h3><input type="datetime-loca"> - 사용자가 위치한 곳을 기준으로 설정된 날짜와 시간(시분초)을 포함하는 입력 영역에 사용</h3>
<input type="datetime-local"><br>
<h3><input type="email"> - 이메일 형식을 포함해야 하는 입력 영역에 사용(브라우저에서 형식 체크함)</h3>
<input type="email"><br>
<h3><input type="month"> - 날짜(년월) 입력 영역에 사용</h3>
<input type="month"><br>
<h3><input type="number"> - 숫자값을 포함해야 하는 입력 영역에 사용</h3>
<input type="number"><br>
<h3><input type="range"> - 범위내의 값을 포함해야 하는 입력 영역에 사용</h3>
<input type="range"><br>
<h3><input type="search"> - 검색 필드에 사용(한 번에 삭제 가능한 버튼이 생성)</h3>
<input type="search"><br>
<h3><input type="tel"> - 전화번호 형식을 포함해야 하는 입력 영역에 사용(키패드 배치 바뀜)</h3>
<input type="tel"><br>
<h3><input type="time"> - 사용자가 위치한 곳을 기준으로 설정된 시간(시분초)를 포함해야 하는 입력 영역에 사용</h3>
<input type="time"><br>
<h3><input type="url"> - url 주소 형식을 포함해야 하는 입력 영역에 사용(브라우저에서 형식 체크함, 키패드 배치 바뀜)</h3>
<input type="url"><br>
<h3><input type="week"> - 년주를 포함해야 하는 입력 영역에 사용</h3>
<input type="week"><br><br>
<hr><br>
<input type="submit" value="OK"> <input type="reset" value="Cancel"><br><br>
</form>
<hr>
<h2>w3c에서 참고하기</h2>
<a href="https://www.w3schools.com/html/html_form_input_types.asp" target="_blank">form 요소들</a>
<hr>
<h1>input type=*의 속성들</h1>
<form action="tete.jsp" method="post">
<ul style="line-height : 2;">
<li>
placeholder = "..." - 입력할 예시를 보여줌(입력 시작하면 사라짐)<br>
<input type="text" placeholder="Hong gil dong">
</li>
<li>
required - 필수입력요소로 지정한다(브라우저에서 체크해 줌)<br>
<input type="password" required>
</li>
<li>
autofocus - 자동으로 커서가 위치함<br>
<input type="text" autofocus>
</li>
<li>
autocomplete="on/off" - 자동 완성기능을 켜거나 끔<br>
<input type="search" autocomplete="on">
</li>
<li>
disabled - 비활성화 시킴<br>
<input type="text" value="VIP" disabled>
</li>
<li>
readonly - 읽기 전용으로 만듦<br>
<input type="text" value="2018-06-01" readonly>
</li>
<li>
size="n" 는 입력창의 길이를, maxlength="n" 는 입력데이터의 최대 갯수를 지정함<br>
<input type="text" size="15" maxlength="9" value="123456789">
</li>
</ul>
<hr><br>
<input type="submit" value="OK"> <input type="reset" value="NO">
</form>
<hr>
<h1>form 요소들을 그룹화 시키기</h1>
<p>
filedset - 폼 요소들을 그룹화 시켜켜서 묶어주는 역할을 한다.<br>
legend - 필드셋으로 그룹화된 요소들의 영역에 제목을 나타낼 때 쓴다.<br>
필드셋의 영역은 테두리로 묶이고 레전드로 표현한 제목은 위에 나타남
</p>
<form action="ttt.jsp" method="post">
<fieldset>
<legend>필수 입력</legend>
<label for="id">ID</label><input type="text" id="id" required autofocus><br>
<label for="pass">PASSWORD</label><input type="password" id="pass" required><br>
<button><img src="aniyellow.gif" alt="화살표">로그인</button>
<button><i class="fa fa-check-square"></i>회원가입</button>
</fieldset>
<fieldset>
<legend>선택 입력</legend>
<input type="text" value="초록회원" readonly><br>
<textarea cols="100" rows="10">가입하게 된 동기를 적어주세요</textarea>
</fieldset>
<hr><br>
<input type="submit" value="OK"> <input type="reset" value="NO"><br><br>
<hr>
</form>
</body>
</html>
'부산 ITWILL 학원 실습 > Web' 카테고리의 다른 글
| 연습해보기 - 소스 (0) | 2018.08.14 |
|---|---|
| 연습해보기 (0) | 2018.08.14 |
| form-1 (0) | 2018.08.13 |
| 테이블 셀 합치기 최종 문제 (0) | 2018.08.13 |
| table로 표 만들기 (0) | 2018.08.13 |