ITコース HTML基礎 013_フォームとユーザー入力

フォーム

HTML フォーム（Form）は HTML の非常に重要な部分で、ユーザーが Web ページで情報を入力し、サーバーに送信することを可能にします。

例：

1
<form action="/submit" method="post">
2
  <!-- フォーム要素はここに配置 -->
3
</form>

<form> 要素はユーザーがデータを入力する領域を定義し、テキストエリア <textarea>、ドロップダウンリスト <select>、ラジオボタン <radio>、チェックボックス <checkbox>、ボタン <button> など、さまざまな種類の入力要素を含めることができます。

フォーム属性：

• action：フォームデータがサーバーに送信された後の処理ファイルの URL を定義します。
• method：データをサーバーに送信する際に使用する HTTP メソッドを定義します。一般的な値は “get” と “post” です。
• name：フォームの名前を指定するために使用します。フォーム名はフォームを識別し、サーバー側でフォームデータを処理する際に使用されます。
• enctype：フォームデータのエンコード方式を指定するために使用します。フォームデータは application/x-www-form-urlencoded または multipart/form-data エンコード方式を使用できます。
• autocomplete：フォームの自動補完機能を有効にするかどうかを指定するために使用します。on に設定すると、ブラウザは以前にフォームに入力したデータを自動的に入力します。
• novalidate：フォームデータを検証するかどうかを指定するために使用します。on に設定すると、フォームデータは送信前に検証されません。

[!まとめ]

• form フォーム自体は表示されません。

テキストフィールド

フォームでは、ユーザーに文字、数字などのテキストコンテンツを入力してもらう必要がよくあります。これは <input> 要素の type 属性を “text” に設定することで実現できます。

例：

1
<form>
2
名前: <input type="text" name="name"><br>
3
年齢: <input type="text" name="age">
4
</form>

効果：

[!まとめ]

• ほとんどのブラウザでは、テキストフィールドのデフォルト幅は 20 文字です。

パスワードフィールド

ユーザーにパスワードを入力してもらう必要がある場合は、<input> 要素の type 属性を “password” に設定すると、入力内容が非表示になります。

例：

1
<form>
2
パスワード: <input type="password" name="pwd">
3
</form>

効果：

[!まとめ]

• パスワードフィールドの文字はプレーンテキストでは表示されず、アスタリスク * またはドット . で置き換えられます。

ラジオボタン（Radio Buttons）

ラジオボタンとチェックボックスを使用すると、ユーザーは複数の選択肢から 1 つまたは複数を選択できます。ラジオボタンの type 属性値は “radio” です。

例：

1
<form action="">
2
性別：
3
<input type="radio" name="sex" value="male" checked>男性
4
<input type="radio" name="sex" value="female">女性
5
</form>

効果：

[!まとめ]

• ラジオボタンの name 属性値は同じでなければなりません。そうでないと、同じグループに属しません。
• checked 属性は、ラジオボタンがデフォルトで選択されているかどうかを指定するために使用します。

チェックボックス（Checkboxes）

チェックボックスは 1 つまたは複数のオプションを選択でき、<input type="checkbox"> を使用して定義します。

例：

1
<form>
2
  使用したことのあるアプリ：
3
  <input type="checkbox" name="app" value="jd">JD
4
  <input type="checkbox" name="app" value="wechat">WeChat
5
  <input type="checkbox" name="app" value="qq">QQ
6
  <input type="checkbox" name="app" value="douyin">TikTok
7
</form>

効果：

[!まとめ]

• checked 属性は、チェックボックスがデフォルトで選択されているかどうかを指定するために使用します。

ドロップダウンリスト（select）

ドロップダウンリストを使用すると、ユーザーは複数の選択肢から 1 つを選択できます。<select> 要素で作成し、<option> 要素でオプションを定義します。

例：

1
<form action="">
2
  国を選択してください：
3
  <select name="country">
4
    <option value="china">中国</option>
5
    <option value="us">アメリカ</option>
6
    <option value="japan">日本</option>
7
  </select>
8
</form>

効果：

[!まとめ]

• selected 属性は、ドロップダウンリストのデフォルトオプションを指定するために使用します。
• disabled 属性は、ドロップダウンリストが使用可能かどうかを指定するために使用します。
• size 属性を使用して、ドロップダウンリストで表示されるオプションの数を指定できます。

送信ボタン（Submit、Reset、Button）

フォームには通常、ユーザーの入力を送信または確認するためのボタンが必要です。submit、reset、button はすべて HTML のフォームボタン要素です。

例：

1
<form action="/submit" method="post">
2
  <input type="submit" value="送信ボタン">
3
  <input type="reset" value="リセットボタン">
4
  <button type="button" value="確認ボタン">確認ボタン</button>
5
  <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="画像ボタン" width="50" height="50">
6
</form>

効果：

[!まとめ]

• post：HTTP POST メソッドを指し、フォームデータはフォーム本文に含まれてサーバーに送信されます。ユーザー名やパスワードなどの機密データの送信に使用されます。
• get：デフォルト値で、HTTP GET メソッドを指します。フォームデータは action 属性の URL に ? を区切り文字として追加され、一般的にページネーションなどの機密性のない情報に使用されます。例：https://www.zhaojian.net/?page=1、ここで page=1 は get メソッドで送信されたデータです。

フォーム要素と属性