HTMLフォームと入力
HTMLフォームはユーザーの入力情報を収集するために使用されます。
HTMLフォームは、ユーザーから収集した情報をWebサーバーに送信するインタラクティブなコントロールを含むドキュメント内の領域を表します。HTMLフォームには、通常、さまざまな入力フィールド、チェックボックス、ラジオボタン、ドロップダウンリストなどの要素が含まれます。
HTMLフォームの例
<form action="/" method="post">
<!-- テキスト入力フィールド -->
<label for="name">ユーザー名:</label>
<input id="name" name="name" required="" type="text" />
<br />
<!-- パスワード入力フィールド -->
<label for="password">パスワード:</label>
<input id="password" name="password" required="" type="password" />
<br />
<!-- ラジオボタン -->
<label>性別:</label>
<input id="male" checked="checked" name="gender" type="radio" value="male" />
<label for="male">男</label>
<input id="female" name="gender" type="radio" value="female" />
<label for="female">女</label>
<br /> <!-- チェックボックス -->
<input id="subscribe" checked="checked" name="subscribe" type="checkbox" />
<label for="subscribe">情報の購読</label>
<br /> <!-- ドロップダウンリスト -->
<label for="country">国:</label>
<select id="country" name="country">
<option value="jp">日本</option>
<option value="usa">アメリカ</option>
<option value="uk">イギリス</option>
</select>
<br /> <!-- 送信ボタン -->
<input type="submit" value="送信" />
</form>基本的なHTMLフォームの例
<form>要素はフォームを作成するために使用され、
action属性はフォームデータを送信するターゲットURLを定義し、
method属性はデータ送信のHTTP方法（ここでは"post"）を定義します。
<label>要素はフォーム要素にラベルを追加してアクセシビリティを向上させます。
<input>要素は最も一般的なフォーム要素の一つで、テキスト入力フィールド、パスワードフィールド、ラジオボタン、チェックボックスなどを作成できます。
type属性は入力フィールドのタイプを定義し、id属性は<label>要素と関連付け、name属性はフォームフィールドを識別します。
<select>要素はドロップダウンリストを作成するために使用され、
<option>要素はドロップダウンリストの選択肢を定義します。
HTMLフォームの詳細
フォームは、フォーム要素を含む領域です。フォーム要素は、ユーザーがフォーム内に入力できる要素です。たとえば、テキストフィールド、テキストエリア、ドロップダウンリスト、ラジオボタン、チェックボックスなどです。フォームを作成するには、<form>タグを使用します。
HTMLフォーム - 入力要素
フォームタグで最もよく使用されるのは<input>タグです。入力タイプはtype属性で定義されます。次に、一般的な入力タイプについて紹介します。
テキストフィールド
テキストフィールドは、<input type="text">タグで定義されます。ユーザーがフォームに文字や数字を入力する場合に使用されます。
<form>
<label for="firstname">名:</label>
<input id="firstname" name="firstname" type="text" />
<br />
<label for="lastname">姓:</label>
<input id="lastname" name="lastname" type="text" />
</form>パスワードフィールド
パスワードフィールドは、<input type="password">タグで定義されます。パスワードフィールドに入力された文字は、星号（*）または点（•）として表示されます。
<form><label for="pwd">パスワード:</label> <input id="pwd" name="pwd" type="password" /></form>ラジオボタン
ラジオボタンは、<input type="radio">タグで定義され、選択肢の中から1つだけ選択する場合に使用されます。
<form>
<input id="male" name="gender" type="radio" value="male" />
<label for="male">男</label>
<br />
<input id="female" name="gender" type="radio" value="female" />
<label for="female">女</label>
</form>チェックボックス
チェックボックスは、<input type="checkbox">タグで定義され、複数の選択肢を選択する場合に使用されます。
<form>
<input id="bike" name="vehicle[]" type="checkbox" value="bike" />
<label for="bike">自転車が好き</label>
<br />
<input id="car" name="vehicle[]" type="checkbox" value="car" />
<label for="car">車が好き</label>
</form>送信ボタン
送信ボタンは、<input type="submit">タグで定義され、ユーザーがフォームに入力した内容をサーバーに送信します。
<form action="html_form_action.php" method="get" name="input">
<label for="user">ユーザー名:</label>
<input id="user" name="user" type="text" />
<input type="submit" value="送信" />
</form>フォームに関する質問と回答
Q1: HTMLフォームとは何ですか？
A1: HTMLフォームは、ユーザーが入力した情報を収集し、Webサーバーに送信するためのインタラクティブなエリアです。
Q2: <input>要素のtype属性にはどのような値がありますか？
A2: type属性には、text、password、radio、checkbox、submitなどの値があります。
Q3: フォームデータを送信するためのHTTPメソッドにはどのような種類がありますか？
A3: フォームデータを送信するためのHTTPメソッドには、GETとPOSTの2種類があります。GETはデータをURLに付加して送信し、POSTはデータをリクエストボディに含めて送信します。