基本的な HTML フォームを作成する

はじめに

この実験では、<form> タグとさまざまなフォーム要素を使用して基本的な HTML フォームを作成する方法を学びます。

注：index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

HTML ドキュメントのセットアップ

まずは、基本構造を持つ基本的な HTML ドキュメントを作成します。

<!doctype html>
<html>
  <head>
    <title>HTML Form Example</title>
  </head>
  <body></body>
</html>

基本フォームの作成

ここでは、入力フィールドと送信ボタンを持つ基本的な HTML フォームを作成します。body タグの中に以下のコードを追加します。

<h1>HTML Form Example</h1>
<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

上記のコードでは、<h1> タグがフォームのタイトルとして機能します。その後、<form> タグがあり、その中に <label> タグと <input> タグがあります。<label> タグの for 属性値は、<input> タグの id 属性と一致する必要があります。また、改行を追加するために <br> タグもあります。最後に、type 属性が "submit" となっている <input> タグがあります。

フォーム要素の追加

フォームにさまざまなフォーム要素を追加することができます。フォームでは、さまざまな種類の入力フィールドを使用します。ここでは、ドロップダウンメニューとチェックボックスをフォームに追加しましょう。<form> タグのコードを以下のコードに置き換えます。

<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <label for="gender">Gender:</label>
  <select name="gender" id="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>
  <br /><br />
  <label for="hobby">Hobbies:</label>
  <br />
  <input type="checkbox" id="coding" name="hobby" value="coding" />
  <label for="coding">Coding</label>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Reading</label>
  <input type="checkbox" id="drawing" name="hobby" value="drawing" />
  <label for="drawing">Drawing</label>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

上記のコードでは、<option> タグを使用して性別フィールド用の <select> タグを追加し、3 つのオプションを設定しました。また、趣味用に異なるラベル付きの 3 つのチェックボックスも追加しました。

フォーム属性

<form> タグに属性を追加することで、フォームの動作をカスタマイズできます。ここでは、フォームに action と method の属性を追加しましょう。<form> タグのコードを以下のコードに置き換えます。

<form action="submit-form.php" method="post"></form>

上記のコードでは、値が "submit-form.php" の action 属性と値が "post" の method 属性を追加しました。これにより、ブラウザに対して、HTTP メソッド POST を使用してフォームデータを "submit-form.php" ファイルに送信するよう指示します。

フォームの検証

特定のフィールドを必須にするには、required 属性を使用できます。名前フィールドの <input> タグに required 属性を追加します。

<input type="text" name="name" id="name" required />

フォームのアクセシビリティ

<fieldset> と <legend> タグを使用することで、フォームにアクセシビリティ機能を追加することもできます。性別フィールドを以下のコードで囲みます。

<fieldset>
  <legend>Gender:</legend>
  ...
</fieldset>

これにより、性別フィールドがグループ化され、そのグループに見出しが追加されます。

ラベルの追加

最後に、<label> タグを使用してチェックボックスにラベルを追加することもできます。各趣味に対するチェックボックスとラベルを以下のコードで囲みます。

<label for="coding">Coding</label>
<input type="checkbox" id="coding" name="hobby" value="coding" />

これにより、各ラベルが対応するチェックボックスに関連付けられます。

まとめ

この実験では、<form> タグと入力フィールド、ドロップダウンメニュー、チェックボックスなどのさまざまなフォーム要素を使用して基本的な HTML フォームを作成する方法を学びました。また、method、action、required などのフォーム属性を追加する方法と、<fieldset> と <legend> タグを使用してアクセシビリティ機能を追加する方法も学びました。

HTML 入力フォーム