TECH I.S.

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>



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細