タグ辞典③ フォーム関連のタグ

HTMLとCSSの基本
2024.11.14

フォーム関連タグ

HTMLフォームには、ユーザーからデータを入力して送信するためのさまざまなタグが用意されています。以下は、フォームに関連する主要なタグと、特に重要な <input> タグの各タイプの詳細です。

 

<form>

  • 概要: フォーム全体を囲むコンテナ。ユーザーからのデータを送信するための開始と終了を示すタグです。
  • 主な属性:
    • action: フォームが送信されるURLを指定します。
    • method: フォーム送信の方法を指定します（GET または POST）。
    • enctype: フォームデータのエンコーディングタイプを指定します（ファイルを送信する場合は multipart/form-data が必要）。

サンプルコード

<form action="/submit" method="post">
<!-- フォーム要素 -->
</form>

 

<input>

<input> タグは、ユーザーがデータを入力するためのインターフェースを提供します。type 属性によってさまざまな入力方法があり、それぞれ異なる機能を持ちます。

<input> の主な type 属性

text: 一行のテキスト入力
  • 概要: ユーザーが自由にテキストを入力できます。
  • 使用例: 名前、住所などの一行テキスト入力に適しています。
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">
password: パスワード入力
  • 概要: テキストが非表示で入力されます（通常、●や＊で隠されます）。
  • 使用例: パスワード入力欄
<label for="password">パスワード:</label>
<input type="password" id="password" name="password">
email: メールアドレス入力
  • 概要: メールアドレス形式の入力が求められます（@ や . を含む形式を要求）。
  • 使用例: ユーザーのメールアドレス入力欄
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
number: 数値入力
  • 概要: 数値を入力でき、min と max で範囲制限、step で増減幅を指定できます。
  • 使用例: 年齢、数量などの数値入力欄
<label for="age">年齢:</label>
<input type="number" id="age" name="age" min="1" max="100">
tel: 電話番号入力
  • 概要: 電話番号形式の入力が求められますが、形式チェックはブラウザ依存です。
  • 使用例: ユーザーの電話番号入力欄
<label for="phone">電話番号:</label>
<input type="tel" id="phone" name="phone">
url: URL入力
  • 概要: URL形式（http:// や https://）の入力を求めます。
  • 使用例: ユーザーのウェブサイトURL入力欄
<label for="website">ウェブサイト:</label>
<input type="url" id="website" name="website">
date: 日付入力
  • 概要: カレンダーから日付を選択する入力欄です。
  • 使用例: 生年月日やイベント日付の入力欄
<label for="birthdate">生年月日:</label>
<input type="date" id="birthdate" name="birthdate">
time: 時間入力
  • 概要: 時間を入力するための欄です。
  • 使用例: イベントの開始時刻など
<label for="starttime">開始時間:</label>
<input type="time" id="starttime" name="starttime">
color: カラー入力
  • 概要: カラーピッカーから色を選択します。
  • 使用例: テーマカラーや背景色の設定
<label for="favcolor">お気に入りの色:</label>
<input type="color" id="favcolor" name="favcolor">
checkbox: チェックボックス
  • 概要: 複数のオプションを選択するためのチェックボックスです。
  • 使用例: 利用規約への同意、複数項目の選択肢
<label><input type="checkbox" name="newsletter">ニュースレターを受け取る</label>
radio: ラジオボタン
  • 概要: 複数のオプションから1つだけを選択するためのボタンです。name 属性が同じグループにします。
  • 使用例: 性別や選択肢の中から一つを選ぶ場合など
<label><input type="radio" name="gender" value="male">男性</label>
<label><input type="radio" name="gender" value="female">女性</label>
submit: 送信ボタン
  • 概要: フォームを送信するためのボタンです。
  • 使用例: フォーム送信ボタン
<input type="submit" value="送信">
reset: リセットボタン
  • 概要: フォームの内容をリセット（初期化）するボタンです。
  • 使用例: 入力を元に戻したい場合
<input type="reset" value="リセット">

<textarea>

  • 概要: 複数行のテキスト入力欄を作成します。コメントや説明など、長いテキストの入力に適しています。
  • 主な属性: rows, cols, placeholder
<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

<select> と <option>

  • 概要: ドロップダウンメニューを作成し、複数の選択肢から一つまたは複数を選択できます。
  • 主な属性: <select> タグには multiple 属性で複数選択を許可できます。
<label for="country">国を選択:</label>
<select id="country" name="country">
<option value="japan">日本</option>
<option value="usa">アメリカ</option>
<option value="uk">イギリス</option>
</select>

<button>

  • 概要: ボタンを作成します。type 属性で submit, reset, button などのボタンの役割を指定できます。
<button type="submit">送信</button>
<button type="button" onclick="alert('Hello!')">クリック</button>

<label>

  • 概要: フォームの入力フィールドにラベルを関連付けます。for 属性で入力フィールドの id を指定し、アクセスしやすくします。
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">

まとめ

HTMLフォームタグを適切に使い分けることで、使いやすいインターフェースが提供でき、ユーザーから正確なデータを取得しやすくなります。

理解したらこちらの課題にチャレンジ！

フォームを作ろう（HTMLのみ）
概要 必要なファイルを新規作成し、画像のようなフォームを作成しましょう。 目的 フォームタグの使い方を学習する。 ※データはありません。index.html style.cssなどを新規作成してください。 目標 デモ 使用ソフト Visua...
photogentle.com
2024.10.18

 

タイトルとURLをコピーしました