2025-01-24T01:44:03

doc/html5/07_폼.md

@@ -0,0 +1,95 @@
+# 폼
+HTML 폼은 사용자로부터 데이터를 입력받아 서버로 전송하는 데 사용됩니다. 다양한 종류의 입력 요소와 함께 사용하여 다양한 형태의 폼을 만들 수 있습니다.
+
+## form
+폼 전체를 감싸는 태그입니다.
+```html
+<form action="submit.php" method="post">
+</form>
+```
+* action: 폼 데이터를 전송할 서버 측 스크립트의 URL을 지정합니다.
+* method: 데이터를 전송하는 방법을 지정합니다 (get 또는 post).
+
+## input
+사용자 입력을 받는 다양한 종류의 입력 요소를 생성합니다.
+```html
+<input type="text" name="username" placeholder="사용자 이름">
+<input type="password" name="password">
+<input type="email" name="email">
+<input type="submit" value="제출">
+```
+* type: 입력 필드의 종류를 지정합니다.
+    - text: 일반적인 텍스트 입력 (예: 이름, 이메일)
+    - password: 비밀번호 입력 (입력된 내용이 가려짐)
+    - email: 이메일 형식의 입력만 허용
+    - number: 숫자만 입력 가능
+    - date: 날짜 선택
+    - time: 시간 선택
+    - datetime-local: 날짜와 시간 선택
+    - search: 검색창
+    - url: URL 입력
+    - tel: 전화번호 입력
+    - checkbox : 체크박스
+    - radio : 라디오버튼
+    - file : 파일 업로드
+* name: 서버로 전송될 때 사용될 변수명을 지정합니다.
+* required 속성: 필수 입력 항목을 지정할 수 있습니다.
+* disabled: 입력을 비활성화
+* readonly: 입력 내용을 읽기 전용으로 설정
+* maxlength: 입력 가능한 최대 글자 수 지정
+* minlength: 입력 가능한 최소 글자 수 지정
+* pattern 속성: 입력 값의 형식을 제한할 수 있습니다.
+* placeholder 속성: 입력 필드에 미리 보여줄 텍스트를 설정할 수 있습니다.
+
+## label
+입력 요소에 대한 설명을 제공합니다.
+```html
+<label for="username">사용자 이름:</label>
+<input type="text" id="username" name="username">
+```
+* for 속성: 관련 input 요소의 id를 지정합니다.
+
+## textarea
+여러 줄의 텍스트를 입력받을 수 있는 영역을 생성합니다.
+```html
+<textarea name="message" rows="5" cols="30"></textarea>
+```
+* rows: 행의 수를 지정합니다.
+* cols: 열의 수를 지정합니다.
+
+## select
+드롭다운 목록을 생성합니다.
+```html
+<select name="country">
+  <option value="korea">한국</option>
+  <option value="usa">미국</option>
+  <option value="japan">일본</option>
+</select>
+```
+
+## option
+`<select>` 태그 안에서 선택할 수 있는 옵션을 정의합니다.
+
+## button
+버튼을 생성합니다.
+```html
+<button type="submit">제출</button>
+<button type="reset">초기화</button>
+```
+* type: 버튼의 종류를 지정합니다.
+    - submit
+    - reset
+    - button
+
+## fieldset
+관련된 입력 요소들을 그룹화합니다.
+```html
+<fieldset>
+  <legend>개인 정보</legend>
+  <input type="text" name="name">
+  <input type="email" name="email">
+</fieldset>
+```
+
+## legend
+`<fieldset>` 그룹에 대한 설명을 제공합니다.