「HTMLのformで使えるタグってどんなものがあるの？」
HTMLのformで使えるパーツをまとめました｡
inputのtype属性は種類が多いですが､使用する機会が少ないものがほとんどです｡
私は､2015年からWeb制作の仕事をはじめて､170件ほどのWebサイトを制作してきました｡
その間､いろいろな失敗を繰り返し､クライアントからのフィードバックや本などで勉強することにより､多くのノウハウを得ることができました｡
- 目次
form部品まとめ
form部品のタグと表示されるformを紹介します｡
表示されるものはブラウザによって違います｡
input
inputはtype属性でいろいろなform部品があります｡
text
テキストを1行で入力する場合に使用します｡
複数行になる場合はtextareaを使用します｡
<input type="text" value="test">
datalistタグを使うことでユーザビリティの高い入力フォームにすることができます｡
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属性を配列にしたいですか？この記事では、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="">
メールアドレスに使用します｡
<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を使って入力チェックをすることを削減できます｡
