2024-06-21
This commit is contained in:
@@ -1,24 +1,24 @@
|
||||
# 웹 폼
|
||||
|
||||
|
||||
* button : 클릭할 수 있는 버튼입니다.
|
||||
* button : 클릭할 수 있는 버튼입니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.
|
||||
* autofocus
|
||||
* disabled
|
||||
* form : 요소가 속한 form을 나타냅니다.
|
||||
* name, value
|
||||
* type
|
||||
* type : submit | reset | button
|
||||
* input : 사용자 입력 폼입니다.
|
||||
* accept
|
||||
* accept : 파일 형식을 지정합니다. file 형식에만 적용할 수 있습니다.
|
||||
* autocomplete : 웹 브라우저의 자동 완성 기능을 사용하는지 여부를 나타냅니다.
|
||||
* autofocus
|
||||
* checked
|
||||
* checked : radio, chcekbox에만 적용할 수 있습니다.
|
||||
* dirname
|
||||
* disabled
|
||||
* form
|
||||
* list : 사전 정의된 옵션 목롣입니다.
|
||||
* min, max
|
||||
* maxlength
|
||||
* multiple
|
||||
* list : 사전 정의된 옵션 목록입니다. ```<datalist>```와 연결합니다.
|
||||
* min, max, step : number 타입에만 적용할 수 있습니다. 실수의 경우 ```step="0.1"``` 또는 ```step="any"``` 등으로 지정할 수 있습니다.
|
||||
* maxlength, minlength
|
||||
* multiple : email, file에만 적용할 수 있습니다. 여러 항목을 입력받을 때 사용합니다.
|
||||
* name, value
|
||||
* pattern
|
||||
* placeholder
|
||||
@@ -26,8 +26,14 @@
|
||||
* required
|
||||
* size
|
||||
* src
|
||||
* step
|
||||
* 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
|
||||
@@ -40,7 +46,7 @@
|
||||
* placeholder
|
||||
* readonly
|
||||
* required
|
||||
* wrap
|
||||
* wrap : soft | hard | wrap
|
||||
* select : 사용자가 선택할 수 있는 옵션 메뉴입니다.
|
||||
* autofocus
|
||||
* disabled
|
||||
@@ -55,17 +61,53 @@
|
||||
* 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-cgarset
|
||||
* accept-charset
|
||||
* action
|
||||
* autocomplete
|
||||
* enctype : POST 전송 데이터의 타입을 지정합니다.
|
||||
* method
|
||||
* autocomplete : on | off
|
||||
* enctype : POST 전송 데이터의 타입을 지정합니다. application/x-www-form-urlencoded | multipart/form-data | text/plain
|
||||
* method : post | get
|
||||
* name
|
||||
* novalidate
|
||||
* target
|
||||
@@ -74,6 +116,48 @@
|
||||
* 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
|
||||
@@ -83,10 +167,17 @@
|
||||
* output : 계산 결과를 나타냅니다.
|
||||
* for
|
||||
* form
|
||||
* name
|
||||
* 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
|
||||
|
||||
|
||||
* value
|
||||
Reference in New Issue
Block a user