2024-06-16

Writerside/h.tree

@@ -12,6 +12,8 @@
                  start-page="starter-topic.md">
 
     <toc-element topic="starter-topic.md">
-        <toc-element topic="Web-Forms.md"/>
+        <toc-element topic="Web-Forms.md">
+            <toc-element topic="Input.md"/>
+        </toc-element>
     </toc-element>
 </instance-profile>

Writerside/topics/Input.md

@@ -0,0 +1,59 @@
+# 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 />
+```
+
+## 버튼 타입
+
+* 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

Writerside/topics/Web-Forms.md

@@ -1,3 +1,92 @@
 # 웹 폼
 
 
+* button : 클릭할 수 있는 버튼입니다.
+  * autofocus
+  * disabled
+  * form : 요소가 속한 form을 나타냅니다.
+  * name, value
+  * type
+* input : 사용자 입력 폼입니다.
+  * accept
+  * autocomplete : 웹 브라우저의 자동 완성 기능을 사용하는지 여부를 나타냅니다.
+  * autofocus
+  * checked
+  * dirname
+  * disabled
+  * form
+  * list : 사전 정의된 옵션 목롣입니다.
+  * min, max
+  * maxlength
+  * multiple
+  * name, value
+  * pattern
+  * placeholder
+  * readonly
+  * required
+  * size
+  * src
+  * step
+  * type
+  * usemap
+* textarea : 여러 줄 텍스트 편집기입니다.
+  * autofocus
+  * cols, rows
+  * dirname
+  * disabled
+  * form
+  * maxlength
+  * name, value
+  * placeholder
+  * readonly
+  * required
+  * wrap
+* select : 사용자가 선택할 수 있는 옵션 메뉴입니다.
+  * autofocus
+  * disabled
+  * form
+  * multiple
+  * name
+  * required
+  * size
+* option : select, optgroup, datalist 요소와 함께 사용됩니다.
+  * disabled
+  * selected
+  * value
+* optgroup : select 요소 내의 option 요소들을 그룹화합니다.
+  * disabled
+* label : 입력 폼에 대한 라벨입니다.
+  * for
+  * form
+* datalist : option과 함께 사용됩니다.
+* form : 사용자의 데이터를 서버로 전송하는 상호작용 부분을 나타냅니다.
+  * accept
+  * accept-cgarset
+  * action
+  * autocomplete
+  * enctype : POST 전송 데이터의 타입을 지정합니다.
+  * method
+  * name
+  * novalidate
+  * target
+* fieldset : 폼 안에서 여러 폼 요소들을 그룹화할 때 사용됩니다.
+  * disabled
+  * form
+  * name
+* legend : fieldset 요소를 위한 라벨입니다.
+* meter : 알려진 범위 내의 값을 나타냅니다.
+  * form
+  * high, low
+  * min, max
+  * optimum
+  * value
+* output : 계산 결과를 나타냅니다.
+  * for
+  * form
+  * name
+* progress : 작업 진행 상태를 나타냅니다.
+  * form
+  * max
+  * value
+
+