183 lines
4.8 KiB
Markdown
183 lines
4.8 KiB
Markdown
# 웹 폼
|
|
|
|
|
|
* button : 클릭할 수 있는 버튼입니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.
|
|
* autofocus
|
|
* disabled
|
|
* form : 요소가 속한 form을 나타냅니다.
|
|
* name, value
|
|
* type : submit | reset | button
|
|
* input : 사용자 입력 폼입니다.
|
|
* accept : 파일 형식을 지정합니다. file 형식에만 적용할 수 있습니다.
|
|
* autocomplete : 웹 브라우저의 자동 완성 기능을 사용하는지 여부를 나타냅니다.
|
|
* autofocus
|
|
* checked : radio, chcekbox에만 적용할 수 있습니다.
|
|
* dirname
|
|
* disabled
|
|
* form
|
|
* list : 사전 정의된 옵션 목록입니다. ```<datalist>```와 연결합니다.
|
|
* min, max, step : number 타입에만 적용할 수 있습니다. 실수의 경우 ```step="0.1"``` 또는 ```step="any"``` 등으로 지정할 수 있습니다.
|
|
* maxlength, minlength
|
|
* multiple : email, file에만 적용할 수 있습니다. 여러 항목을 입력받을 때 사용합니다.
|
|
* name, value
|
|
* pattern
|
|
* placeholder
|
|
* readonly
|
|
* required
|
|
* size
|
|
* src
|
|
* type
|
|
* button | reset | submit | image
|
|
* checkbox | radio
|
|
* text | password | search | url | email | tel
|
|
* number | range
|
|
* datetime-local | month | date | time | week
|
|
* color | file
|
|
* hidden
|
|
* usemap
|
|
* textarea : 여러 줄 텍스트 편집기입니다.
|
|
* autofocus
|
|
* cols, rows
|
|
* dirname
|
|
* disabled
|
|
* form
|
|
* maxlength
|
|
* name, value
|
|
* placeholder
|
|
* readonly
|
|
* required
|
|
* wrap : soft | hard | wrap
|
|
* select : 사용자가 선택할 수 있는 옵션 메뉴입니다.
|
|
* autofocus
|
|
* disabled
|
|
* form
|
|
* multiple
|
|
* name
|
|
* required
|
|
* size
|
|
* option : select, optgroup, datalist 요소와 함께 사용됩니다.
|
|
* disabled
|
|
* selected
|
|
* value
|
|
* optgroup : select 요소 내의 option 요소들을 그룹화합니다.
|
|
* disabled
|
|
* datalist
|
|
|
|
```html
|
|
<select name="pets" id="pet-select">
|
|
<option value="">--Please choose an option--</option>
|
|
<option value="dog">Dog</option>
|
|
<option value="cat">Cat</option>
|
|
<option value="hamster">Hamster</option>
|
|
<option value="parrot">Parrot</option>
|
|
<option value="spider">Spider</option>
|
|
<option value="goldfish">Goldfish</option>
|
|
</select>
|
|
|
|
<select id="dino-select">
|
|
<optgroup label="Theropods">
|
|
<option>Tyrannosaurus</option>
|
|
<option>Velociraptor</option>
|
|
<option>Deinonychus</option>
|
|
</optgroup>
|
|
<optgroup label="Sauropods">
|
|
<option>Diplodocus</option>
|
|
<option>Saltasaurus</option>
|
|
<option>Apatosaurus</option>
|
|
</optgroup>
|
|
</select>
|
|
```
|
|
|
|
* label : 입력 폼에 대한 라벨입니다.
|
|
* for
|
|
* form
|
|
|
|
```html
|
|
<label for="name">Name:</label> <input type="text" id="name" name="user_name">
|
|
|
|
<label for="name">
|
|
Name: <input type="text" id="name" name="user_name">
|
|
</label>
|
|
```
|
|
|
|
* datalist : option과 함께 사용됩니다.
|
|
* form : 사용자의 데이터를 서버로 전송하는 상호작용 부분을 나타냅니다.
|
|
* accept
|
|
* accept-charset
|
|
* action
|
|
* autocomplete : on | off
|
|
* enctype : POST 전송 데이터의 타입을 지정합니다. application/x-www-form-urlencoded | multipart/form-data | text/plain
|
|
* method : post | get
|
|
* name
|
|
* novalidate
|
|
* target
|
|
* fieldset : 폼 안에서 여러 폼 요소들을 그룹화할 때 사용됩니다.
|
|
* disabled
|
|
* form
|
|
* name
|
|
* legend : fieldset 요소를 위한 라벨입니다.
|
|
|
|
|
|
```html
|
|
<form action="/my-handling-form-page" method="post">
|
|
<ul>
|
|
<li>
|
|
<label for="name">Name:</label>
|
|
<input type="text" id="name" name="user_name">
|
|
</li>
|
|
<li>
|
|
<label for="mail">E-mail:</label>
|
|
<input type="email" id="mail" name="user_email">
|
|
</li>
|
|
<li>
|
|
<label for="msg">Message:</label>
|
|
<textarea id="msg" name="user_message"></textarea>
|
|
</li>
|
|
</ul>
|
|
</form>
|
|
```
|
|
|
|
```html
|
|
<form>
|
|
<fieldset>
|
|
<legend>Fruit juice size</legend>
|
|
<p>
|
|
<input type="radio" name="size" id="size_1" value="small">
|
|
<label for="size_1">Small</label>
|
|
</p>
|
|
<p>
|
|
<input type="radio" name="size" id="size_2" value="medium">
|
|
<label for="size_2">Medium</label>
|
|
</p>
|
|
<p>
|
|
<input type="radio" name="size" id="size_3" value="large">
|
|
<label for="size_3">Large</label>
|
|
</p>
|
|
</fieldset>
|
|
</form>
|
|
```
|
|
|
|
|
|
* meter : 알려진 범위 내의 값을 나타냅니다.
|
|
* form
|
|
* high, low
|
|
* min, max
|
|
* optimum
|
|
* value
|
|
* output : 계산 결과를 나타냅니다.
|
|
* for
|
|
* form
|
|
* name, value
|
|
|
|
```html
|
|
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
|
|
<input type="range" id="b" name="b" value="50" /> +
|
|
<input type="number" id="a" name="a" value="10" /> =
|
|
<output name="result" for="a b">60</output>
|
|
</form>
|
|
```
|
|
|
|
* progress : 작업 진행 상태를 나타냅니다.
|
|
* form
|
|
* max
|
|
* value |