6日でできる 新HTML&CSS入門｜さまざまなフォームタグ
フォームは入力欄を並べるだけではなく、目的に合った部品選びが大切。
select、checkbox、textarea、buttonを使い分けて、入力しやすいフォームを作ろう。
Webフォームは、ユーザーから情報を受け取るための大切な仕組みです。お問い合わせフォーム、イベント申込フォーム、アンケート、会員登録フォームなど、Webサイトではさまざまな場面でフォームが使われます。
フォームというと、まず思い浮かべるのは名前やメールアドレスを入力するテキストボックスかもしれません。しかし、実際のフォームでは、テキスト入力欄だけでは足りないことがよくあります。
たとえば、複数の選択肢から1つだけ選んでもらいたい場合はラジオボタン、いくつでも選んでよい場合はチェックボックス、決められた選択肢から選ばせたい場合はセレクトボックス、長い文章を入力してもらいたい場合はテキストエリアが便利です。また、送信やリセットなどの操作にはbuttonを使うこともできます。
このように、フォームには目的に応じて使い分けるさまざまなタグがあります。適切なフォーム部品を選ぶことで、ユーザーが迷わず入力でき、送信されるデータも整理しやすくなります。
この記事では、select、option、checkbox、textarea、buttonなど、フォームでよく使うタグや属性を、イベント参加申込フォームのサンプルを使って分かりやすく解説していきます。
フォーム部品は入力内容に合わせて選ぶ
フォームを作るときは、まず「ユーザーにどのような情報を入力してほしいのか」を考えます。自由に文字を入力してもらうのか、選択肢から選んでもらうのか、複数選択を許可するのかによって、使うタグは変わります。
| 入力してほしい内容 | 向いているフォーム部品 | 例 |
|---|---|---|
| 名前や年齢など短い文字 | input type="text" | 氏名、年齢、会社名 |
| 複数から1つだけ選択 | input type="radio" | 参加日、支払い方法 |
| 決められた項目から選択 | select、option | 希望プラン、都道府県 |
| 複数選択 | input type="checkbox" | 興味のある項目、参加希望イベント |
| 長い文章 | textarea | 要望、質問、備考 |
| 操作ボタン | button | 送信、リセット、確認 |
すべてをテキスト入力欄にしてしまうと、ユーザーは何をどのように入力すればよいか迷いやすくなります。また、入力内容の表記ゆれも起こりやすくなります。選択肢で答えられる内容は、ラジオボタン、チェックボックス、セレクトボックスを使うと、入力しやすく管理もしやすくなります。
図1：フォーム部品は入力内容に合わせて選ぶ
この図から分かること
フォーム部品は、入力してほしい内容に合わせて選ぶことが大切です。短い文字入力にはinput type="text"、1つだけ選ぶ項目にはradio、複数選べる項目にはcheckbox、決められた選択肢にはselect、長い文章にはtextareaを使います。目的に合ったタグを使うことで、ユーザーが入力しやすいフォームになります。
イベント参加申込フォームのサンプル
ここでは、イベント参加申込フォームを例にして、さまざまなフォームタグを組み合わせます。氏名、年齢、参加日、希望プラン、参加希望イベント、ご要望、送信ボタン、リセットボタンを持つフォームです。
ファイル名： lesson43_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セミナー参加申込フォーム</title>
<style>
body {
font-family: sans-serif;
padding: 30px;
background-color: #f4f8fb;
}
h1 {
text-align: center;
}
form {
width: 400px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
border: 1px solid #d9e3ea;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
textarea,
select {
width: 100%;
padding: 7px;
box-sizing: border-box;
font-size: 1em;
border: 1px solid #b0bec5;
border-radius: 4px;
}
.radio-group label,
.checkbox-group label {
display: inline-block;
margin-right: 12px;
font-weight: normal;
}
textarea {
min-height: 90px;
resize: vertical;
}
button {
padding: 8px 22px;
border: none;
border-radius: 4px;
background-color: #489bcf;
color: #ffffff;
margin-right: 8px;
cursor: pointer;
font-size: 1em;
}
button:hover {
background-color: #2f7fac;
}
button[type="reset"] {
background-color: #999999;
}
button[type="reset"]:hover {
background-color: #777777;
}
</style>
</head>
<body>
<h1>セミナー参加申込フォーム</h1>
<form method="GET" action="seminar-entry.html">
<div class="form-group">
<label for="full-name">氏名</label>
<input type="text" id="full-name" name="full-name" placeholder="例：山田太郎">
</div>
<div class="form-group">
<label for="user-age">年齢</label>
<input type="text" id="user-age" name="user-age" placeholder="例：32">
</div>
<div class="form-group radio-group">
<label>参加希望日</label>
<label><input type="radio" name="join-date" value="1日目" checked>1日目</label>
<label><input type="radio" name="join-date" value="2日目">2日目</label>
<label><input type="radio" name="join-date" value="両日">両日</label>
</div>
<div class="form-group">
<label for="ticket-type">参加区分</label>
<select name="ticket-type" id="ticket-type">
<option value="一般">一般</option>
<option value="学生">学生</option>
<option value="法人">法人</option>
<option value="招待" selected>招待</option>
</select>
</div>
<div class="form-group checkbox-group">
<label>興味のある内容（複数選択可）</label>
<label><input type="checkbox" name="interest" value="HTML基礎">HTML基礎</label>
<label><input type="checkbox" name="interest" value="CSSレイアウト">CSSレイアウト</label>
<label><input type="checkbox" name="interest" value="レスポンシブ対応">レスポンシブ対応</label>
<label><input type="checkbox" name="interest" value="フォーム制作">フォーム制作</label>
</div>
<div class="form-group">
<label for="request">ご要望・ご質問</label>
<textarea name="request" id="request" rows="4" placeholder="事前に確認したいことがあればご記入ください"></textarea>
</div>
<button type="submit">送信する</button>
<button type="reset">入力をリセット</button>
</form>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、中央にセミナー参加申込フォームが表示されます。フォームには、氏名と年齢のテキスト入力欄、参加希望日のラジオボタン、参加区分を選ぶセレクトボックス、興味のある内容を複数選べるチェックボックス、ご要望や質問を書けるテキストエリア、送信ボタンとリセットボタンが並びます。
送信するボタンは青系、入力をリセットボタンはグレー系で表示されます。ボタンにマウスを乗せると背景色が少し濃くなり、操作できることが分かりやすくなります。
サンプルHTMLで使っているフォーム部品
このサンプルでは、複数のフォーム部品を組み合わせています。それぞれの役割を整理してみましょう。
| フォーム部品 | サンプル内の項目 | 役割 |
|---|---|---|
| input type="text" | 氏名、年齢 | 1行の文字を入力する |
| input type="radio" | 参加希望日 | 複数の選択肢から1つだけ選ぶ |
| select、option | 参加区分 | プルダウンから1つ選ぶ |
| input type="checkbox" | 興味のある内容 | 複数の項目を選べる |
| textarea | ご要望・ご質問 | 複数行の文章を入力する |
| button type="submit" | 送信する | フォームの内容を送信する |
| button type="reset" | 入力をリセット | 入力内容を初期状態に戻す |
フォームは、入力内容に合った部品を選ぶことで、使いやすくなります。たとえば、参加希望日のように1つだけ選んでほしい項目にはradioが向いています。一方、興味のある内容のように複数選べる項目にはcheckboxが向いています。
selectとoptionでプルダウンメニューを作る
selectは、プルダウンメニューを作るためのタグです。ユーザーに決められた選択肢の中から1つを選んでもらいたいときに使います。
selectの中には、選択肢としてoptionを書きます。
<select name="ticket-type" id="ticket-type">
<option value="一般">一般</option>
<option value="学生">学生</option>
<option value="法人">法人</option>
<option value="招待" selected>招待</option>
</select>この例では、一般、学生、法人、招待の中から1つを選べます。selected属性を付けたoptionは、最初から選択された状態になります。
| タグ・属性 | 役割 |
|---|---|
| select | プルダウンメニュー全体を作る |
| option | 選択肢を作る |
| name | 送信時のデータ名を指定する |
| value | 選択されたときに送信される値を指定する |
| selected | 最初から選択された状態にする |
selectは、選択肢が多い場合に便利です。ラジオボタンで多くの項目を並べるとフォームが長くなりますが、selectならコンパクトに表示できます。
図2：selectとoptionで選択肢をコンパクトに表示する
この図から分かること
selectとoptionを使うと、複数の選択肢をプルダウンメニューとして表示できます。選択肢が多い場合でも画面を広く使わずに済むため、フォームをすっきり見せられます。selected属性を使うと、初期状態で選ばれている項目を指定できます。
checkboxは複数選択に使う
checkboxは、複数の選択肢からいくつでも選べる入力部品です。興味のある項目、参加希望イベント、利用したいサービス、同意項目などでよく使われます。
<label><input type="checkbox" name="interest" value="HTML基礎">HTML基礎</label>
<label><input type="checkbox" name="interest" value="CSSレイアウト">CSSレイアウト</label>
<label><input type="checkbox" name="interest" value="レスポンシブ対応">レスポンシブ対応</label>checkboxでは、同じnameを複数の選択肢に付けることがあります。これにより、interestという同じ項目の中で、どの値が選ばれたのかを送信できます。
| 属性 | 役割 |
|---|---|
| type="checkbox" | チェックボックスを作る |
| name | 送信時のデータ名を指定する |
| value | そのチェックボックスが選ばれたときの値 |
| checked | 最初から選択済みにする |
checkboxは、ユーザーが複数選べることを分かりやすく示すことが大切です。フォーム内のラベルに「複数選択可」と書いておくと、ユーザーが迷いにくくなります。
radioとcheckboxの違い
radioとcheckboxは、どちらも選択肢を作るためのinputですが、使い方が異なります。
| 種類 | 選べる数 | 向いている場面 |
|---|---|---|
| radio | 1つだけ | 参加日、性別、支払い方法、希望連絡方法 |
| checkbox | 複数選択できる | 興味のある項目、参加希望イベント、同意確認 |
radioは、同じnameを持つグループの中から1つだけ選べます。参加希望日のように、1日目、2日目、両日のどれか1つを選んでもらいたい場合に向いています。
checkboxは、複数の項目を同時に選べます。興味のある内容のように、複数の回答が自然な項目に向いています。
textareaは長い文章の入力に使う
textareaは、複数行の文章を入力するためのタグです。ご要望、ご質問、備考、感想、お問い合わせ内容など、長めの文章を入力してもらう場合に使います。
<textarea name="request" id="request" rows="4"
placeholder="事前に確認したいことがあればご記入ください"></textarea>textareaには、rows属性で表示する行数を指定できます。placeholderを指定すると、未入力のときに案内文を表示できます。
| 属性 | 役割 |
|---|---|
| name | 送信時のデータ名を指定する |
| id | labelのfor属性と対応させる |
| rows | 表示する行数の目安を指定する |
| placeholder | 入力例や案内文を表示する |
textareaは、input type="text"よりも長い文章に向いています。ユーザーが自由に書ける欄なので、入力しやすい高さや余白を確保すると使いやすくなります。
buttonは用途に合わせてtypeを指定する
buttonは、フォーム内で操作ボタンを作るためのタグです。buttonにはtype属性を指定して、どのような動きをするボタンなのかを明確にします。
<button type="submit">送信する</button>
<button type="reset">入力をリセット</button>| typeの値 | 役割 |
|---|---|
| submit | フォームを送信する |
| reset | 入力内容を初期状態に戻す |
| button | JavaScriptなどで動きを付けるための通常ボタン |
送信ボタンにはtype="submit"、入力をリセットするボタンにはtype="reset"を使います。buttonは、input type="submit"よりも中に文字やアイコンを入れやすく、デザインを調整しやすい特徴があります。
ただし、フォーム内のbuttonは、typeを省略するとsubmitとして扱われることがあります。意図しない送信を防ぐためにも、buttonにはtypeを明示しておくと安心です。
図3：checkbox、textarea、buttonで入力の幅を広げる
この図から分かること
checkboxは複数選択、textareaは長文入力、buttonは送信やリセットなどの操作に使います。フォームタグを目的に合わせて選ぶことで、ユーザーが入力しやすく、管理しやすいフォームになります。入力内容の種類に合った部品を使うことが大切です。
nameとvalueは送信データを整理するために重要
フォームでは、見た目だけでなく、送信されるデータの形も考える必要があります。input、select、textareaにはname属性を付けます。nameは、送信時のデータ名として使われます。
たとえば、次のチェックボックスが選ばれた場合を考えます。
<input type="checkbox" name="interest" value="フォーム制作">この項目が選ばれて送信されると、interest=フォーム制作のような形でデータが扱われます。
selectの場合も同じです。
<select name="ticket-type" id="ticket-type">
<option value="学生">学生</option>
</select>学生が選ばれている場合、ticket-type=学生のように送信されます。
| 属性 | 役割 |
|---|---|
| name | データの名前を決める |
| value | 選択されたときに送信される値を決める |
フォーム部品を作るときは、ユーザーに見える文字だけでなく、送信される値も確認しましょう。特にradio、checkbox、optionではvalueが重要です。
placeholderは入力前の案内に使う
placeholderは、入力欄が空のときに表示される案内テキストです。氏名の入力例や、質問欄の説明などに使えます。
<input type="text" id="full-name" name="full-name" placeholder="例：山田太郎">placeholderを使うと、ユーザーはどのように入力すればよいかイメージしやすくなります。ただし、placeholderは入力を始めると消えるため、項目名の代わりに使うのはおすすめしません。項目名はlabelで表示し、placeholderは補助的な入力例として使うと分かりやすくなります。
checkedとselectedで初期状態を指定する
radioやcheckboxではchecked、selectのoptionではselectedを使うと、最初から選択された状態にできます。
<input type="radio" name="join-date" value="1日目" checked>
<option value="招待" selected>招待</option>| 属性 | 対象 | 役割 |
|---|---|---|
| checked | radio、checkbox | 初期状態で選択済みにする |
| selected | option | 初期状態で選択済みにする |
初期選択を設定しておくと、よく選ばれる項目をあらかじめ選んでおけます。ただし、ユーザーに明確に選んでもらいたい項目では、初期選択を付けないほうがよい場合もあります。フォームの目的に合わせて使い分けましょう。
CSSでフォームを入力しやすく整える
フォームはHTMLだけでも作れますが、CSSで余白や幅を整えると、かなり入力しやすくなります。
このサンプルでは、formにwidth、margin、background-color、padding、border-radiusを指定して、中央にカードのようなフォームを作っています。
form {
width: 400px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
}また、input、textarea、selectにはwidth: 100%;とbox-sizing: border-box;を指定しています。
input[type="text"],
textarea,
select {
width: 100%;
padding: 7px;
box-sizing: border-box;
}box-sizing: border-box;を使うと、paddingやborderを含めて幅を計算できます。そのため、入力欄がformの幅からはみ出しにくくなります。
| CSS | 役割 |
|---|---|
| width | フォームや入力欄の幅を指定する |
| margin | 外側の余白や中央寄せを指定する |
| padding | 内側の余白を作る |
| border-radius | 角を丸くする |
| box-sizing | 幅の計算方法を調整する |
| display | labelや選択肢の並び方を調整する |
フォームは、項目同士の間隔が詰まりすぎると入力しづらくなります。.form-groupのようなclassで項目ごとに余白を付けると、見た目も分かりやすくなります。
使用したタグと主な属性の一覧
今回のフォームで登場したタグと属性を整理しておきます。
| タグ・属性 | 説明・使い方 |
|---|---|
| input type="text" | 1行のテキスト入力欄を作る。氏名や年齢などに使う |
| input type="radio" | 複数の選択肢から1つだけ選ばせる |
| input type="checkbox" | 複数の選択肢から好きなものを選ばせる |
| select | プルダウンメニュー全体を作る |
| option | select内の選択肢を作る |
| textarea | 複数行の文章入力欄を作る |
| button | 送信やリセットなどのボタンを作る |
| name | 送信時に値を識別するための名前 |
| value | 送信される値やボタンの値 |
| placeholder | 未入力時の案内テキスト |
| checked | radioやcheckboxを初期選択にする |
| selected | optionを初期選択にする |
| rows | textareaの表示行数を指定する |
| type="submit" | フォーム送信用のボタンにする |
| type="reset" | 入力内容を初期状態に戻すボタンにする |
フォームでは、タグと属性を組み合わせて入力部品を作ります。特にname、value、checked、selectedは、送信データや初期状態に関係するため、見た目だけでなく動作にも影響します。
フォーム部品を選ぶときの考え方
フォームを作るときは、入力内容ごとに最適な部品を選ぶことが大切です。
| 考え方 | 選ぶ部品 |
|---|---|
| 自由に短い文字を入力してほしい | input type="text" |
| 必ず1つだけ選んでほしい | input type="radio" |
| 複数選べるようにしたい | input type="checkbox" |
| 選択肢をコンパクトに見せたい | select、option |
| 長い文章を書いてほしい | textarea |
| 送信やリセットの操作をさせたい | button |
入力項目が多いフォームでは、すべてを一度に見せると複雑に感じられることがあります。選択肢をselectにまとめたり、関連するチェックボックスをグループ化したりすると、フォーム全体が見やすくなります。
また、labelを使って各入力欄の意味を示し、placeholderで入力例を補足すると、ユーザーが迷いにくくなります。フォームは機能だけでなく、入力しやすさも重要です。
実際にフォームを作るときの確認ポイント
フォームが完成したら、見た目だけでなく入力と送信の流れも確認しましょう。
| 確認すること | チェック内容 |
|---|---|
| 入力欄の意味が分かるか | labelが適切に付いているか |
| 入力例が分かりやすいか | placeholderが補助になっているか |
| 1つだけ選ぶ項目か | radioが適切か |
| 複数選ぶ項目か | checkboxが適切か |
| 選択肢が多すぎないか | selectにまとめるべきか |
| nameが付いているか | 送信データとして扱えるか |
| valueが分かりやすいか | 選択時の値が適切か |
| ボタンの役割が明確か | submitとresetを使い分けているか |
フォームは、ユーザーが直接操作する部分です。見た目が整っていても、選択肢が分かりづらかったり、入力欄の意味が伝わらなかったりすると、使いにくいフォームになります。タグの意味と入力体験の両方を意識して作ることが大切です。
さまざまなフォームタグを使えると入力画面の幅が広がる
フォームでは、テキスト入力欄だけでなく、select、option、checkbox、textarea、buttonなどを組み合わせることで、より使いやすい入力画面を作れます。
決められた選択肢から選ばせたい場合はselect、複数選択を許可したい場合はcheckbox、長い文章を入力してもらいたい場合はtextarea、送信やリセットなどの操作にはbuttonを使います。それぞれのタグには得意な役割があるため、入力内容に合わせて選ぶことが大切です。
また、nameやvalueを正しく指定すると、送信データを整理しやすくなります。checkedやselectedを使えば、初期状態で選ばれている項目を設定できます。placeholderやlabelを組み合わせると、ユーザーが入力しやすいフォームになります。
さまざまなフォームタグを理解しておくと、イベント申込フォーム、アンケート、予約フォーム、資料請求フォームなど、多くの入力画面に応用できます。まずはシンプルなフォームを作り、タグごとの動きや送信データの形を確認しながら練習していきましょう。