HTMLフォーム
HTMLフォームは、ユーザー入力を収集するために使用されます。ユーザー入力は、ほとんどの場合、処理のためにサーバーに送信されます。
例
<form>要素
HTML<form>
要素は、ユーザー入力用のHTMLフォームを作成するために使用されます。
<form>
.
form elements
.
</form>
この<form>
要素は、テキストフィールド、チェックボックス、ラジオボタン、送信ボタンなど、さまざまなタイプの入力要素のコンテナです。
この章では、さまざまなフォーム要素すべてについて説明します: 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">
、テキスト入力用の1行の入力フィールドを定義します。
例
テキストの入力フィールドを持つフォーム:
<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>
要素内のテキストをクリックすると、ラジオボタン/チェックボックスが切り替わるためです。
タグのfor
属性は、
それらをバインドするための要素の属性<label>
と同じである必要があります。id
<input>
ラジオボタン
は<input type="radio">
ラジオボタンを定義します。
ラジオボタンを使用すると、ユーザーは限られた数の選択肢から1つを選択できます。
例
ラジオボタン付きのフォーム:
<p>Choose your favorite Web language:</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
と、入力フィールドの値はまったく送信されません。
例
この例では、「名」入力フィールドの値は送信されません。
<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>