HTMLのフォーム部品について、テキストや文章の入力、日時の選択、項目の選択、ボタン、結果の表示、などについてまとめました。
フォーム部品とは？
フォーム部品とは、ユーザーがWEBページに情報を入れるときに使う、入力ボックスや項目の選択ボタンなどのことです。
フォーム部品の見た目や操作は、ブラウザやOSによって変わります。このページの見本は、ブラウザの初期状態で表示しています。ダークモードでは、ブラウザ標準のダーク用の見た目になります。
テキストを入力する
1行の文字を入力するときは、<input>を使います。typeの指定で、入力できる内容のチェックや、スマホで表示されるキーボードが変わる場合があります。
text
<label>文字を入力 <input type="text"></label>
search
<label>検索語を入力 <input type="search"></label>
tel
<label>電話番号を入力 <input type="tel"></label>
url
<label>URLを入力 <input type="url"></label>
<label>メールアドレスを入力 <input type="email"></label>
password
<label>パスワードを入力 <input type="password"></label>
number
<label>数値を入力 <input type="number" min="0" max="10"></label>
文章を入力する
複数行の文章を入力するときは、<textarea>を使います。改行を含めて入力できます。
textarea
<label>複数行テキストを入力 <textarea rows="3"></textarea></label>
スライダーで入力する
おおよその数値を入力するときは、スライダーを使います。正確な値より、だいたいの量を選ばせたい場合に使います。
range
<label>スライダーによる数値の選択 <input type="range" min="0" max="100"></label>
日時を選択する
日付や時刻を選択するときは、<input>を使います。押すと、カレンダーなどの入力補助が表示されます。入力補助はブラウザごとの違いが大きいです。
date
<label>年月日を入力 <input type="date"></label>
month
<label>年月を入力 <input type="month"></label>
week
<label>年と週を入力 <input type="week"></label>
time
<label>時刻を入力 <input type="time"></label>
datetime-local
<label>年月日と時刻を入力 <input type="datetime-local"></label>
決まった項目から選択する
用意した選択肢から選択するときは、チェックボックスやラジオボタン、プルダウンなどを使います。
checkbox
<fieldset>
<legend>複数選択可能なチェックボックス</legend>
<label><input type="checkbox"> 選択肢1</label>
<label><input type="checkbox"> 選択肢2</label>
<label><input type="checkbox"> 選択肢3</label>
</fieldset>
radio
<fieldset>
<legend>単一選択ラジオボタン</legend>
<label><input type="radio" name="sample-radio"> 選択肢1</label>
<label><input type="radio" name="sample-radio"> 選択肢2</label>
<label><input type="radio" name="sample-radio"> 選択肢3</label>
</fieldset>
select
<label>selectによる選択
<select>
<optgroup label="グループ1">
<option>選択肢1</option>
<option>選択肢2</option>
</optgroup>
<optgroup label="グループ2">
<option>選択肢3</option>
<option>選択肢4</option>
</optgroup>
</select>
</label>
datalist
<label>datalistによる候補つきの入力 <input list="sample-list"></label>
<datalist id="sample-list">
<option value="候補1"></option>
<option value="候補2"></option>
<option value="候補3"></option>
</datalist>
color
<label>色を選択 <input type="color"></label>
ファイルを添付する
ファイルを添付するときは、<input type="file">を使います。押すと、端末のファイルを選ぶ画面が開きます。
file
<label>ファイルを選択 <input type="file"></label>
ボタンを押す
ボタンは、<button>またはボタン用の<input>を使います。<input>はvalueの文字しか表示できず、<button>なら中に文字やアイコンを入れられます。
submit
<button type="submit">button要素の送信ボタン</button>
<input type="submit" value="input要素の送信ボタン">
reset
<button type="reset">button要素のリセットボタン</button>
<input type="reset" value="input要素のリセットボタン">
button
<button type="button">button要素のボタン</button>
<input type="button" value="input要素のボタン">
image
<input type="image" src="/img/html-form-controls-image-button.webp" alt="画像の送信ボタン" width="60" height="60">
結果や状態を表示する
結果や状態の表示など、入力ではなく表示のための部品も、フォーム部品の仲間です。
output
<label>結果の表示 <output>999</output></label>
progress
<label>進み具合の表示 <progress value="60" max="100">60％</progress></label>
meter
<label>量の表示 <meter value="0.7" low="0.3" high="0.8">70％</meter></label>
部品をまとめる・名前を付ける
フォームを正しく動かすために必要な部品です。フォームの送信先を決めたり、入力欄に名前を付けたりします。
form
入力欄の全体を囲み、送信先（action）と送り方（methodのpostかget）を指定します。nameを付けた部品の値だけが送信されます。
<form action="/contact/" method="post">
<label>名前 <input type="text" name="name"></label>
<button type="submit">送信</button>
</form>
label
フォーム部品に名前を付けます。スクリーンリーダーが入力欄の名前を読み上げ、ラベルの文字を押しても入力欄を選べるようになります。部品をlabelで囲む書き方と、forとidで結び付ける書き方があります。
<label>labelで囲んだ入力欄 <input type="text"></label>
<label for="sample-for">forとidで結び付けた入力欄</label>
<input type="text" id="sample-for">
hidden
画面には表示されませんが、フォームと一緒に送る値を指定します。確認画面から送信するときに、前の画面で入力された値を引き継いで送る場合などに使います。値は利用者が書き換えることもできるため、秘密にしたい値や改ざんされては困る値には使いません。
<input type="hidden" name="step" value="confirm">
このサイトでやったこと
便利ツールは、フォーム部品を使ってページを作成しています。
よくある質問（FAQ）
Q. フォームの部品にlabelは付けたほうがいいですか？
付けたほうがいいです。labelで名前を付けると、スクリーンリーダーが入力欄の名前を読み上げ、ラベルの文字を押しても入力欄を選べるようになります。ウェブアクセシビリティの基準「WCAG 2.2」にも、入力欄にラベルや説明を付ける達成基準（3.3.2、レベルA）があります。
Q. inputのtypeをtextからemailやtelに変えるとどうなりますか？
スマホで表示されるキーボードと、送信時のチェックが変わります。スマホでは、telなら電話番号用のキーボードが表示され、emailなら「@」を打ちやすいキーボードになる場合があります。emailは送信するとき、メールアドレスの形になっていない値をブラウザが止めて知らせます。telは電話番号の書式が国によって違うため、形のチェックはありません。
Q. フォームの部品にカレンダーはありますか？
あります。type="date"やtype="datetime-local"にすると、主要なブラウザではカレンダーから日付を選べます。ただし、見た目や操作はブラウザごとに違います。このページの「日時を選択する」の見本で、使っているブラウザでの表示を確かめられます。