Tweet

Pocket

フォームの入力欄へ入力された値のチェックを行うための属性をまとめてご紹介します。

◆ novalidate属性
type属性がemail、url、telなどの場合の入力形式チェックを行わないことを指定する属性です。

<form method="post" action="" novalidate>
　　<input type="email" name="mailaddress">
　　<input type="submit" value="送信">
</form>

上記の例では入力欄「mailaddress」に入力された値の形式チェックを行わずにフォーム送信されます。

【対応ブラウザ】
なし

◆ pattern属性
pattern属性は入力値のチェックを行うための正規表現を設定する属性です。type属性が「email」「password」「search」「tel」「text」「url」の場合に使用できます。

【使用例】

<input type="tel" name="tel" pattern="\d{2,4}-\d{2,4}-\d{4}">

正規表現では、「\d」は半角数字の0から9を表します。「\d{2,4}」は半角数字が2から4個続くことを表し、「\d{4}」は半角数字が4個続くことを表しています。上記の例では「045-123-4567」の形式で入力チェックを行うとう意味になります。
また、pattern属性とtitle属性を同時に利用する場合は、title属性では入力内容の説明を入れることが推奨されています。

【使用例】

<input type="text" name="cardnumber" pattern="[0-9]{16}" title="カード番号を16桁の数字で入力してください">

上記の例では、16桁の数字入力のパターンと入力内容がカード番号であることの説明文をtitle属性で指定しています。

【対応ブラウザ】
Opera9.0以降、Safari4以降、Mobile Safari3以降、Chrome3以降

◆ required属性
required属性は入力欄を必須入力にするための属性です。

【使用例】

<input type="tel" name="tel" pattern="\d{2,4}-\d{2,4}-\d{4}" required>

required属性を設定すると、値が未入力の場合にエラーメッセージが表示されフォーム送信ができません。

【対応ブラウザ】
Opera9.0以降、Safari4以降、Mobile Safari3以降、Chrome3以降