2025-01-24T01:44:03

doc/html5/Input.md

@@ -0,0 +1,100 @@
+# Input
+
+```html
+<input
+  type="text"
+  id="comment"
+  name="comment"
+  value="저는 텍스트 필드입니다." />
+```
+## 텍스트 필드 타입
+
+* text : 단일 줄 텍스트 필드입니다. 줄 바꿈이 있는 텍스트를 입력하면 브라우저는 해당 데이터를 서버로 전송하기 전에 줄 바꿈을 제거합니다.
+* password
+* hidden : 사용자에게 보이지 않는, 하지만 서버에는 전송되는 양식 컨트롤을 만드는 데 사용됩니다.
+* search
+* url
+* tel
+* email
+* number
+* pattern
+
+## 체크 버튼 타입
+
+* checkbox
+* radio : 라디오 버튼의 name 속성에 동일한 이름을 사용하면 라디오 버튼을 그룹화 할 수 있습니다.
+
+```html
+<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked />
+```
+
+```html
+<div>
+  <input type="checkbox" id="scales" name="scales"
+         checked>
+  <label for="scales">Scales</label>
+</div>
+```
+
+```html
+<div>
+  <input type="radio" id="huey" name="drone" value="huey"
+         checked>
+  <label for="huey">Huey</label>
+</div>
+
+<div>
+  <input type="radio" id="dewey" name="drone" value="dewey">
+  <label for="dewey">Dewey</label>
+</div>
+
+<div>
+  <input type="radio" id="louie" name="drone" value="louie">
+  <label for="louie">Louie</label>
+</div>
+```
+
+## 버튼 타입
+
+* submit
+* reset
+* button
+
+## 파일 선택 타입
+
+* file
+
+```html
+<input type="file" name="file" id="file" accept="image/*" multiple />
+<input type="file" accept="image/*;capture=camera" />
+```
+
+## 레인지 타입
+
+* range
+
+## 날짜와 시간 타입
+
+* datetime-local
+* month
+* time
+* week
+
+## 색상 선택 타입
+
+* color
+
+
+## 목록
+
+```html
+<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
+
+<datalist id="ice-cream-flavors">
+    <option value="Chocolate">
+    <option value="Coconut">
+    <option value="Mint">
+    <option value="Strawberry">
+    <option value="Vanilla">
+</datalist>
+```