<최종 실행화면> 페이지 맨아래에 복붙 코드 있음
우선 html파일 하나를 만들자. 이번 예제에서는 04_input2.html 하나만 만들면 된다.
날짜를 선택하는 창을 만들겠다.
색상을 선택하는 창을 만들겠다.
휴대폰에서 적용되는 키패드 모양과 텍스트 입력시 X버튼이 자동 생성되는 창을 만들겠다.
슬라이드 웨젯을 만들어보자. (볼륨 조절할때 사용 등)
개수를 카운트하는 위젯도 있다.
<hr>로 선 구분을 하고, 텍스트 박스에 힌트가 표시되는 것을 만들자.
입력하지 않으면 동작이 안되는 텍스트 박스를 만들자.
수정 불가한 , 최대 글자수 제한을 해보자.
포커스를 받는 텍스트박스와 자동 완성 기능을 하는 리스트를 만들어 보자.
만약에 텍스트 박스에 입력된 값 별개로 데이터를 보내고 싶을때 hidden type을 이용하자.
sam만 입력하여 제출을 하였지만, name="aaa" value="1234"도 보낼 수 있다.
끝
<복붙용 코드>
04_input2.html
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input2</title>
</head>
<body>
<!-- input에 새로 추가된 type들 -->
<!-- 브라우저마다 지원여부가 다름. 즉, 안되는 브라우저도 있음 -->
<!-- p.93의 예제 참고 -->
<form>
<!-- 날짜선택 -->
<input type="date">
<input type="datetime-local">
<!-- 색상선택 -->
<input type="color">
<!-- 모바일에서 키패드의 모양에 관련 -->
<input type="email">
<input type="tel">
<!-- 텍스트입력시에 옆에 x버튼 생기는 것 -->
<input type="search">
<!-- 슬라이드 위젯 -->
<input type="range" min="1" max="10" value="2" step="2">
<input type="number" min="-2" max="10" step="3" value="-2">
</form>
<hr>
<!-- 추가된 input의 속성들 -->
<form>
<!-- 힌트 -->
<input type="text" placeholder="input name"><br>
<!-- 반드시 입력해야 하는 값을 검증하는 속성 -->
<input type="text" required><br>
<!-- 수정이 불가하도록 -->
<input type="text" readonly value="SAM"><br>
<!-- 최대글자수 제한 -->
<input type="text" maxlength="5"><br>
<!-- 웹페이지가 로딩될때 가장 먼저 포커스를 받고 싶다먄 -->
<input type="text" autofocus><br>
<!-- 자동완성기능 -->
<input type="text" autocomplete list="datas">
<!-- 자동완성으로 보여질 항목리스트 -->
<datalist id="datas">
<option value="canada" label="캐나다"></option>
<option value="china" label="중국"></option>
<option value="korea" label="한국"></option>
</datalist>
<!-- 서밋버튼 -->
<input type="submit">
</form>
<hr>
<!-- hidden 타입 : 사용자 입력없이 서버에 데이터를 보낼 것이 있다면 -->
<input type="text" name="name">
<input type="hidden" name="aaa" value="1234">
<input type="submit">
</form>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML' 카테고리의 다른 글
| HMTL (기초) viewport (화면이 비율이 달라질 시, 보이는 차이) (0) | 2019.12.19 |
|---|---|
| HTML (기초) 웹페이지 구성 및 GET,POST 로 데이터 보내기 / 파일 업로드 (0) | 2019.12.04 |
| HTML (기초) input으로 여러가지 버튼 및 영역 만들기 (radio, lable, checkbox, button 등등) (0) | 2019.12.04 |
| HTML (기초) Audio(오디오),video(비디오), iframe, div,span (0) | 2019.12.04 |
| HTML (기초) 테이블 만들기 (0) | 2019.12.03 |
댓글