웹 폼

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

<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

<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 요소를 위한 라벨입니다.

<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>

<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

<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

4.8 KiB Raw Blame History

웹 폼

4.8 KiB

Raw Blame History