html 入力フォーム 一覧

HTML 入力フォーム 一覧とその説明

概要

この記事では、さまざまな種類のHTML入力フォームについて説明し、それぞれの用途や使用例を示します。HTMLフォームは、ユーザーからのデータ収集を容易にするための重要な要素であり、ウェブアプリケーションやサイトの機能向上に寄与します。

1. 悩み

HTMLを使っていて、「フォームを作りたいけど、どんな部品が使えるんだっけ？」「種類が多すぎて、どれを使えばいいか分からない…」と悩んでいませんか？

この記事では、HTMLのフォームでよく使われる部品を、具体的なコード例とともに分かりやすくまとめました。それぞれの部品の役割や使い方を理解して、使いやすいフォームを作成できるようにしましょう。

2. form部品まとめ

2.1 input

<input>要素は、type属性によって様々な種類の入力フィールドを作成することができます。

2.1.1 text：1行テキスト入力

ユーザーに1行のテキストを入力してもらう際に使用します。例えば、氏名、住所、メールアドレスなどの入力に適しています。

コード例:
<input type="text" name="name" placeholder="氏名を入力">

表示例:

2.1.2 checkbox：複数選択

複数の選択肢から、ユーザーが自由に選択できるようにする場合に使用します。例えば、趣味、興味のある分野などの選択に適しています。

コード例:

<label>
  <input type="checkbox" name="hobby" value="読書"> 読書
</label>
<label>
  <input type="checkbox" name="hobby" value="音楽鑑賞"> 音楽鑑賞
</label>
<label>
  <input type="checkbox" name="hobby" value="スポーツ"> スポーツ
</label>

表示例:

2.1.3 radio：単一選択

複数の選択肢から、ユーザーが1つだけ選択できるようにする場合に使用します。例えば、性別、年齢層などの選択に適しています。

コード例:

<label>
  <input type="radio" name="gender" value="男性"> 男性
</label>
<label>
  <input type="radio" name="gender" value="女性"> 女性
</label>

表示例:

2.1.4 submit：送信ボタン

フォームに入力した内容を送信する際に使用します。クリックすると、form要素のaction属性で指定されたURLに、フォームデータが送信されます。

コード例:
<input type="submit" value="送信">

表示例:

2.1.5 image：画像送信ボタン

送信ボタンを画像で表示したい場合に使用します。

コード例:
<input type="image" src="submit.png" alt="送信">

表示例:

2.1.6 button：ボタン

ボタンを作成します。JavaScriptと組み合わせて、様々な処理を実行することができます。

コード例:
<button type="button" onclick="alert('クリックされました')">クリック</button>

表示例:

2.1.7 reset：リセットボタン

フォームに入力した内容をリセットする場合に使用します。

コード例:
<input type="reset" value="リセット">

表示例:

2.1.8 hidden：隠しフィールド

ユーザーには見えない形で、データを送信する際に使用します。例えば、データベースのIDなど、ユーザーに直接入力してもらう必要のない情報を送信する際に便利です。

コード例:
<input type="hidden" name="id" value="12345">

2.1.9 search：検索フィールド

キーワードを入力して検索する際に使用します。

コード例:
<input type="search" name="keyword" placeholder="キーワードを入力">

表示例:

2.1.10 tel：電話番号入力フィールド

電話番号を入力する際に使用します。モバイルブラウザでは、電話番号の入力に最適化されたキーボードが表示される場合があります。

コード例:
<input type="tel" name="tel" placeholder="電話番号を入力">

表示例:

2.1.11 email：メールアドレス入力フィールド

メールアドレスを入力する際に使用します。入力された値がメールアドレスの形式かどうか、自動的にチェックされます。

コード例:
<input type="email" name="email" placeholder="メールアドレスを入力">

表示例:

2.1.12 password：パスワード入力フィールド

パスワードを入力する際に使用します。入力した文字は、* などの記号で隠されます。

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

表示例:

2.1.13 datetime：日付と時刻入力フィールド (UTC)

日付と時刻をUTC（協定世界時）で入力する際に使用します。

コード例:
<input type="datetime" name="datetime">

表示例:

2.1.14 date：日付入力フィールド

日付を入力する際に使用します。

コード例:
<input type="date" name="date">

表示例:

2.1.15 month：月入力フィールド

月を入力する際に使用します。

コード例:
<input type="month" name="month">

表示例:

2.1.16 week：週入力フィールド

週を入力する際に使用します。

コード例:
<input type="week" name="week">

表示例:

2.1.17 time：時刻入力フィールド

時刻を入力する際に使用します。

コード例:
<input type="time" name="time">

表示例:

2.1.18 datetime-local：日付と時刻入力フィールド (ローカル)

日付と時刻をローカルタイムで入力する際に使用します。

コード例:
<input type="datetime-local" name="datetime-local">

表示例:

2.1.19 number：数値入力フィールド

数値を入力する際に使用します。入力可能な値の範囲を指定することもできます。

コード例:
<input type="number" name="number" min="1" max="10">

表示例:

2.1.20 range：レンジ入力フィールド

スライダーを使って、値の範囲を指定する際に使用します。

コード例:
<input type="range" name="range" min="0" max="100">

表示例:

2.1.21 color：色選択フィールド

色を選択する際に使用します。

コード例:
<input type="color" name="color">

表示例:

2.2 textarea：複数行テキスト入力

ユーザーに複数行のテキストを入力してもらう際に使用します。例えば、お問い合わせ内容、コメントなどの入力に適しています。

コード例:
<textarea name="message" rows="5" cols="40"></textarea>

表示例:

2.3 select (option)：ドロップダウンリスト

複数の選択肢から、ユーザーに1つを選んでもらう際に使用します。選択肢が多い場合に、ラジオボタンよりもすっきりとした表示になります。

コード例:

<select name="prefecture">
  <option value="">選択してください</option>
  <option value="tokyo">東京都</option>
  <option value="kanagawa">神奈川県</option>
  <option value="chiba">千葉県</option>
</select>

表示例:

2.4 button：ボタン

<input type="submit"> や <input type="reset"> と同じようにボタンを作成できますが、JavaScriptと組み合わせてより柔軟な処理を実装することができます。

コード例:
<button type="button" onclick="alert('クリックされました')">クリック</button>

表示例:

3. まとめ

この記事では、HTMLのフォームで利用できる様々な部品を紹介しました。それぞれの部品の特徴を理解し、適切に使い分けることで、ユーザーにとって使いやすく、分かりやすいフォームを作成することができます。

また、今回紹介したフォーム部品は、HTMLの属性とJavaScriptを組み合わせることで、より高度な機能を実装することも可能です。

基本的な入力フォーム要素

基本的な入力フォーム要素には、テキストボックス、パスワードフィールド、ラジオボタンなどがあります。これらの要素について詳しく解説します。

要素 説明 使用例
テキストボックス ユーザーが簡単なテキストを入力するためのフィールド。 <input type="text" name="username">
パスワードフィールド セキュリティのため、ユーザーのパスワードを隠して入力させるフィールド。 <input type="password" name="password">
ラジオボタン ユーザーが複数の選択肢の中から1つを選ぶためのボタン。 <input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

高度な入力フォーム要素

高度な入力フォーム要素として、チェックボックス、選択リスト、ファイルアップロードなどがあります。これらの要素は、より複雑なデータ収集を可能にします。

要素 説明 使用例
チェックボックス 複数の選択肢から1つまたは複数を選択可能。 <input type="checkbox" name="interests" value="sports"> スポーツ
<input type="checkbox" name="interests" value="music"> 音楽
選択リスト 複数の選択肢の中から1つを選ぶドロップダウンリスト。 <select name="country">
<option value="japan">日本</option>
<option value="usa">アメリカ</option>
</select>
ファイルアップロード ユーザーがファイルをアップロードできるようにするフィールド。 <input type="file" name="upload">

フォームのスタイリングとバリデーション

入力フォームのデザインにはCSSを使用し、JavaScriptでバリデーションを行うことができます。ユーザーにとって魅力的で使いやすいフォームを作成するための方法を解説します。

例えば、簡単なバリデーションは以下のように実装できます。

<script>
function validateForm() {
    var x = document.forms["myForm"]["username"].value;
    if (x == "") {
        alert("名前は必須です");
        return false;
    }
}
</script>

このように、ユーザーが入力したデータが有効であるかを確認し、必要に応じて警告を表示することができます。

詳細なスタイリングの方法については、以下のリンクを参照してください。

MDN Web Docs: CSS

QA

Q1: HTMLフォームにはどのような要素が含まれますか？

A1: テキストボックス、パスワードフィールド、ラジオボタン、チェックボックス、選択リスト、ファイルアップロードなどがあります。

Q2: CSSでフォームをスタイリングするメリットは？

A2: ユーザー体験を向上させ、美しいインターフェースを提供することができます。

Q3: JavaScriptによるバリデーションはなぜ重要ですか？

A3: ユーザーからの入力を事前に確認し、正しいデータのみを送信することで、エラーを減少させることができます。

その他の参考記事:html 入力 フォーム