Form CheatSheet

text

<input type="text">

password

<input type="password">

number

<input type="number">

email

<input type="email">

url

<input type="url">

tel

<input type="tel">

search

<input type="search">

textarea

<textarea></textarea>

date

<input type="date">

datetime

<input type="datetime">

datetime-local

<input type="datetime-local">

month

<input type="month">

week

<input type="week">

select

option 1 option 2 option 3

<select>
  <optgroup label="optgroup">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
  </optgroup>
</select>

select（複数選択）

option 1 option 2 option 3

<select multiple>
  <optgroup label="optgroup">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
  </optgroup>
</select>

select（選択肢の表示行数指定）

option 1 option 2 option 3

<select size="4">
  <optgroup label="optgroup">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
  </optgroup>
</select>

datalist

<input list="datalist">
<datalist id="datalist">
  <option value="optinon 1">
  <option value="optinon 2">
  <option value="optinon 3">
</datalist>

radio

はい いいえ

<input type="radio" id="like-yes" name="like">
<label for="like-yes">はい</label>
<input type="radio" id="like-no" name="like">
<label for="like-no">いいえ</label>

checkbox

コーヒー ミルク オレンジジュース

<input type="checkbox" id="drink-coffee" name="drink">
<label for="drink-coffee">コーヒー</label>
<input type="checkbox" id="drink-milk" name="drink">
<label for="drink-milk">ミルク</label>
<input type="checkbox" id="drink-orange" name="drink">
<label for="drink-orange">オレンジジュース</label>

color

<input type="color">

range

<input type="range">

file

<input type="file">

submit

<input type="submit">

reset

<input type="reset">

button

<input type="button" value="ボタン">