100 lines
1.9 KiB
Markdown
100 lines
1.9 KiB
Markdown
# 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>
|
|
``` |