HTMLフォーム
ユーザー入力の収集には HTMLフォームが使用されます。ほとんどの場合、ユーザー入力は処理のためにサーバーに送信されます。
<form>要素
HTML<form>要素は、ユーザー入力用のHTMLフォームを作成するために使用されます。
<form>element は、テキストフィールド、チェックボックス、ラジオボタン、送信ボタンなど、さまざまなタイプの入力要素のコンテナです。
このHTML フォーム要素の章では、さまざまなフォーム要素について説明します。
<input>要素
HTML<input>要素は、最も使用されるフォーム要素です。
<input>要素は、type属性に応じて様々な方法で表示できます。
ここではいくつかの例を示します。
|
タイプ |
説明 |
|---|---|
| <input type="text"> | 1 行のテキスト入力フィールドを表示します |
| <input type="radio"> | ラジオボタンを表示します (多数の選択肢から1つを選択するため)。 |
| <input type="checkbox"> | チェックボックスを表示します (多数の選択肢から0個以上を選択するため) |
| <input type="submit"> | 送信ボタンを表示します（フォームを送信するため） |
| <input type="button"> | クリック可能なボタンを表示する |
このHTML 入力タイプの章では、すべての異なる入力タイプについて説明します。
テキストフィールド
<input type="text">テキスト入力用の単一行入力フィールドを定義します。
例
テキストの入力フィールドを持つフォーム:
上記のHTMLコードをブラウザに表示すると、次のようになります。
注：フォーム自体は表示されません。また、入力フィールドのデフォルト幅は20文字です。
<label>要素
上記の例では<label>要素が使用されている事に注意してください。
<label>タグは、多くのフォーム要素のラベルを定義します。
<label>要素は、ユーザーが入力要素にフォーカスすると、スクリーンリーダーがラベルを読み上げるため、スクリーンリーダーのユーザーに役立ちます。
<label>要素は、非常に小さな領域(ラジオ ボタンやチェックボックスなど)をクリックするのが困難なユーザーにも役立ちます。<label>要素で、ラジオ ボタン/チェックボックスを切り替えます。
<label>タグのforの属性は、<input>のid属性と同じにして、それらをバインドする必要があります。
ラジオボタン
<input type="radio">は、ラジオボタンを定義します。
ラジオボタンを使用すると、ユーザーは限られた数の選択肢から1つを選択できます。
例
ラジオボタンのあるフォーム
上記のHTMLコードをブラウザに表示すると、次のようになります。
お気に入りのWeb言語を選択してください:
チェックボックス
<input type="checkbox">は、チェックボックスを定義します
チェックボックスを使用すると、ユーザーは限られた数の選択肢から0個以上のオプションを選択できます。
例
チェックボックスのあるフォーム
上記のHTMLコードをブラウザに表示すると、次のようになります。
送信ボタン
<input type="submit">フォームデータをフォームハンドラに送信するためのボタンを定義します。
通常、フォームハンドラーは、入力データを処理するためのスクリプトを含むサーバー上のファイルです。
フォームハンドラはフォームのaction属性。
例
送信ボタンのあるフォーム
上記のHTMLコードをブラウザに表示すると、次のようになります。
<input>のName属性
各入力フィールドには送信するname属性が必要である事に注意してください。
name属性を省略した場合、入力フィールドの値は送信されません。
例
この例では、「名前」入力フィールドの値は送信されません。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。