フォーム関連のタグ

この記事ではフォーム関連のタグについて説明します。

テキスト入力やドロップダウンメニューなど各種フォームフィールドについて説明しています。

YouTube Video

フォーム関連のタグ

<form>タグ

1<form action="/submit" method="post">...</form>

• <form>タグは、フォーム全体を定義するためのタグです。
• action属性で送信先、method属性で送信方法（GETまたはPOST）を指定します。
• <a>タグと同様にtarget属性を指定することもできます。

<input>タグ(テキスト入力フィールド)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text">は、シングルラインのテキスト入力フィールドを作成します。ユーザーは任意のテキストを入力できます。

• placeholder属性は、入力フィールドが空のときに表示される説明的なテキストを指定するための属性です。これにより、ユーザーが入力内容の期待値を簡単に理解できます。入力を開始すると、このテキストは自動的に非表示になります。

  • placeholder は補足情報の提供に適しており、必須入力などの重要な指示には適していません。その場合はラベルを使用するべきです。

<input>タグ(パスワード入力フィールド)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password">は、パスワード入力用のフィールドを作成します。入力した文字は非表示でマスクされ、セキュリティが保たれます。

<input>タグ(メールアドレス入力フィールド)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email">は、メールアドレスを入力するためのフィールドを作成し、バリデーションが組み込まれているため、正しい形式のメールアドレスを要求します。

<input>タグ(チェックボックス)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox">は、チェックボックスを作成します。複数の選択肢がある場合、ユーザーは複数の項目を選ぶことが可能です。

<input>タグ(ラジオボタン)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio">は、ラジオボタンを作成し、選択肢の中から一つのみ選べるフィールドを提供します。

<input>タグ(サブミットボタン)

1<input type="submit" value="Submit">

• <input type="submit">は、フォーム内のデータを送信するためのボタンを作成します。
• value属性の値はフォームデータに含まれて送信されます。

<input>タグ(リセットボタン)

1<input type="reset" value="Reset">

• <input type="reset">は、フォーム内のすべての入力値をリセットするボタンを作成します。

<input>タグ(隠しフィールド)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden">は、画面に表示されない隠しフィールドを作成し、フォーム送信時にバックエンドにデータを送信するために使用されます。

<input>タグ(カラーピッカー)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color">は、カラーピッカーを表示し、ユーザーがカラーを選択できる入力フィールドを作成します。

<input>タグ(日付入力フィールド)

1<input type="date" name="birthday">

• <input type="date">は、カレンダーを表示して日付を選択できる日付入力フィールドを作成します。

<input>タグ(時刻入力フィールド)

1<input type="time" name="appointment_time">

• <input type="time">は、時間を入力するフィールドを作成し、時刻ピッカーが表示されます。

<input>タグ(ファイル選択フィールド)

1<input type="file" name="resume">

• <input type="file">は、ユーザーがファイルを選択してアップロードできる入力フィールドを作成します。
• formタグのenctype属性には、multipart/form-dataを指定する必要があります。

<input>タグ(数値)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number">は、数値入力用のフィールドを作成し、最小値・最大値・ステップ（増減幅）を設定することができます。

<input>タグ(数値の範囲選択フィールド)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range">は、スライダーによって範囲内の数値を選択できる入力フィールドを作成します。

<textarea>タグ

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• <textarea>タグは、複数行のテキスト入力フィールドを作成します。長いテキストやコメントの入力に適しています。

<select>タグ

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• <select>タグは、ドロップダウンメニューを作成し、<option>タグで選択肢を定義します。ユーザーは一つまたは複数の項目を選択できます。

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• 複数選択を可能にするには、multiple属性を追加します。この属性を指定すると、選択肢がリストボックスとして表示されます。

<optgroup>タグ

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• <optgroup>タグは、関連する項目をまとめるために使用されます。label属性でグループ名を設定でき、リストが長い場合でもユーザーにわかりやすい選択肢を提供します。

<label>タグ

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• <label>タグは、入力フィールド、チェックボックス、ラジオボタンなどにラベルを定義し、使いやすさやアクセシビリティを向上させます。
• 例えば、ラベルをクリックすると、入力フィールドにフォーカスしたり、チェックボックスのオンやオフを切り替えたりすることができます。

<fieldset>タグ

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• <fieldset>タグは、関連するフォームコントロールをグループ化し、<legend>タグを使ってそのグループのタイトルを提供します。

<button>タグ

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• <button>タグは、クリック可能なボタンを定義し、フォーム送信や他のアクションをトリガーします。

  type="button"を指定すると、通常のボタンとして機能します。クリックしてもフォームの送信などは行われません。JavaScriptで任意のアクションを設定したい場合などに使われます。

  type="submit"を指定すると、フォームの送信ボタンとして機能します。このボタンがクリックされると、そのボタンが含まれるフォームが送信されます。

  type="reset"を指定すると、フォームのリセットボタンとして機能します。クリックすると、フォームの入力内容がすべてリセットされ、初期状態に戻ります。

  type属性を指定しない場合、ブラウザによってはtype="submit"として動作することがあるため、意図した動作に合わせてtypeを明示的に指定することが推奨されます。

• <button>タグは、開始タグと終了タグの間に他の HTML コンテンツを含めることができるため、アイコンや複雑なテキストを含めるボタンを作成することが可能です。

• <input>タグのサブミットボタンの場合は value属性の値がフォームデータに含まれて送信されますが、<button>タグではそのままでは送信されません。

  <button>タグにnameとvalue属性を指定することで、その値をフォームデータとして送信できます。

<datalist>タグ

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• <datalist>タグは、<input>要素に対して選択可能なオプションリストを提供します。ユーザーはリストから選択するか、自分で値を入力することができます。

<output>タグ

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• <output>タグは、計算やユーザーの操作結果を表示します。フォームやスクリプト内で、計算結果を動的に表示するのに使用されます。
• for属性には、紐付けたいフォーム要素のidをスペース区切りで指定します。

<progress>タグ

1<progress value="70" max="100">70%</progress>

• <progress>タグは、ユーザーにタスクの進行状況を示します。たとえば、ファイルのダウンロードやインストールの進行具合を視覚的に表示するのに役立ちます。

<meter>タグ

1<meter value="0.6">60%</meter>

• <meter>タグは、既知の範囲内での数値的な計測値を表します。ディスク使用量や燃料ゲージなど、特定の範囲内での測定値を示すために使われます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video