HTMLフォーム
ユーザー入力の収集には HTMLフォームが使用されます。ほとんどの場合、ユーザー入力は処理のためにサーバーに送信されます。
<form>要素
HTML<form>要素は、ユーザー入力用のHTMLフォームを作成するために使用されます。
<form> .form elements . </form>
<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">テキスト入力用の単一行入力フィールドを定義します。
例
テキストの入力フィールドを持つフォーム:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
上記のHTMLコードをブラウザに表示すると、次のようになります。
注：フォーム自体は表示されません。また、入力フィールドのデフォルト幅は20文字です。
<label>要素
上記の例では<label>要素が使用されている事に注意してください。
<label>タグは、多くのフォーム要素のラベルを定義します。
<label>要素は、ユーザーが入力要素にフォーカスすると、スクリーンリーダーがラベルを読み上げるため、スクリーンリーダーのユーザーに役立ちます。
<label>要素は、非常に小さな領域(ラジオ ボタンやチェックボックスなど)をクリックするのが困難なユーザーにも役立ちます。<label>要素で、ラジオ ボタン/チェックボックスを切り替えます。
<label>タグのforの属性は、<input>のid属性と同じにして、それらをバインドする必要があります。
ラジオボタン
<input type="radio">は、ラジオボタンを定義します。
ラジオボタンを使用すると、ユーザーは限られた数の選択肢から1つを選択できます。
例
ラジオボタンのあるフォーム
<p>あなたのプログラミング言語を選んでください</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
上記のHTMLコードをブラウザに表示すると、次のようになります。
お気に入りのWeb言語を選択してください:
チェックボックス
<input type="checkbox">は、チェックボックスを定義します
チェックボックスを使用すると、ユーザーは限られた数の選択肢から0個以上のオプションを選択できます。
例
チェックボックスのあるフォーム
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
上記のHTMLコードをブラウザに表示すると、次のようになります。
送信ボタン
<input type="submit">フォームデータをフォームハンドラに送信するためのボタンを定義します。
通常、フォームハンドラーは、入力データを処理するためのスクリプトを含むサーバー上のファイルです。
フォームハンドラはフォームのaction属性。
例
送信ボタンのあるフォーム
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
上記のHTMLコードをブラウザに表示すると、次のようになります。
<input>のName属性
各入力フィールドには送信するname属性が必要である事に注意してください。
name属性を省略した場合、入力フィールドの値は送信されません。
例
この例では、「名前」入力フィールドの値は送信されません。
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>