ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【HTML】form部品一覧まとめ

【HTML】form部品一覧まとめ

HTMLのform部品を紹介します。
inputのtype属性は種類が多いですが、使用する機会が少ないものがほとんどです。

目次
  1. form部品まとめ
    1. input
      1. text
      2. checkbox
      3. radio
      4. submit
      5. image
      6. button
      7. reset
      8. hidden
      9. search
      10. tel
      11. email
      12. password
      13. datetime
      14. date
      15. month
      16. week
      17. time
      18. datetime-local
      19. number
      20. range
      21. color
    2. textarea
    3. select ( option )
    4. button
  2. まとめ

form部品まとめ

form部品のタグと表示されるformを紹介します。
表示されるものはブラウザによって違います。

input

inputはtype属性でいろいろなform部品があります。

text

テキストを1行で入力する場合に使用します。
複数行になる場合はtextareaを使用します。

<input type="text" value="test">

checkbox

選択肢から複数選択する場合に使用します。

<label><input type="checkbox" name="" value=""></label>
<label><input type="checkbox" name="" value=""></label>

<input type="checkbox" name="" id="" value=""><label for=""></label>
<input type="checkbox" name="" id="" value=""><label for=""></label>

radio

選択肢から1つを選択する場合に使用します。
選択肢が少ない場合に使用するといいです。

labelタグでinputとテキストを囲むことで全体がクリックできます。

<label><input type="radio" name="sex" value="男性">男性</label>
<label><input type="radio" name="sex" value="女性">女性</label>

labelタグのfor属性とinputタグのid属性で上と同じようにlabel内もクリックすることができます。
HTMLの構造が複雑になるのでlabelで囲むほうがおすすめです。

<input type="radio" name="sex" id="man" value="男性"><label for="man">男性</label>
<input type="radio" name="sex" id="woman" value="女性"><label for="woman">女性</label>

submit

「送信ボタン」で使用します。
デザインにこだわる場合はbuttonタグを使用するほうがいいです。

<input type="submit" value="">

image

「送信ボタン」を画像にする使用します。
submitと同様、デザインにこだわる場合はbuttonタグを使用するほうがいいです。

<input type="image" value="">

button

「送信ボタン」を画像にする使用します。
CSSでボタン風のデザインにすることが簡単になったので、あえて画像でボタンをつくる必要がなくなってきました。

<input type="button" value="">

reset

フォームの内容を全部クリアします。
EFO的にはリセットボタンは使用しないことがおすすめです。

<input type="reset" value="">

hidden

画面に表示されないデータに使用します。

<input type="hidden" value="">

search

検索テキストに使用します。

<input type="search" value="">

tel

電話番号に使用します。

<input type="tel" value="">

email

メールアドレスに使用します。

<input type="email" value="">

password

パスワードに使用します。

<input type="password" value="">

datetime

UTC(協定世界時)による日時に使用します。

<input type="datetime" value="">

date

日付に使用します。

<input type="date" value="">

month

月に使用します。

<input type="month" value="">

week

週に使用します。

<input type="week" value="">

time

時間に使用します。

<input type="time" value="">

datetime-local

UTC(協定世界時)によらないローカル日時に使用します。

<input type="datetime-local" value="">

number

数値に使用します。

<input type="number" value="">

range

レンジに使用します。

<input type="range" value="">

color

色に使用します。

<input type="color" value="">

textarea

入力欄が複数行になるときに使用します。

<textarea name="message" rows="5">text</textarea>

select ( option )

選択肢から1つを選択する場合に使用します。
radioと同じように使用できますが、できるだけselectではなくradioを使ったほうがいいです。
子要素のoptionタグとセットで使用します。
ドロップダウンとかプルダウンとか、呼び名がいろいろあるので注意が必要です。
都道府県のような選択肢は決まっていて、数が多いものはselectにするといいと思います。

<select name="pref">
  <option value="北海道">北海道</option>
  <option value="青森">青森</option>
  <option value="秋田">秋田</option>
</select>

button

「input type="submit"」などのボタンの代替として使用できます。
ボタンのデザインをカスタマイズする場合はbuttonを使用するとカスタマイズの幅が広くなります。

<button type="submit">ボタン</button>

まとめ

HTMLのform部品をまとめました。
実際に使用しているものは少ないですが、知っておくとユーザビリティを向上させられたり、Web制作でJavaScriptを使って入力チェックをすることを削減できます。