HTML+CSS+자바스크립트 웹코딩의 정석 3강
2021. 3. 30. 19:45ㆍHTML+CSS
728x90
5. 폼 삽입하기
5-1 폼에서 사용하는 태그
- form - 폼의 시작과 끝을 만듦
- fieldset - 폼 요소를 그룹으로 묶음
- legend - 필드셋에 제목을 붙임
- label - input 태그와 같은 폼 요소에 레이블을 붙임
- input - 사용자가 입력할 필드 삽입
- select, option - 드롭다운 목록 삽입
- textarea - 여러줄 입력이 가능한 텍스트 영역 삽입
- datalist - 데이터 목록 삽입
- autocomplete - 자동완성기능
5-2 사용자 입력을 위한 input 태그
- input의 타입
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
label {
background-color: red;
display: inline-block;
width: 120px;
}
</style>
</head>
<body>
<h1>입력양식</h1>
<form action="register.jsp">
<label>아이디:</label> <input type="text" name="userid"> <br>
<label>별명:</label> <input type="text" name="nickname" value="name"> <br>
<label>비밀번호:</label> <input type="password" name="userpw"> <br>
<!-- checkbox : 서로독립적, radio : 여러개중 하나만 선택-->
<fieldset>
<legend>수강과목1</legend>
<input type="checkbox" name="subject" value="자바" checked="checked"> 자바
<input type="checkbox" name="subject" value="웹"> 웹
<input type="checkbox" name="subject" value="프레임워크"> 프레임워크<br>
<input type="submit">
</fieldset>
<fieldset>
<legend>수강과목2</legend>
<input type="checkbox" name="subject2" value="자바2" checked="checked"> 자바2
<input type="checkbox" name="subject2" value="웹2"> 웹2
<input type="checkbox" name="subject2" value="프레임워크2"> 프레임워크2<br>
<input type="submit">
</fieldset>
<fieldset>
<legend>성별</legend>
<input type="radio" name="gender" values="남">남자
<input type="radio" name="gender" values="여">여자
</fieldset>
한개선택<select name="week">
<option>월요일</option>
<option>수요일</option>
<option value="friday">금요일</option>
<option selected="selected">일요일</option>
<input type="submit" value="서버전송"><br>
</select>
여러개선택<select name="week" multiple>
<option>월요일</option>
<option>수요일</option>
<option value="friday">금요일</option>
<option selected="selected">일요일</option>
<input type="submit" value="서버전송"><br>
</select>
댓글 <textarea row="5" cols="50"> sample </textarea>
<input type="submit" value="서버전송">
<input type="reset" value="초기화">
<input type="button" value="js코드" onclick="alter('버튼')">
<input type="image" src="..\sources\04\images\mic.png"> <input type="file">
</form>
</body>
</html>
|
cs |
- password는 입력시 자동으로 가려짐
- submit, reset = 전송,리셋
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="register2.jsp">
<input type="date"><br>
<input type="time"><br>
<input type="datetime"><br><!-- 지원 안됨 -->
<input type="datetime-local"><br> <input type="month"><br>
<input type="week"><br> <input type="email" name="email" placeholder="example123@gmail.com"><br>
<input type="tel" name="telephone" pattern="[0-1]{3}-[0-9]{4}-[0-9]{4}"><br>
<input type="url" name="url"><br>
<input type="number" name="age"><br> <input type="range" min="0" max="10" step="2" name="score">
<datalist id="steplist">
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</datalist>
<br> <input type="color"><br> <input type="search"
autofocus>
<details>
<summary> 사용자정보 상세보기</summary>
<ul>
<li>aa1</li>
<li>aa2</li>
<li>aa3</li>
<li>aa4</li>
<li>aa5</li>
</ul>
</details>
</form>
</body>
</html>
|
cs |
728x90
'HTML+CSS' 카테고리의 다른 글
| CSS 기본 텍스트를 표현하는 스타일 (0) | 2021.04.02 |
|---|---|
| CSS 기본 - CSS 다루기 (0) | 2021.04.01 |
| HTML+CSS+자바스크립트 웹코딩의 정석 2-1강 (0) | 2021.03.30 |
| HTML+CSS+자바스크립트 웹코딩의 정석 2강. (0) | 2021.03.29 |
| HTML+CSS+자바스크립트 웹코딩의 정석 1강. (0) | 2021.03.29 |