第9回 フォーム要素の種類と属性 – input 要素のさまざまな種類 – HTML入門講座

テキスト入力フィールドの種類

HTMLのフォームでは、さまざまなタイプの入力フィールドが提供されています。特にテキスト入力に関する要素を見てみましょう。

単一行のテキスト入力（<input type=”text”>）

ユーザーが自由に文字列を入力できるフィールドです。maxlength 属性を使って、入力できる文字数を制限することができます。

<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" maxlength="20">

パスワード入力フィールド（<input type=”password”>）

パスワードフィールドは、入力された文字が非表示になるフィールドです。パスワードを入力する際に使われます。

<label for="password">パスワード:</label>
<input type="password" id="password" name="password">

メールアドレス入力（<input type=”email”>）

<input type="email"> を使うと、メールアドレス形式での入力が求められます。ブラウザがメールアドレス形式を自動的に検証し、不正な形式の場合にはエラーを表示します。

<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>

URL入力（<input type=”url”>）

URL形式の入力が必要な場合は、<input type="url"> を使用します。URL形式での入力が正しくない場合にはエラーメッセージが表示されます。

<label for="website">ウェブサイトURL:</label>
<input type="url" id="website" name="website">

電話番号入力（<input type=”tel”>）

電話番号形式の入力に対応するフィールドです。正確な形式の検証はブラウザによって異なる場合がありますが、通常、数字のみの入力を促します。

<label for="phone">電話番号:</label>
<input type="tel" id="phone" name="phone">

数値や日付を入力する要素

数値入力フィールド（<input type=”number”>）

<input type="number"> は、ユーザーが数値を入力するためのフィールドです。min や max 属性を使って入力可能な数値の範囲を指定できます。

<label for="age">年齢:</label>
<input type="number" id="age" name="age" min="1" max="120">

範囲入力（<input type=”range”>）

<input type="range"> は、スライダーを使って数値の範囲を選択できる要素です。数値の最小値や最大値を指定できます。

<label for="volume">音量:</label>
<input type="range" id="volume" name="volume" min="0" max="100">

日付入力（<input type=”date”>）

<input type="date"> は、ユーザーがカレンダーを使って日付を選択できるフィールドです。日付の形式は自動的にブラウザによって処理されます。

<label for="birthday">誕生日:</label>
<input type="date" id="birthday" name="birthday">

時間入力（<input type=”time”>）

時間を入力するためのフィールドです。時間を指定したり、ブラウザのタイムピッカーを使って選択できます。

<label for="appointment">予約時間:</label>
<input type="time" id="appointment" name="appointment">

色選択フィールド（<input type=”color”>）

<input type="color"> では、カラーピッカーを使用して色を選択できます。ユーザーに色を指定させたい場合に便利です。

<label for="favcolor">好きな色:</label>
<input type="color" id="favcolor" name="favcolor">

選択とチェック要素

ラジオボタン（<input type=”radio”>）

ラジオボタンは、複数の選択肢の中から1つだけを選ぶ場合に使います。同じ name 属性を持つラジオボタンの中で、1つだけが選択されます。

<label>性別:</label>
<input type="radio" id="male" name="gender" value="male"> 男性
<input type="radio" id="female" name="gender" value="female"> 女性

チェックボックス（<input type=”checkbox”>）

チェックボックスは、ユーザーが複数の選択肢から1つ以上を選ぶ場合に使います。複数のチェックボックスを選択可能です。

<label for="subscribe">
  <input type="checkbox" id="subscribe" name="subscribe"> メールマガジンを購読する
</label>

ドロップダウンメニュー（<select>）

<select> タグは、ユーザーに複数の選択肢を表示し、その中から1つを選択するためのメニューです。<option> タグを使って、選択肢を定義します。

<label for="city">都市を選択:</label>
<select id="city" name="city">
  <option value="tokyo">東京</option>
  <option value="osaka">大阪</option>
  <option value="kyoto">京都</option>
</select>

ファイルのアップロード（<input type=”file”>）

<input type="file"> タグを使用すると、ユーザーがコンピュータからファイルを選択してアップロードすることができます。アップロードされたファイルはサーバーに送信されます。

<label for="resume">履歴書をアップロード:</label>
<input type="file" id="resume" name="resume">

フォームの属性

required属性

required 属性を使用すると、そのフィールドが必須入力項目になります。ユーザーがそのフィールドを空白のまま送信しようとすると、ブラウザがエラーメッセージを表示します。

<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>

placeholder属性

placeholder 属性は、入力フィールド内にヒントとして表示されるテキストを設定します。ユーザーが入力を開始すると、このテキストは消えます。

<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" placeholder="ユーザー名を入力してください">

readonly属性

readonly 属性は、そのフィールドが読み取り専用であることを示します。ユーザーはフィールド内のデータを変更できませんが、フィールドの内容はフォーム送信時に送信されます。

<label for="userid">ユーザーID:</label>
<input type="text" id="userid" name="userid" value="12345" readonly>

まとめ

今回は、フォーム要素のさまざまな種類と、それぞれに適用できる属性について学びました。フォームは、ユーザーからの入力を受け取るために不可欠なツールであり、さまざまな要素や属性を適切に使うことで、ユーザーにとって使いやすく効果的なフォームを作成することができます。次回は、メタデータとSEOについて学び、ウェブページの最適化に役立つ知識を身につけましょう！