読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

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属性を指定できるのは、ページ内で1箇所のみです
<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>


エラー表示

フォーム関連の新機能

input要素の新しいtype属性


email メールアドレス
search 検索テキスト
url URL
tel 電話番号
number 数値
date 日付
datetime UTC
datetime-local ローカル日時
month
week
time 時間
range 範囲
color

フォーム関連の新しい属性


autofocus属性 オートフォーカス
autocomplete属性 オートコンプリート
placeholder属性 プレースフォルダー

required属性

必須項目

pattern属性

正規表現による入力制限
min属性・max属性 最小値と最大値
step属性 ステップ値
multiple属性 複数の値を一度に入力・選択
accept属性 type="file"の時、受け取るファイル

形式を取得

フォーム関連の新しい要素


datalist要素

テキストボックスにプルダウンで入力候補を表示する。
候補値は option要素で指定する。

<input type="text" name="freetext" list="data-list">

<datalist id="data-list">

<option value="HTML5">HTML5

<option value="HTML4">HTML4

<option value="XHTML1">XHTML1

</datalist>