6日でできる 新HTML入門｜ユーザー入力フォームの基本
入力欄、選択肢、ボタンを組み合わせて、ユーザーの声を受け取る。HTMLフォームの基本を学び、アンケートやお問い合わせ画面を作ろう。
Webページは、情報を表示するだけでなく、ユーザーから情報を受け取ることもできます。たとえば、お問い合わせフォーム、アンケート、ログイン画面、注文フォーム、検索ボックスなどは、すべてユーザーが何かを入力したり選択したりするための仕組みです。
このような入力画面を作るときに使うのが、HTMLのフォーム要素です。フォームでは、文字を入力するテキストボックス、長い文章を書けるテキストエリア、複数選択できるチェックボックス、1つだけ選ぶラジオボタン、選択肢から選ぶセレクトメニュー、送信やクリアを行うボタンなどを組み合わせます。
入力欄を作るだけならinputタグやtextareaタグだけでも表示できますが、実際にはlabelタグで入力欄の説明を付けたり、formタグで入力要素全体をまとめたりすることが大切です。特にlabelタグを使うと、文字をクリックして入力欄を選択できるようになり、操作しやすいフォームになります。
また、formタグにはaction属性やmethod属性を指定できます。actionは送信先、methodは送信方法を表します。ただし、HTMLだけでは送信後の処理はできません。送信されたデータを保存したり、メール送信したり、データベースに登録したりするには、PHPやCGIなどのサーバー側プログラムが必要です。
ここでは、フォームの基本的な考え方から、labelタグ、テキスト入力、チェックボックス、ラジオボタン、セレクトメニュー、ボタン、formタグまで、サンプルHTMLを使いながら順番に学習していきます。
フォームとは何か
フォームとは、ユーザーから情報を入力してもらうための入力画面です。Webサイトでは、問い合わせ内容を送る、アンケートに回答する、商品を選択する、会員情報を入力するなど、さまざまな場面でフォームが使われます。
フォームは、1つのタグだけで完成するものではありません。入力欄、選択肢、ラベル、ボタンなどを組み合わせて作ります。
フォームで使う主な要素
| 要素 | タグや属性 | 用途 |
|---|---|---|
| ラベル | label | 入力欄や選択肢の説明文を関連付ける |
| テキスト入力 | input type="text" | 1行の文字入力欄を作る |
| メール入力 | input type="email" | メールアドレス入力欄を作る |
| テキストエリア | textarea | 複数行の文章入力欄を作る |
| チェックボックス | input type="checkbox" | 複数選択できる項目を作る |
| ラジオボタン | input type="radio" | 複数の中から1つだけ選ぶ項目を作る |
| セレクトメニュー | select、option | ドロップダウン形式の選択肢を作る |
| ボタン | input、button | 送信、リセット、任意の操作を行う |
| フォーム領域 | form | 入力要素をまとめ、送信先や送信方式を指定する |
フォームでは、入力欄を作るだけでなく、ユーザーが迷わず操作できるように説明文や配置も整えることが大切です。何を入力すればよいのか、どの項目が選択肢なのか、どのボタンで送信するのかが分かりやすいフォームを目指します。
図1：フォームは入力欄・ラベル・ボタンの組み合わせで作る
この図から分かること
フォームは、入力欄、説明文、選択肢、ボタンを組み合わせて作ります。labelで入力欄の説明を付け、inputやtextareaで入力欄を作り、selectで選択メニューを作ります。formタグで全体をまとめることで、送信先や送信方式を指定できるようになります。
labelタグで入力欄と説明文をつなげる
フォームでは、入力欄の前に「お名前」「メールアドレス」「お問い合わせ内容」のような説明文を置くことがよくあります。この説明文を入力欄と関連付けるために使うのがlabelタグです。
labelタグを使うと、説明文をクリックしたときにも対応する入力欄を選択できます。小さなチェックボックスやラジオボタンでも、文字部分をクリックして選べるようになるため、フォームが使いやすくなります。
labelタグの使い方には、主に2つの方法があります。1つは、labelタグの中に入力欄を入れる方法です。
<label>
お名前：<input type="text" name="username">
</label>この書き方では、labelの中にinputが入っているため、説明文と入力欄が自然に関連付けられます。
labelタグでテキスト入力欄を囲む
次の例では、お名前を入力するテキストボックスをlabelタグで囲みます。
ファイル名： Lesson30-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラベルの例</title>
<style>
body {
font-family: sans-serif;
line-height: 1.7;
}
label {
font-weight: bold;
}
input {
padding: 6px;
margin-left: 6px;
}
</style>
</head>
<body>
<p>
<label>
お名前：<input type="text" name="customerName" size="20">
</label>
</p>
</body>
</html>この図から分かること
このHTMLでは、labelタグの中に「お名前：」という説明文とinputタグを入れています。input type="text"は、1行のテキスト入力欄を作る指定です。
name属性にはcustomerNameを指定しています。name属性は、フォームの内容を送信するときに、どの入力欄の値なのかを識別するために使われます。
size属性は、テキストボックスの表示幅を指定します。ここではsize="20"としているため、20文字程度の幅で表示されます。ただし、見た目の細かい調整はCSSでwidthを指定する方法もよく使われます。
labelにfont-weight: bold;を指定しているため、説明文が太字で表示されます。入力欄の説明が少し強調され、ユーザーが何を入力すればよいのか分かりやすくなります。
for属性とid属性で関連付ける
labelタグは、for属性を使って入力欄と関連付けることもできます。この方法では、labelタグとinputタグを別々に書き、labelのfor属性とinputのid属性を同じ値にします。
<label for="email">メール：</label>
<input type="email" id="email" name="email">この場合、label for="email"は、id="email"を持つ入力欄と関連付けられます。説明文と入力欄を離して配置したい場合や、表やフォームレイアウトの中で整理したい場合に便利です。
for属性とid属性の関係
| 書く場所 | 例 | 役割 |
|---|---|---|
| labelのfor属性 | for="email" | どの入力欄の説明かを指定する |
| inputのid属性 | id="email" | labelから参照される名前を付ける |
| inputのname属性 | name="email" | 送信時の項目名を指定する |
id属性は、ページ内で同じ値を重複させないようにします。labelのfor属性と対応する入力欄のid属性は、必ず同じ値にします。
ファイル名： Lesson30-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for属性の例</title>
<style>
body {
font-family: sans-serif;
line-height: 1.7;
}
label {
font-weight: bold;
}
input {
padding: 6px;
}
</style>
</head>
<body>
<p>
<label for="userEmail">メールアドレス：</label>
<input type="email" id="userEmail" name="email" size="28">
</p>
</body>
</html>この図から分かること
このHTMLでは、labelのfor属性にuserEmailを指定し、inputのid属性にもuserEmailを指定しています。これにより、メールアドレスという文字をクリックしたときにも、メール入力欄へフォーカスが移ります。
input type="email"は、メールアドレス入力に向いた入力欄です。ブラウザによっては、メールアドレスの形式に合っているかを簡単に確認してくれる場合があります。
テキストボックスとテキストエリア
フォームでよく使う入力欄には、1行入力のテキストボックスと、複数行入力のテキストエリアがあります。
1行だけ入力する場合は、input type="text"を使います。名前、電話番号、検索キーワードなどに向いています。
<input type="text" name="keyword" size="30">長い文章を入力してもらう場合は、textareaタグを使います。お問い合わせ内容、感想、コメント、備考などに向いています。
<textarea name="message" cols="40" rows="5"></textarea>textareaでは、cols属性で横方向の文字数、rows属性で行数を指定できます。ただし、実際の見た目はCSSでwidthやheightを指定して調整することも多いです。
テキスト入力で使う主な属性
| 属性 | 使う場所 | 役割 |
|---|---|---|
| name | input、textarea | 送信時の項目名を指定する |
| size | input | 入力欄の表示幅を文字数で指定する |
| cols | textarea | テキストエリアの横幅の目安を指定する |
| rows | textarea | テキストエリアの行数を指定する |
| id | input、textarea | labelと関連付けるために使う |
図2：テキストボックスとテキストエリアの違い
この図から分かること
短い文字を入力してもらう場合はinput type="text"、長い文章を入力してもらう場合はtextareaを使います。入力欄にはname属性を付け、labelとidを使って説明文と関連付けると、操作しやすいフォームになります。
textareaでコメント欄を作る
次の例では、ユーザーから感想を入力してもらうコメント欄を作ります。
ファイル名： Lesson30-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テキスト入力の例</title>
<style>
body {
font-family: sans-serif;
line-height: 1.7;
}
label {
font-weight: bold;
}
textarea {
vertical-align: top;
padding: 8px;
}
</style>
</head>
<body>
<h1>学習コメント欄</h1>
<p>
<label for="comment">ご意見：</label><br>
<textarea id="comment" name="comment" cols="42" rows="6"></textarea>
</p>
</body>
</html>この図から分かること
このHTMLでは、textareaタグで複数行の入力欄を作っています。id="comment"とlabel for="comment"を対応させているため、ラベルと入力欄が関連付けられています。
cols="42"は横幅の目安、rows="6"は表示する行数の指定です。長い文章を書いてもらう場合は、rowsを少し多めにすると入力しやすくなります。
textareaにvertical-align: top;を指定しているのは、ラベルや周辺要素との縦位置を整えるためです。フォームでは、入力欄の大きさが要素によって違うため、CSSで位置を調整すると見た目が整います。
チェックボックスとラジオボタン
選択式の入力欄には、チェックボックスとラジオボタンがあります。
チェックボックスは、複数の項目を選べる入力です。趣味、興味のある分野、受け取りたいお知らせなど、複数選択を許可したい場合に使います。
ラジオボタンは、同じname属性を持つ選択肢の中から1つだけ選べる入力です。会員種別、支払い方法、希望連絡方法など、1つだけ選ばせたい場合に使います。
checkboxとradioの違い
| type | 特徴 | 向いている内容 |
|---|---|---|
| checkbox | 複数選択できる | 興味のある項目、趣味、希望サービス |
| radio | 同じname内で1つだけ選べる | 1つだけ選ぶ質問、プラン選択、回答形式 |
radioを使う場合は、同じ質問に属する選択肢に同じname属性を指定します。nameが違うと、別々のグループとして扱われてしまい、複数選べるように見えてしまうことがあります。
checkboxとradioを使ったアンケート
次の例では、興味のある学習内容をチェックボックスで選び、希望する連絡方法をラジオボタンで1つ選ぶフォームを作ります。
ファイル名： Lesson30-4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>選択入力の例</title>
<style>
body {
font-family: sans-serif;
line-height: 1.8;
}
form {
padding: 16px;
background-color: #F5F8FF;
border: solid 1px #CCCCCC;
width: 520px;
}
p {
margin-bottom: 16px;
}
label {
margin-right: 12px;
}
</style>
</head>
<body>
<h1>学習アンケート</h1>
<form>
<p>
興味のある学習内容を選んでください。複数選択できます。<br>
<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="javascript">JavaScript</label>
</p>
<p>
希望する連絡方法を選んでください。<br>
<label><input type="radio" name="contact" value="email">メール</label>
<label><input type="radio" name="contact" value="phone">電話</label>
<label><input type="radio" name="contact" value="none">連絡不要</label>
</p>
</form>
</body>
</html>この図から分かること
このHTMLでは、HTML、CSS、JavaScriptの選択肢にcheckboxを使っています。複数選択できるため、ユーザーは興味のある項目をいくつでも選べます。
一方、連絡方法の選択肢にはradioを使っています。3つのradioはすべてname="contact"になっているため、このグループの中から1つだけ選べます。
checkboxやradioは、入力欄そのものが小さいため、labelで囲むと操作しやすくなります。文字部分をクリックしても選択できるため、ユーザーにとって使いやすいフォームになります。
selectとoptionでセレクトメニューを作る
選択肢が多い場合や、画面をすっきり見せたい場合は、セレクトメニューを使えます。セレクトメニューは、selectタグとoptionタグで作ります。
<select name="course">
<option value="">選択してください</option>
<option value="html">HTML入門</option>
<option value="css">CSS入門</option>
</select>selectタグは、ドロップダウンリスト全体を表します。optionタグは、リスト内の各選択肢を表します。value属性には、送信時に使われる値を指定します。
selectとoptionの役割
| タグ | 役割 |
|---|---|
| select | ドロップダウン形式の選択メニューを作る |
| option | 選択肢を作る |
| value | 選択されたときに送信される値を指定する |
選択肢の最初に「選択してください」のような案内を入れておくと、ユーザーが何をすればよいか分かりやすくなります。その場合、value=""のように空の値を指定することがあります。
ファイル名： Lesson30-5.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクトの例</title>
<style>
body {
font-family: sans-serif;
line-height: 1.7;
}
label {
font-weight: bold;
}
select {
padding: 6px;
}
</style>
</head>
<body>
<h1>講座申込みフォーム</h1>
<form>
<label for="course">受講したい講座：</label>
<select id="course" name="course">
<option value="">選択してください</option>
<option value="html-basic">HTML入門</option>
<option value="css-basic">CSS入門</option>
<option value="form-basic">フォーム作成</option>
</select>
</form>
</body>
</html>この図から分かること
このHTMLでは、selectタグで講座を選ぶメニューを作っています。id="course"とlabel for="course"を対応させているため、ラベルとセレクトメニューが関連付けられています。
optionのvalue属性には、送信時に使いやすい英数字の値を指定しています。画面に表示される文字は「HTML入門」や「CSS入門」ですが、送信される値はhtml-basicやcss-basicになります。
inputとbuttonでボタンを作る
フォームでは、入力した内容を送信したり、入力内容をクリアしたり、任意の処理を実行したりするためにボタンを使います。
ボタンは、inputタグまたはbuttonタグで作れます。
ボタンの種類
| 書き方 | 役割 |
|---|---|
| input type="submit" | フォームを送信する |
| input type="reset" | フォームの入力内容を初期状態に戻す |
| input type="button" | 任意の処理に使う |
| button type="submit" | フォームを送信する |
| button type="reset" | フォームの入力内容を初期状態に戻す |
| button type="button" | JavaScriptなど任意の処理に使う |
buttonタグは、タグの中に文字やHTMLを入れられるため、見た目を調整しやすい特徴があります。inputタグのボタンは、value属性で表示文字を指定します。
ファイル名： Lesson30-6.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンの例</title>
<style>
body {
font-family: sans-serif;
line-height: 1.7;
}
input,
button {
padding: 8px 16px;
margin-right: 8px;
}
</style>
</head>
<body>
<h1>ボタンの例</h1>
<form>
<input type="submit" value="送信">
<input type="reset" value="クリア">
<button type="button" onclick="alert('ボタンがクリックされました')">確認</button>
</form>
</body>
</html>この図から分かること
このHTMLでは、送信ボタン、クリアボタン、確認ボタンを並べています。
input type="submit"は、フォームを送信するためのボタンです。input type="reset"は、フォーム内の入力内容を初期状態に戻します。
button type="button"は、送信やリセットを自動では行わないボタンです。この例では、onclick属性で簡単なメッセージを表示しています。実際の制作では、JavaScriptと組み合わせて確認表示や画面操作に使われることがあります。
formタグで入力要素をまとめる
フォーム全体を作るときは、formタグで入力要素をまとめます。formタグには、送信先や送信方式を指定できます。
<form action="submit.php" method="post">
入力欄やボタンをここに入れる
</form>action属性には、フォームの送信先を指定します。method属性には、送信方法を指定します。よく使われる値はgetとpostです。
getは、送信内容がURLに付いて送られる方式です。検索フォームのように、URLとして共有してもよい内容に向いています。postは、送信内容をリクエスト本文として送る方式で、お問い合わせ内容など、URLに表示したくない内容や長いデータに向いています。
formタグの主な属性
| 属性 | 役割 |
|---|---|
| action | 送信先のURLやプログラム名を指定する |
| method | getまたはpostで送信方式を指定する |
| enctype | 送信データの形式を指定する |
| name | フォームに名前を付ける |
enctypeは、送信データの形式を指定する属性です。通常は特に指定しなくても問題ない場面が多いですが、ファイルを送信するフォームではenctype="multipart/form-data"を指定します。
図3：formタグで入力欄をまとめて送信する
この図から分かること
formタグは、入力欄や選択肢、ボタンをまとめるためのタグです。action属性で送信先、method属性で送信方式、enctype属性で送信データの形式を指定できます。HTMLは入力画面を作る役割であり、送信後の処理にはサーバー側のプログラムが必要です。
お問い合わせフォームを作る
最後に、formタグを使って、お名前、メールアドレス、お問い合わせ内容を入力できるフォームを作ります。
ファイル名： Lesson30-7.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーム全体の例</title>
<style>
body {
font-family: sans-serif;
line-height: 1.7;
}
form {
width: 520px;
padding: 18px;
background-color: #F5F8FF;
border: solid 1px #CCCCCC;
border-radius: 6px;
}
label {
display: inline-block;
width: 130px;
font-weight: bold;
vertical-align: top;
}
input[type="text"],
input[type="email"],
textarea {
padding: 7px;
border: solid 1px #999999;
border-radius: 4px;
box-sizing: border-box;
}
textarea {
vertical-align: top;
}
input[type="submit"] {
padding: 8px 20px;
background-color: #0055A4;
color: #FFFFFF;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #002D72;
}
</style>
</head>
<body>
<h1>お問い合わせ</h1>
<form action="send-contact.php" method="post" enctype="multipart/form-data">
<p>
<label for="name">お名前：</label>
<input type="text" id="name" name="name" size="22">
</p>
<p>
<label for="email">メール：</label>
<input type="email" id="email" name="email" size="28">
</p>
<p>
<label for="message">内容：</label>
<textarea id="message" name="message" cols="42" rows="6"></textarea>
</p>
<p>
<input type="submit" value="送信">
</p>
</form>
</body>
</html>この図から分かること
このHTMLでは、formタグで入力要素全体を囲んでいます。action="send-contact.php"は、送信先のプログラムを指定しています。method="post"は、送信方式としてpostを使う指定です。enctype="multipart/form-data"は、ファイル送信を行う場合に使われる形式ですが、ここでは属性の使い方を確認するために指定しています。
お名前にはinput type="text"、メールにはinput type="email"、内容にはtextareaを使っています。それぞれにid属性とname属性を付けています。idはlabelとの関連付けに使い、nameは送信時の項目名として使います。
CSSでは、formに背景色、枠線、角丸、余白を指定して、フォーム全体をカードのように見せています。labelにはdisplay: inline-block;とwidthを指定して、説明文の幅をそろえています。入力欄の位置がそろうため、見やすいフォームになります。
送信ボタンには、背景色や文字色、角丸を指定しています。input type="submit":hoverを使うことで、マウスを重ねたときに色が変わるようにしています。ボタンに反応があると、クリックできる場所であることが分かりやすくなります。
フォームを作るときに大切な考え方
フォームでは、見た目だけでなく、入力しやすさも大切です。入力欄の前には分かりやすいラベルを付け、どの情報を入力すればよいのかを明確にします。labelと入力欄を関連付けると、文字部分をクリックしても入力欄を選択できるため、操作しやすくなります。
入力内容に合わせてフォーム部品を選ぶことも大切です。短い文字ならinput type="text"、長い文章ならtextarea、複数選択ならcheckbox、1つだけ選ぶならradio、候補から選ばせるならselectを使います。
入力内容とフォーム部品の使い分け
| 入力内容 | 向いているフォーム部品 |
|---|---|
| 名前や件名 | input type="text" |
| メールアドレス | input type="email" |
| 長い文章 | textarea |
| 複数選択 | input type="checkbox" |
| 1つだけ選択 | input type="radio" |
| 多くの候補から選択 | select |
| 送信やクリア | input、button |
フォームでは、name属性も重要です。送信時には、name属性の値と入力された内容が組み合わされて送られます。nameがない入力欄は、送信データとして扱われない場合があります。
HTMLフォームとサーバー側処理
HTMLでは、入力画面を作ることができます。しかし、入力された内容を保存したり、メールで送信したり、データベースに登録したりする処理はHTMLだけでは行えません。
formタグのaction属性には送信先を指定できますが、その送信先には、PHP、CGI、JavaScriptを使ったバックエンド処理、またはフォームサービスなど、データを受け取る仕組みが必要です。
学習段階では、まずHTMLでフォームの形を作り、各入力要素の役割を理解することが大切です。その後、必要に応じてサーバー側の処理やJavaScriptによる入力チェックへ進むと、より実用的なフォームを作れるようになります。
使用タグと属性の整理
この学習で登場した主なタグと属性を整理します。
| 種類 | 名前 | 用途 |
|---|---|---|
| タグ | form | フォーム全体をまとめる |
| タグ | label | 入力欄や選択肢の説明文を関連付ける |
| タグ | input | 1行入力、選択肢、ボタンなどを作る |
| タグ | textarea | 複数行の入力欄を作る |
| タグ | select | ドロップダウンリストを作る |
| タグ | option | select内の選択肢を作る |
| タグ | button | ボタンを作る |
| 属性 | type | inputの種類を指定する |
| 属性 | name | 送信時の項目名を指定する |
| 属性 | id | labelと関連付けるための識別名を指定する |
| 属性 | for | labelと入力欄を関連付ける |
| 属性 | value | 送信される値やボタンの表示文字を指定する |
| 属性 | action | フォームの送信先を指定する |
| 属性 | method | フォームの送信方式を指定する |
| 属性 | enctype | 送信データの形式を指定する |
| 属性 | cols | textareaの横幅の目安を指定する |
| 属性 | rows | textareaの行数を指定する |
| 属性 | size | inputの表示幅を指定する |
formは入力要素全体をまとめるタグです。labelは説明文と入力欄を関連付け、input、textarea、selectなどで実際の入力欄を作ります。
type属性によってinputの種類が変わります。textなら文字入力、emailならメール入力、checkboxならチェックボックス、radioならラジオボタン、submitなら送信ボタンになります。
ユーザー入力フォームを作るときに意識したいこと
ユーザー入力フォームを作るときは、まず「どのような情報を受け取りたいのか」を整理します。名前、メールアドレス、問い合わせ内容、選択項目など、必要な情報を明確にしてから、適したフォーム部品を選びます。
次に、labelを使って入力欄の説明を分かりやすく付けます。特にチェックボックスやラジオボタンでは、labelで囲むことでクリックしやすくなり、操作性が向上します。
フォーム全体はformタグでまとめ、送信先にはaction属性、送信方式にはmethod属性を指定します。ただし、HTMLだけでは送信後の処理はできないため、実際にデータを扱うにはサーバー側の仕組みが必要です。
CSSを使えば、入力欄の余白、枠線、横幅、ボタンの色などを整えられます。見た目をきれいにするだけでなく、入力しやすい余白、読みやすいラベル、分かりやすいボタンを意識すると、ユーザーにとって使いやすいフォームになります。
フォームは、Webページとユーザーをつなぐ大切な入口です。基本のタグと属性を理解しておくと、アンケート、お問い合わせ、注文フォーム、ログイン画面など、さまざまな入力画面へ応用できるようになります。