HTML 入力 フォームの基本

サマリー: HTMLの入力フォーム要素は、ユーザーからデータを受け取るための重要な要素です。このドキュメントでは、さまざまな入力タイプとその使用方法、属性について詳しく説明します。

<input>要素：入力欄（フォーム入力）

<input>要素は、ユーザーからのデータ入力を受け付けるためのフォームコントロールを作成するHTML要素です。多様な入力タイプと属性の組み合わせにより、様々なフォーム部品を表現できます。

<input>のタイプ

<input>要素の動作はtype属性によって大きく変化します。以下に利用可能なタイプとそれぞれの機能、サンプルコードを示します。

• button: ボタン。デフォルトの動作はなく、value属性の値を表示します。

  <input type="button" value="クリック">

• checkbox: チェックボックス。オン/オフの二値状態を持ちます。

  <input type="checkbox" name="option1" value="value1"> オプション1

• color: カラーピッカー。色を選択できます。

  <input type="color" name="favorite_color">

• date: 日付選択。年、月、日を選択できます。

  <input type="date" name="birth_date">

• datetime-local: ローカル日時選択。タイムゾーン情報を含まない日時を選択できます。

  <input type="datetime-local" name="appointment">

• email: メールアドレス入力欄。メールアドレスの形式を検証できます。

  <input type="email" name="email_address">

• file: ファイル選択。ファイルをアップロードできます。

  <input type="file" name="upload_file">

• hidden: 隠しフィールド。ユーザーには表示されませんが、データはサーバーに送信されます。

  <input type="hidden" name="user_id" value="12345">

• image: 画像ボタン。画像をクリックしてフォームを送信できます。

  <input type="image" src="submit.png" alt="送信">

• month: 月選択。年と月を選択できます。

  <input type="month" name="travel_month">

• number: 数値入力。数値のみ入力できます。

  <input type="number" name="quantity" min="1" max="10">

• password: パスワード入力。入力した文字は隠されます。

  <input type="password" name="password">

• radio: ラジオボタン。同じname属性を持つ複数のラジオボタンから一つだけ選択できます。

  <input type="radio" name="gender" value="male"> 男性
  <input type="radio" name="gender" value="female"> 女性

• range: スライダー。範囲内の値を選択できます。

  <input type="range" name="volume" min="0" max="100">

• reset: リセットボタン。フォームの値をリセットします。（非推奨）

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

• search: 検索入力欄。検索キーワードを入力できます。

  <input type="search" name="search_query">

• submit: 送信ボタン。フォームを送信します。

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

• tel: 電話番号入力欄。電話番号を入力できます。

  <input type="tel" name="phone_number">

• text: テキスト入力欄（デフォルト）。1行のテキストを入力できます。

  <input type="text" name="user_name">

• time: 時間選択。時と分を選択できます。

  <input type="time" name="meeting_time">

• url: URL入力欄。URLを入力できます。

  <input type="url" name="website">

• week: 週選択。年と週番号を選択できます。

  <input type="week" name="delivery_week">

• datetime (非推奨): UTCに基づく日時選択。（非推奨のため使用しないでください）

属性

<input>要素には多数の属性があり、type属性と組み合わせて使用することで、入力欄の挙動や外観を細かく制御できます。

• accept: ファイル選択(type="file")で受け付けるファイルタイプを指定します。例：accept="image/*,video/*"

• alt: 画像ボタン(type="image")の代替テキストを指定します。

• autocapitalize: 入力テキストの自動大文字化を制御します。（off, none, sentences, words, characters）

• autocomplete: ブラウザの自動補完機能を制御します。（on, off、その他コンテキスト固有の値）

• capture: ファイル選択(type="file")でカメラやマイクからの直接入力を指定します。（user, environment）

• checked: チェックボックス(type="checkbox")とラジオボタン(type="radio")の初期状態を指定します。

• dirname: 入力欄のテキスト方向をサーバーに送信します。

• disabled: 入力欄を無効化します。

• form: 入力欄を特定の<form>要素に関連付けます。

• formaction: 送信ボタン(type="submit")と画像ボタン(type="image")の送信先URLを指定します。

• formenctype: 送信ボタンと画像ボタンのデータエンコーディングタイプを指定します。

• formmethod: 送信ボタンと画像ボタンのHTTPメソッドを指定します。（get, post）

• formnovalidate: 送信ボタンと画像ボタンでフォームの検証を無効化します。

• formtarget: 送信ボタンと画像ボタンの結果を表示するウィンドウを指定します。

• height: 画像ボタンの高さを指定します。

• list: <datalist>要素のidを指定し、入力候補を表示します。

• max: 入力可能な最大値を指定します。

• maxlength: 入力可能な最大文字数を指定します。

• min: 入力可能な最小値を指定します。

• minlength: 入力可能な最小文字数を指定します。

• multiple: ファイル選択とメールアドレス入力で複数の値を選択できるようにします。

• name: 入力欄の名前を指定します。サーバーに送信されるデータのキーとなります。

• pattern: 入力値が一致する必要のある正規表現パターンを指定します。

• placeholder: 入力欄に初期値がない場合に表示されるヒントテキストを指定します。

• popovertarget: ボタン(type="button")が制御するポップオーバー要素のidを指定します。

• popovertargetaction: ポップオーバーの表示/非表示を制御します。（show, hide, toggle）

• readonly: 入力欄を読み取り専用にします。

• required: 入力欄を必須項目にします。

• size: 入力欄の表示幅を指定します。

• src: 画像ボタンの画像URLを指定します。

• step: 数値入力のステップ値を指定します。

• type: 入力欄のタイプを指定します。

• value: 入力欄の初期値を指定します。

• width: 画像ボタンの幅を指定します。

非標準属性

• autocorrect (非標準): 自動修正を有効/無効にします。（Safariのみ）

• incremental (非標準): 検索入力(type="search")で、入力中にリアルタイムで検索を実行します。（WebKit、Blink系ブラウザのみ）

• mozactionhint (非推奨、非標準): Enterキーを押した時の動作のヒントを指定します。（Firefoxのみ）

• orient (非標準): スライダー(type="range")の向きを指定します。（Firefoxのみ）

• results (非標準): 検索入力で表示する候補の最大数を指定します。（Safariのみ）

• webkitdirectory (非標準): ディレクトリ選択を有効にします。（WebKit系ブラウザ、Edge、Firefox 50+）

メソッド

HTMLInputElement インターフェースは、<input>要素を操作するための様々なメソッドを提供します。

• checkValidity(): 入力値の有効性をチェックし、無効な場合はinvalidイベントを発生させます。

• reportValidity(): 入力値の有効性をチェックし、無効な場合はエラーメッセージを表示します。

• select(): 入力欄のテキストを選択します。

• setCustomValidity(): カスタム検証メッセージを設定します。

• setRangeText(): 指定範囲のテキストを設定します。

• setSelectionRange(): 指定範囲のテキストを選択します。

• showPicker(): 日付、時刻、色などの選択ピッカーを表示します。

• stepDown(): 数値入力の値をstep属性で指定された値だけ減らします。

• stepUp(): 数値入力の値をstep属性で指定された値だけ増やします。

CSS

<input>要素はCSSでスタイルを設定できます。UI擬似クラス、属性セレクタ、::placeholder擬似要素などが利用可能です。

• UI擬似クラス: :enabled, :disabled, :read-only, :read-write, :placeholder-shown, :default, :checked, :indeterminate, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :blank, :user-invalid

• 属性セレクタ: input[type="password"] など

• ::placeholder擬似要素: プレイスホルダーテキストのスタイルを設定

• appearanceプロパティ: ブラウザのデフォルトスタイルを上書き

• caret-colorプロパティ: キャレット（入力カーソル）の色を設定

• field-sizingプロパティ: 入力欄のサイズ調整方法を制御

• object-position と object-fit プロパティ: 画像ボタンなどで画像の表示位置とサイズを調整

付加機能

• ラベル: <label>要素を使用して入力欄にラベルを付けると、アクセシビリティとユーザビリティが向上します。 for属性とid属性で関連付けます。

  <label for="username">ユーザー名:</label> <input type="text" id="username" name="username">

• クライアントサイド検証: HTMLの属性やJavaScriptを使用して、クライアントサイドで入力値の検証を行うことができます。しかし、サーバーサイド検証も必ず行う必要があります。

• ローカライズ: 数値、日付、時刻などの入力形式は、ユーザーのロケール設定に合わせて調整する必要があります。

アクセシビリティに関する考慮事項

• すべての入力欄に<label>要素でラベルを付ける。

• クリック可能な要素は、十分な大きさにすることで、タッチ操作やマウス操作がしやすいように配慮する。

基本的なフォームの作成【<form>タグ】

<form>タグは、HTML文書内でユーザーがデータを入力できる領域を定義します。このタグで囲まれた部分がフォームとなり、入力されたデータはサーバー側のプログラムに送信されて処理されます。例えば、お問い合わせフォームやアンケートなどがこれにあたります。

<form>タグには、主にaction属性とmethod属性が使用されます。

• action属性: フォームデータの送信先URLを指定します。データ処理を行うサーバーサイドスクリプト（例：PHPファイル）のパスを記述します。

• method属性: フォームデータの送信方法を指定します。"get" または "post" のいずれかを選択します。

  • get: フォームデータがURLの一部として送信されます（example.com/page.php?name=太郎&[email protected] のように）。データがURLに表示されるため、パスワードなどの機密情報の送信には適していません。

  • post: フォームデータがHTTPリクエストのボディ部に含められて送信されます。データがURLに表示されないため、getに比べてセキュリティ面で優れています。

基本的な<form>タグの記述例：

<form action="process.php" method="post">
  <!-- フォームの入力要素をここに記述 -->
</form>

フォームに部品を追加する

2.1 テキストフィールドを作成する【<input>タグ】

<input>タグは、様々な種類の入力フィールドを作成するために使用されます。type属性を"text"に設定することで、1行のテキスト入力フィールドを作成できます。name属性は、送信されるデータの識別に使用されます。

<input type="text" name="username" placeholder="ユーザー名">

2.2 複数行の入力フィールドを作成する【<textarea>タグ】

<textarea>タグは、複数行のテキスト入力フィールドを作成するために使用されます。name属性は<input>タグと同様にデータの識別に使用されます。cols属性とrows属性で、フィールドの幅と高さを指定できます。

<textarea name="message" cols="30" rows="5" placeholder="メッセージを入力してください"></textarea>

2.3 送信ボタンを作成する【<input type="submit">】

<input>タグのtype属性を"submit"に設定することで、送信ボタンを作成できます。value属性でボタンに表示するテキストを指定します。

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

PHPで入力フォームの内容を確認するページを作成する

3.1 PHPとは？

PHPは、サーバーサイドで実行されるスクリプト言語です。HTMLに埋め込むことができ、動的なWebページの作成に広く利用されています。比較的学習しやすい文法も特徴です。

3.2 <form>タグとPHPプログラムの作成

フォームから送信されたデータは、PHPプログラムで処理することができます。以下の例では、contact.phpというファイルでデータを受け取り、表示する処理を行います。

(contact.html)

<form action="contact.php" method="post">
  <input type="text" name="name" placeholder="名前"><br>
  <textarea name="message" cols="30" rows="5" placeholder="メッセージ"></textarea><br>
  <input type="submit" value="送信">
</form>

(contact.php)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>確認ページ</title>
</head>
<body>
  名前: <?php echo $_POST['name']; ?><br>
  メッセージ: <?php echo $_POST['message']; ?><br>
</body>
</html>

3.3 <form>タグ action属性の設定

action属性にPHPファイルのパスを指定することで、フォームデータの送信先を指定します。上記のcontact.htmlの例では、action="contact.php"と設定することで、データがcontact.phpに送信されます。

フォームデータ送信時のセキュリティを考慮する

フォームを介して送信されたデータは、悪意のあるコードを含む可能性があります。このような攻撃からWebサイトを守るためには、セキュリティ対策が不可欠です。

htmlspecialchars()関数は、特殊文字をHTMLエンティティに変換することで、クロスサイトスクリプティング（XSS）などの攻撃を防ぎます。

<?php echo htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8'); ?>

上記のように、htmlspecialchars()関数を使用することで、入力データに含まれる特殊文字を無害化し、安全に表示することができます。

このチュートリアルを通して、HTMLフォームの基本的な作成方法と、PHPによるデータ処理、そしてセキュリティ対策の重要性を理解いただければ幸いです。より複雑なフォームや高度なセキュリティ対策については、さらに学習を進めてみてください。

参考文献

詳しい情報については、以下のリンクを参照してください：

• MDN Web Docs: <input> 要素

Q&A

• Q: HTMLの入力タイプにはどんなものがありますか？
  A: テキスト、パスワード、ラジオボタン、チェックボックスなど、多数の入力タイプがあります。
• Q: フォームのバリデーションはどのように行いますか？
  A: HTML5の属性を使用して、必須項目やパターンを指定することができます。
• Q: 属性の使用例はありますか？
  A: 例えば、<input type="text" name="username" placeholder="ユーザー名を入力"> という書き方があります。