ハシウェブ

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

アフィリエイト広告を利用しています

【HTML】form部品一覧まとめ

この記事は、最初の投稿から3年以上が経過しています。

最終更新から320日が経過しています。

【HTML】form部品一覧まとめ

「HTMLのformで使えるタグってどんなものがあるの?」

悩み

HTMLのformで使えるパーツをまとめました。

inputのtype属性は種類が多いですが、使用する機会が少ないものがほとんどです。

私は、2015年からWeb制作の仕事をはじめて、170件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

目次
  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">

datalistタグを使うことでユーザビリティの高い入力フォームにすることができます。

datalistタグについてはこちらで解説しています。

【HTML】datalistの使い方とメリット、デメリット

HTMLのdatalistタグの使い方を知りたいですか?この記事では、datalistの使い方、メリット、デメリットについて解説しています。ぜひご覧ください。

checkbox

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

inputをlabelで囲むとlabelで囲まれたエリアすべてで✅のON/OFFができます。

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

inputにidをつけ、labelのforに同じ名前をつけると、離れた場所でもinputの✅のON/OFFができます。

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

name属性の使い方、配列にする方法はこちらの記事で解説しています。

【HTML】formでname属性の使い方・配列にする方法

HTMLでformのname属性を配列にしたいですか?この記事では、formのname属性を配列にする方法、その配列にキーをつける方法、その応用方法を解説しています。ぜひご覧ください。

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を使って入力チェックをすることを削減できます。