96 lines
3.0 KiB
Markdown
96 lines
3.0 KiB
Markdown
# 폼
|
|
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>` 그룹에 대한 설명을 제공합니다.
|