先回の「HTMLフォーム」では、その概要をお話ししましたが、今回はよく使われる入力部品についてご紹介します。
ラジオボタン
いくつかの選択肢の中から1つ選択するときによく使われる「ラジオボタン」は下図のように書きます：
上図の例は三者択一の場合ですが、「name」属性を揃えておく必要があります。
また、「checked」属性を最初の項目に付けていますが、これを付けないと最初はどれも選択されていない状態で表示されます。
「checked」属性を付けない代わりに、いずれかの項目に「required」属性を付記しておけば入力されないミスを防げます。
このコードを Webブラウザで表示すると、下図のようになります。
セレクトボックス
これも選択肢の中から1つ選択するときに使いますが、プルダウン式にリストが現れ、そのうちの1つを選択するものです。
例えば下図のようにコードを書きます：
この例では4つの選択肢から1つを選択しますが、右側の「Ｖ」をクリックしてリストを表示させたところが下図です。
コード中「B型」に「select」属性が付記されています。
必須ではありませんが、初期値を設定できるので必要に応じてお使いください。
日付・時刻
他にもあるのですが、よく使われるものを例示しました（下図）：
これらのコードは下図のようになります：
「type="date"」は年月日を入力するときに使い、その右側にはカレンダーボタンが付きます。
このボタンを押すとカレンダーが表示され、当該日付をクリックするだけで入力できるので便利です。
もちろん、タイプ入力もできます。
「type="time"」は時刻を入力するときに使います。
これも右側に時計ボタンが付き、これを押すとドラムロール式に時分を選択することができます。
もちろん、タイプ入力もできます。
「type="datetime"」は UTC（協定世界時）による日時の入力欄を作成します。
入力された値はグローバル日時を表します。
日本のローカル時刻はUTCに対して9時間進んでいるので、次のような書式でグローバル日時として指定します。
「2020-10-05T07:15:00+09:00」
「type="datetime-local"」は UTCによらないローカル日時の入力欄を作成します。
上記の "date" と "time" を合体したような入力欄で、右側にカレンダーボタンが付きます。
このボタンを押すと、カレンダーとドラムロール式の時刻選択画面が現れ、選択式に入力できます。
複数行のテキスト入力欄
先回例示した「input type="text"」は一行入力ボックスでしたが、「textarea」タグを使うと複数行のテキスト入力欄が作れます。
下図に例示したコードを Webブラウザで表示すると、その下の図のように表示されます。
「cols」「rows」属性で入力欄のサイズ（1行の文字数と行数）を指定できますが、入力欄の右下のハンドラをドラッグして広げたりできます。
また、「placeholder」属性を付けると、入力に関するヒントをグレー表示することができます。
以上、よく使われる入力部品をご紹介しましたが、これ以外にもたくさんあります。
また、それぞれの入力部品には個々に設定できる属性がたくさんあります。
せっかく HTML でフォームを作成するのですから、お望みのスタイルで作成してみてください。