HTML5フォームの新属性

HTML5フォームの新属性

• HTML5で追加されたフォーム関連の機能

フォームコントロール

• これまでのHTMLにあったテキストボックスやラジオボタンなどの入力フォーム要素に、電話番号やメールアドレスなどに特化した属性が追加されました
• その他、数値や日付など入力するための新しい属性も追加されています

入力サポート機能

• オートコンプリート機能や自動フォーカス機能、入力候補の表示機能など入力時のサポート用属性が追加されています
• これまでJavaScriptで対応していた処理なども、これらの入力サポート機能を使用して実現できるようになりました

入力チェック機能

• 入力時の値のチェックを行う属性も追加されました
• 電話番号、メールアドレス、URLなどの形式チェックや正規表現で指定したパターンチェック、必須チェックなどがJavaScriptなどを使用しなくても行えるようになります

お問い合わせフォームに追加する機能

1. あらかじめフォーム内に入力サンプル文字を表示しておく
2. ページを開いたときに自動的に最初の入力項目にカーソルを移動しておく
3. メールアドレスや電話番号は自動的に日本語変換オフとし、英数字／数字などがすぐ入力できるようにしておく
4. 送信時に必須項目をチェックし、どこが空欄か知らせる
5. 送信時に入力書式をチェックし、どこが間違っている項目かを知らせる

入力サンプル文字を表示させる

placeholder属性

• テキストボックス等にあらかじめ入力サンプル文字を表示させることができます
• この設定をしておくことで、ユーザーはどのような文字列を入れたら良いのか理解する手助けとなります
• placeholder属性を設定できるのは、input要素とtextarea要素のみ、値はテキストのみです
• プレスフォルダーに設定した文字は入力を開始すると消えます

<th>お名前</th>
<td>
<label for="last_name">姓</label>
<input type="text" name="last_name" id="last_name" placeholder="山田">
<label for="first_name">名</label>
<input type="text" name="first_name" id="first_name" placeholder="太郎"></td>

最初の入力項目に自動的にフォーカスさせる

autofocus属性

• autofocus属性を使うことで、ページを開いたときに自動的に指定した項目にフォーカスさせることができるようになります
• この設定をしておくことで、ユーザーはすぐに入力を始めることができるようになります
• autofocus属性を指定できるのは、ページ内で１箇所のみです

<th>お名前</th>
<td>
<label for="last_name">姓</label>
<input type="text" name="last_name" id="last_name" placeholder="山田" autofocus>
<label for="first_name">名</label>
<input type="text" name="first_name" td="first_name" cplaceholder="太郎"></td>

メールアドレスのtype属性をemailにする

type="email"

• HTML5ではメールアドレスの入力を想定したinput要素のtype属性として「type="email"」が用意されています
• 「type="email"」とした場合、「xxxx@ドメイン名」といったメールアドレス用の書式しか入力できなくなります
• 正しくない書式のデータが入力された場合はには、送信時にチェックされ「メールアドレスを入力してください。」というメッセージが表示されます

<th>メールアドレス</th>
<td><input name="mail" type="email" placeholder="yamada@example.co.jp" required>
<span class="note">（半角）</span></td>

電話番号のtype属性を tel にする

type="tel"

• HTML5では電話番号の入力を想定したinput要素のtype属性として「type="tel"」が用意されています
• 電話番号は地域によって形式が様々ですので、入力できる値に制限はなく、「type="email"」のように自動での書式チェックはできません
• スマートフォンなどの場合は、数字キーボードが表示されて電話番号を入力しやすくなります

<th>お電話番号</th>
<td><input type="tel" name="tel" id="tel"　placeholder="03-1234-5678" required>
<span class="note">（半角）</span></td>

すべての項目に必須項目の設定をする

• required属性を使うことで、送信時に必須項目の入力チェックができるようになります
• すべての入力フォーム部品にrequired属性を追加してください
• テキストボックスだけではなく、チェックボックス、ラジオボタン、プルダウンなどの選択式のフォーム部品もチェックしてくれます

<h3 class="hdg">インターネットでのお問い合わせ</h3>
<p>インターネットでのお問い合わせをご希望の方は下記フォームよりご連絡ください。</p>
<form action="#" method="post" id="inquiry">
<p class="attention"><strong>※全て必須項目です。</strong></p>
<table class="table">
<tr>
<th>お名前</th>
<td>
<label for="last_name">姓</label>
<input type="text" name="last_name" id="last_name" placeholder="山田" autofocus required>
<label for="first_name">名</label>
<input type="text" name="first_name" td="first_name" cplaceholder="太郎" required></td>
</tr>
<tr>
<th>ふりがな</th>
<td>
<label for="last_kana">せい</label>
<input type="text" name="last_kana" id="last_kana" placeholder="やまだ" required>
<label for="first_kana">めい</label>
<input type="text" name="first_kana" id="first_kana" placeholder="たろう" required></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="email" name="mail" id="mail" size="30" placeholder="yamada@example.co.jp" required>
<span class="note">（半角）</span></td>
</tr>
<tr>
<th>お電話番号</th>
<td><input type="tel" name="tel" id="tel" size="30" placeholder="03-1234-5678" required>
<span class="note">（半角）</span></td>
</tr>
<tr>
<th>ご職業</th>
<td>
<select name="job" id="job" required>
<option value="" selected="selected">選択して下さい</option><!--HTML5で記述する場合、selected="selected"-->
<option value="会社員">会社員</option>
<option value="自営・フリーランス">自営・フリーランス</option>
<option value="役員・経営者">役員・経営者</option>
<option value="学生">学生</option>
<option value="主婦">主婦</option>
<option value="その他">その他</option>
</select></td>
</tr>
<tr>
<th>お問い合わせ種類</th>
<td>
<input type="radio" name="type" id="type1" value="コーディング代行について" required>
<label for="type1">コーディング代行について</label>
<input type="radio" name="type" id="type2" value="セミナー・レッスンについて" required>
<label for="type2">セミナー・レッスンについて</label>
</td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea name="content" id="content" cols="40" rows="5" required></textarea></td>
</tr>
</table>
<p class="submit-btn"><input type="submit" value="送信"></p>
</form>

エラー表示