HTMLフォームとは?

2024-04-02

HTML フォーム要素:プログラミング初心者でも分かる解説

目次

  1. フォームとは?
  2. フォーム要素の種類 2.1 <form> 要素 2.2 入力要素 2.2.1 テキスト入力:<input type="text"> 2.2.2 パスワード入力:<input type="password"> 2.2.3 チェックボックス:<input type="checkbox"> 2.2.4 ラジオボタン:<input type="radio"> 2.2.5 プルダウンメニュー:<select> 2.2.6 送信ボタン:<input type="submit"> 2.2.7 リセットボタン:<input type="reset">
  3. フォームの送信方法 3.1 GET メソッド 3.2 POST メソッド
  4. コード例
  5. まとめ

フォームとは?

HTMLフォームは、ユーザーから情報を入力・送信するための領域です。アンケート、注文、ログインなど、様々な場面で使用されます。

フォーム要素の種類

フォームは、複数の要素で構成されます。主な要素は以下の通りです。

1 <form> 要素

フォーム全体の開始と終了を指定します。

<form action="送信先URL" method="送信方法">
  ... フォーム要素 ...
</form>

属性

  • action: 送信先のURL
  • method: 送信方法 (GET/POST)

2 入力要素

ユーザーが入力する情報の種類に応じて、様々な入力要素があります。

1 テキスト入力:<input type="text">

1行のテキスト入力を可能にします。

<input type="text" name="名前" placeholder="名前を入力">

属性

  • name: 送信時に使用する名前
  • placeholder: 入力欄に表示される説明文

2 パスワード入力:<input type="password">

パスワードなど、秘密の情報を隠して入力できるようにします。

<input type="password" name="パスワード" placeholder="パスワードを入力">

3 チェックボックス:<input type="checkbox">

複数選択可能な項目を表します。

<input type="checkbox" name="趣味" value="読書"> 読書
<input type="checkbox" name="趣味" value="映画鑑賞"> 映画鑑賞

属性

  • value: 送信される値

4 ラジオボタン:<input type="radio">

複数選択項目から1つだけを選択できるようにします。

<input type="radio" name="性別" value="男性"> 男性
<input type="radio" name="性別" value="女性"> 女性

5 プルダウンメニュー:<select>

選択肢から1つを選択できるようにします。

<select name="国">
  <option value="日本">日本</option>
  <option value="アメリカ">アメリカ</option>
  <option value="中国">中国</option>
</select>

オプション要素

  • <option>: 選択肢

6 送信ボタン:<input type="submit">

フォームを送信します。

<input type="submit" value="送信">

属性

  • value: ボタンに表示される文字

7 リセットボタン:<input type="reset">

フォームに入力された内容をクリアします。

<input type="reset" value="リセット">

フォームの送信方法

フォーム送信には、GETとPOSTの2つの方法があります。

1 GET メソッド

URLにパラメータとして情報をエンコードして送信します。

<form action="送信先URL.php?param1=value1&param2=value2" method="get">
  ... フォーム要素 ...
</form>


HTML フォームサンプルコード集

<form action="送信先URL.php" method="post">
  <p>氏名:</p>
  <input type="text" name="氏名" placeholder="氏名を入力">
  <p>メールアドレス:</p>
  <input type="text" name="メールアドレス" placeholder="メールアドレスを入力">
  <p>お問い合わせ内容:</p>
  <textarea name="お問い合わせ内容" placeholder="お問い合わせ内容を入力"></textarea>
  <input type="submit" value="送信">
</form>

ログインフォーム

<form action="ログイン処理.php" method="post">
  <p>ユーザー名:</p>
  <input type="text" name="ユーザー名" placeholder="ユーザー名を入力">
  <p>パスワード:</p>
  <input type="password" name="パスワード" placeholder="パスワードを入力">
  <input type="submit" value="ログイン">
</form>

アンケートフォーム

<form action="アンケート結果.php" method="post">
  <p>あなたの性別は?</p>
  <input type="radio" name="性別" value="男性"> 男性
  <input type="radio" name="性別" value="女性"> 女性
  <p>趣味は何ですか?</p>
  <input type="checkbox" name="趣味[]" value="読書"> 読書
  <input type="checkbox" name="趣味[]" value="映画鑑賞"> 映画鑑賞
  <input type="checkbox" name="趣味[]" value="音楽鑑賞"> 音楽鑑賞
  <input type="submit" value="送信">
</form>

商品購入フォーム

<form action="購入処理.php" method="post">
  <p>商品名:</p>
  <select name="商品名">
    <option value="商品1">商品1</option>
    <option value="商品2">商品2</option>
    <option value="商品3">商品3</option>
  </select>
  <p>数量:</p>
  <input type="number" name="数量" value="1">
  <input type="submit" value="購入">
</form>

ファイルアップロードフォーム

<form action="アップロード処理.php" method="post" enctype="multipart/form-data">
  <p>ファイルを選択:</p>
  <input type="file" name="アップロードファイル">
  <input type="submit" value="アップロード">
</form>

これらのサンプルコードは、フォームの基本的な使い方を理解するのに役立ちます。必要に応じて、デザインや機能をカスタマイズすることができます。



フォーム送信のその他の方法

JavaScriptを使用して、AJAX通信でフォームを送信することができます。これは、ページ全体をリロードせずに、サーバーと通信できるため、ユーザーエクスペリエンスを向上させることができます。

PHPなどのサーバーサイド言語を使用して、フォームデータを処理することができます。

フレームを使用して、フォームを別のページに送信することができます。

画像の src 属性にフォームデータを含めることで、画像を介してフォームを送信することができます。

それぞれの方法のメリットとデメリット

方法メリットデメリット
GETシンプルURLに情報がエンコードされる
POST情報を隠蔽できる複雑
JavaScriptユーザーエクスペリエンスが良いJavaScriptの知識が必要
PHP柔軟性が高いサーバーサイドの知識が必要
フレーム別のページに送信できる複雑
画像シンプル情報量が制限される

フォーム送信方法を選択する際には、以下の点を考慮する必要があります。

  • 送信したい情報量
  • セキュリティ要件
  • ユーザーエクスペリエンス
  • 開発者のスキル

これらの点を考慮した上で、最も適切な方法を選択してください。




これで完璧!HTMLのwrap属性で実現する、見やすく使いやすいテキストエリア

wrap 属性は、textarea 要素で使用され、テキストエリア内のテキストが折り返される際の挙動を制御します。属性値hard: テキストが折り返された際に、改行コード (\n) を挿入します。soft: テキストが折り返された際に、改行コードは挿入せず、スペースで折り返します。



画像の説明もバッチリ!アクセシビリティを向上させる属性スコープ

HTML 属性には、主に 2 種類のスコープがあります。要素スコープ: 属性の効果は、属性が属する要素だけに限定されます。これが最も一般的なスコープです。スコープ付き属性: 属性の効果は、特定の範囲の要素に及びます。この範囲は、属性名によって異なります。


inputmode属性を使いこなして、ユーザー体験を向上させる

inputmode属性は、以下の役割を果たします。適切なキーボードの表示: 入力欄の種類に応じて、数字キーボード、テンキー、音声入力など、最適なキーボードを表示することができます。入力補助機能の提供: ブラウザは、入力欄の種類に応じて、自動補完、スペルチェック、予測変換などの入力補助機能を提供することができます。


HTMLフォームのサンプルコード

HTMLフォームは、Webサイトでユーザーからデータを入力してもらうための重要な要素です。フォーム属性は、フォームの動作や見た目などを制御するために使用されます。action: フォーム送信時にデータを送信するURLを指定します。省略すると、現在のページに送信されます。


フォームデータのエンコードを徹底解説! enctype 属性の役割と具体的な使用方法

enctype 属性の値として指定できる主なオプションは以下の3つです:application/x-www-form-urlencoded (デフォルト): このオプションは、フォームデータのすべての文字をURLエンコードして送信します。これは最も一般的で、ファイルアップロード以外のほとんどのフォームで使用されます。



size属性を使いこなしてWebページをデザインしよう!

<input>要素のsize属性は、テキスト入力欄の幅をピクセル単位で指定します。これは、ユーザーが入力できる文字数に影響を与えます。例:上記のコードは、名前を入力するためのテキスト入力欄を生成します。入力欄は20ピクセルの幅で表示され、ユーザーは20文字程度の名前を入力することができます。


HTML Elements の "title" 要素の完全ガイド | SEO対策もバッチリ

HTML Elements の "title" 要素は、Web ページのタイトルを設定するための要素です。これは、ブラウザのタブや検索結果リストに表示されるタイトルとして使用されます。また、スクリーンリーダーなどの支援技術によって読み上げられるため、アクセシビリティの観点からも重要な要素です。


HTML要素のルビー:読み仮名やふりがなを表示する方法

上記コードは、「本」という漢字に「ほん」という読み仮を表示します。<ruby>要素:ルビーの開始と終了を指定します。<rp>要素:ルビープリフィックス(読み仮名前の記号)を指定します。通常は空にします。<rt>要素:ルビーテキスト(読み仮名)を指定します。


HTML表レイアウトを自在に操る!「rows」属性の使い方とサンプルコード集

「rows」属性は、HTML表における行の数を定義するために使用されます。この属性は、<table> 要素内に記述されます。属性の構文:上記の例では、rows属性は省略されていますが、この場合、表はブラウザによって自動的に行数が決定されます。しかし、rows属性を明示的に指定することで、より明確なHTML構造となり、アクセシビリティや保守性を向上させることができます。


アクセスキー、編集可能、コンテキストメニュー:HTML Miscellaneous 属性の基礎

accesskey 属性概要: 特定の要素にキーボードショートカットを割り当て、キーボード操作で素早くアクセスできるようにします。値: 英数字 1 文字またはキーの組み合わせ (例: "a", "Ctrl+Shift+S")例:上記の例では、a要素にアクセスキー "h" を割り当てています。ユーザーが "h" キーを押すと、index