お問い合わせ、会員登録、アンケートなど、読者に入力してもらう画面は、HTMLのフォームで作ります。この記事では、フォームを作るタグの使い方と、入力しやすくする属性、知っておきたい注意点をまとめます。
form タグ：どこへ、どうやって送るか
フォーム全体は form タグで囲みます。form には、入力された内容をどこへ、どうやって送るかを書きます。
<form action="/contact/confirm" method="post">
</form>| 属性 | 意味 |
|---|---|
action | 入力された内容を送る先のURL |
method | 送り方。post か get |
| 送り方 | 使う場面 | 特徴 |
|---|---|---|
post | お問い合わせ、ログイン、登録など | 入力内容がURLに付かないので、アドレスバーや履歴に残らない |
get | サイト内検索など | 入力内容がURLの後ろに付くので、そのURLをそのまま保存したり共有したりできる |
post でも、送る中身が暗号化されるわけではありません。送信中の内容を守るのはHTTPS（URLが https:// で始まる通信）の役割です。action 属性については「formのaction属性」でも紹介しています。
HTMLだけでは送れない
HTMLで作れるのは、入力する画面までです。送られた内容を受け取ってメールで届けたり、保存したりするには、action の先で動くサーバー側のプログラム（PHPなど）が必要です。WordPressでお問い合わせフォームを作るときは、この部分をフォームのプラグインが引き受けています。
入力欄の基本
name 属性がないと送られない
入力欄（input、select、textarea）には、name 属性を付けます。送信されるのは「name の名前」と「入力された値」の組で、name がない入力欄の内容は送られません。
label で項目名と入力欄を結び付ける
項目名と入力欄は、label タグで結び付けます。結び付けると、項目名をクリックしても入力欄にカーソルが移る（チェックボックスならチェックが入る）ようになり、画面読み上げソフトも「何の入力欄か」を読み上げられます。
結び付け方は2通りあります。
① for と id で結び付ける
<label for="user-name">お名前</label>
<input type="text" id="user-name" name="username">② label で入力欄ごと囲む
<label>
お名前
<input type="text" name="username">
</label>
どちらでも動きます。①は項目名と入力欄を離して置けるので、表の中にフォームを作るときなどに使いやすく、②は id を考えなくてよいので書く量が少なくて済みます。
いろいろな入力欄
ラジオボタンとチェックボックス
| 種類 | 使う場面 |
|---|---|
ラジオボタン（type="radio"） | いくつかの中から1つだけ選んでもらう |
チェックボックス（type="checkbox"） | いくつでも選んでもらう。「規約に同意する」のような1つだけのチェックにも使う |
<p>ご希望の連絡方法：</p>
<label><input type="radio" name="contact-method" value="email"> メール</label>
<label><input type="radio" name="contact-method" value="tel"> 電話</label>
<p>興味のある分野（複数選択可）：</p>
<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="js"> JavaScript</label>
- ラジオボタンは同じ name にする：
nameが同じものが1つのグループになり、その中で1つだけ選べるようになります - value が送られる：
送信されるのは画面の文字（「メール」）ではなく、valueの値（email）です - name の [] は受け取る側のため：
チェックボックスのinterest[]の[]は、PHPで受け取るときに、選ばれた値をまとめて配列で受け取るための書き方です
セレクトボックス（プルダウン）
選択肢が多いときは、select と option でプルダウンにします。ラジオボタンより画面の場所を取りません。
<!-- for と id で結び付ける場合 -->
<label for="prefecture">お住まいの都道府県</label>
<select id="prefecture" name="pref">
<option value="">選択してください</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>
<!-- label で囲む場合 -->
<label>お住まいの都道府県
<select name="pref">
<option value="">選択してください</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>
</label>
最初の選択肢を value=""（空）にしておくと、「まだ選んでいない」状態を作れます。このあとの required と組み合わせると、選ばないまま送信しようとしたときに止められます。
テキストエリア（複数行の入力）
お問い合わせ内容のような長い文章には textarea を使います。input と違って、終了タグ（</textarea>）が必要です。
<!-- for と id で結び付ける場合 -->
<label for="contact-message">お問い合わせ内容</label>
<textarea id="contact-message" name="message" rows="5" placeholder="こちらにお問い合わせ内容をご記入ください。"></textarea>
<!-- label で囲む場合 -->
<label>お問い合わせ内容
<textarea name="message" rows="5" placeholder="こちらにお問い合わせ内容をご記入ください。"></textarea>
</label>
rows で最初の高さ（行数）を指定できます。横幅は、CSSで width: 100%; のように指定するのが一般的です。<textarea> と </textarea> の間に改行や空白を入れると、それが最初から入力された状態になるので、間は詰めて書きます。
入力しやすくする属性
入力欄には、JavaScriptを使わずにブラウザの機能で入力を助けたり、チェックしたりする属性があります。
| 属性 | 役割 |
|---|---|
required | 入力しないと送信できないようにする |
placeholder | 入力欄の中に、薄い文字で記入例を出す |
autocomplete | ブラウザが覚えている名前やメールアドレスを自動で入れやすくする |
required：入力を必須にする
<label for="user-email">メールアドレス（必須）</label>
<input type="email" id="user-email" name="email" required>
入力しないまま送信しようとすると、ブラウザが注意を出して送信を止めます。type="email" と組み合わせると、「@」がないなど、メールアドレスの形になっていない入力も止めてくれます。
placeholder：記入例を出す
<label for="user-tel">電話番号</label>
<input type="tel" id="user-tel" name="tel" placeholder="090-1234-5678">
入力を始めると消えるので、項目名の代わりには使いません。項目名を placeholder だけにすると、入力中に何の欄か分からなくなります。項目名は label で書き、placeholder は記入例として使います。
autocomplete：自動入力を助ける
<label for="full-name">お名前</label>
<input type="text" id="full-name" name="name" autocomplete="name">
<label for="email-address">メールアドレス</label>
<input type="email" id="email-address" name="email" autocomplete="email">
<label for="phone-number">電話番号</label>
<input type="tel" id="phone-number" name="tel" autocomplete="tel">
autocomplete に「何の入力欄か」を書いておくと、ブラウザが保存している名前やメールアドレスを候補に出してくれます。スマホでは文字を打つ手間が減るので、特に効果があります。
これらをまとめると、次のようになります。
<div class="form-group">
<label for="contact-email">メールアドレス <span class="required-badge">必須</span></label>
<input
type="email"
id="contact-email"
name="email"
placeholder="example@example.com"
autocomplete="email"
required
>
</div>
スマホのキーボードに合わせて type を選ぶ
スマホでは、input の type に合わせてキーボードが切り替わります。
| type | スマホのキーボード | 使う入力欄 |
|---|---|---|
email | 「@」や「.」が打ちやすい | メールアドレス |
tel | 数字のキーパッド | 電話番号 |
url | 「/」や「.com」が打ちやすい | URL |
number | 数字入力用 | 個数、年齢など「計算に使う数」 |
電話番号や郵便番号に type="number" を使うと、先頭の0が消えたり、入力欄に上下の矢印が出たりします。数字だけを入力する「番号」には、type="tel" か、type="text" に inputmode="numeric" を付けます。
グループ分けと送信ボタン
fieldset と legend でまとめる
項目が多いフォームでは、関係のある項目を fieldset でまとめ、legend でそのグループの見出しを付けます。ラジオボタンの「ご希望の連絡方法」のように、選択肢のまとまりに見出しを付けるときにも使えます。
<fieldset>
<legend>お届け先情報</legend>
</fieldset>
送信ボタンは button タグで
送信ボタンには <input type="submit"> も使えますが、今は中に文字やアイコンを自由に入れられる button タグがよく使われます。
<button type="submit" class="submit-btn">
<span>送信する</span>
</button>
form の中の button は、type を書かないと送信ボタン（type="submit"）になります。入力をクリアするボタンなど、送信しないボタンには type="button" を書かないと、押したとたんに送信されてしまいます。送信ボタンにも type="submit" を書いておくと、あとで読んだときに分かりやすくなります。
ブラウザのチェックは守りにはならない
required や type="email" のチェックは、入力している人に「入力し忘れ」を知らせるためのものです。ブラウザの開発者ツールでHTMLを書き換えたり、ブラウザを使わずに直接送ったりすれば、簡単に飛ばせます。届いた内容が正しいかどうかは、受け取る側（サーバー）でも必ず確かめます。
HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」で紹介しています。
まとめ
- フォームは
formで囲み、action（送る先）とmethod（送り方）を書く。送信中の内容を守るのはHTTPS - 入力欄には
nameを付け、labelで項目名と結び付ける - ラジオボタンは同じ
nameでグループにする。送られるのはvalue required・autocompleteと、入力内容に合ったtypeで入力しやすくする。番号にはnumberを使わない- 送信しないボタンには
type="button"。ブラウザのチェックとは別に、サーバー側でも確かめる
コメント