フォームとはユーザーからのデータの入力をサーバーに送信する仕組みです。ウェブサイトでは、ログインページ、検索ボックス、登録フォームなど様々な場面で使用されています。
フォームで使用するタグ
フォームでは以下のようなタグを使用します。
| タグ | 説明 |
| form | フォーム全体を囲む要素 |
| input | ユーザーが入力するための要素 |
| textarea | 複数行のテキストを入力するための要素 |
| select | ドロップダウンリストを提供する要素 |
| button | ボタンを定義する要素 |
| label | 入力フィールドと関連付ける要素 |
フォームの例
フォームのコードの例と表示の例は以下のようになります。
<form action="/" method="get">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<label for="text">text</label>
<textarea name="text" id="text"></textarea>
<label for="select">select</label>
<select name="select" id="select">
<option selected value="">--選択してください--</option>
<option value="m">男性</option>
<option value="w">女性</option>
</select>
</form>formタグのaction属性にはデータの送信するサーバーのURLを指定します。今回はホームルートに設定しています。method属性にはデータの送信方法を指定しています。GetとPostの二種類が設定できます。labelタグはフォームの要素の説明を提供するタグです。for属性に関連付けたいinputタグのid属性を指定すると関連付けられます。inputタグは入力用のタグで、様々な入力ができます。name属性はフォームデータをサーバーに送信する際に識別に利用される属性です。textareaタグはテキストを入力するためのタグです。selectタグはドロップダウンリストを実装するタグで、optionタグで選択肢を指定します。optionタグのselected属性はデフォルトの選択を指定します。
ボタンの例
ボタンのコードの例と表示の例は以下のようになります。
<button>送信</button>上記のボタンはformタグ内に記述することで実行できます。
buttonタグにはtype属性があり、以下の3種類から指定できます。
| 属性 | 説明 |
| submit | フォームを送信する type属性を指定しない場合はsubmitになる |
| reset | フォーム内のすべての入力フィールドをリセットする |
| button | クリックイベントをトリガーする汎用ボタン 特定の動作は定義されない |
inputタグのtype属性の種類
inputタグのtype属性には多くの種類があります。
| type | 説明 | 例 |
| text | 1行のテキストを入力します。 | 氏名、住所、コメントなど |
| password | パスワードなどを入力します。 入力内容は表示されません。 | パスワード入力 |
| メールアドレスを入力します。 形式検証があります。 | メールアドレスの入力 | |
| number | 数値を入力します。 スピンボタンがついてます。 | 年齢や数量の入力 |
| date | カレンダー付の日付選択です。 | 日付の入力 （YYYY-MM-DD形式） |
| time | 時刻を入力します。 | 時間の入力 |
| checkbox | 複数選択可能なチェックボックスを作成します。 | 条件同意や複数選択 |
| radio | 単一選択が可能なラジオボタンを作成します。 | 性別やオプション選択 |
| file | ファイル選択とアップロードを行います。 | 画像やドキュメントのアップロード |
| submit | フォームデータをサーバーに送信します。 | 送信ボタン |
inputタグのtype属性の例
inputタグのtype属性のコードの例と表示の例は以下のようになります。
<label for="text">text</label>
<input type="text" id="text">
<br>
<label for="password">password</label>
<input type="password" id="password">
<br>
<label for="email">email</label>
<input type="email" id="email">
<br>
<label for="number">number</label>
<input type="number" id="number">
<br>
<label for="date">date</label>
<input type="date" id="date">
<br>
<label for="time">time</label>
<input type="time" id="time">
<br>
<label for="checkbox1">checkbox1</label>
<input type="checkbox" name="checkbox1" id="checkbox1">
<label for="checkbox2">checkbox2</label>
<input type="checkbox" name="checkbox2" id="checkbox2">
<br>
<label for="radio1">radio1</label>
<input type="radio" name="radio1" id="radio1">
<label for="radio2">radio2</label>
<input type="radio" name="radio2" id="radio2">
<br>
<label for="file">file</label>
<input type="file" id="file">
<br>
<label for="submit">submit</label>
<input type="submit" id="submit">
<br>type属性がtextの場合、入力フォームはテキストを受け付けます。passwordの場合は入力された項目を非表示にします。emailの場合は入力がemailに制限されます。numberの場合は入力が数値に制限されます。右側のスピンボタンで、数値を増減させることができます。dateの場合は入力はカレンダーから年月日を選択できるようになります。timeの場合は入力はドロップダウンから選択できるようになります。checkboxの場合はチェックボックスを入力にできます。radioの場合はラジオボタンを入力にでき、同じnameを指定した複数のラジオボタンから単一選択ができます。fileの場合はファイルをアップロードできるようになります。submitの場合はボタンを作成できます。
上記以外のtype属性もあります。
今回はフォームについて詳しく説明しました。フォームはよく使用されるので、使用頻度が高いと思います。inputタグのtype属性はほかにも複数あるので、必要に応じて使い分けてください。
前：テーブル