“input”要素~“title”属性

“title”属性について

“title”属性はグローバル属性ですが、“pattern”属性が指定された“input”要素に指定した場合は入力可能な値の書式の説明を表します。

“title”属性の値は“pattern”属性によって定義された入力可能な入力値の書式についての説明である必要があります。ブラウザはこの値を入力値が妥当性のチェックを通らなかった時や入力欄にカーソルを当てた時、もしくはそれ以外の適切な場面でツールチップなどによってユーザーに表示することができます。

“input”要素に“pattern”属性が指定されていない場合“title”属性は他の要素に指定された場合と同様に補足情報を表します。

指定できる値

サンプルコード

<form method="post" action="sample-inputtag6.php" target="_blank">

<fieldset>

<legend>あなたの猫の情報</legend>
<p><label>名前：<input type="text" name="cat-name" pattern="(?=.*?[\u3041-\u309F])[\u3041-\u309F\u30FC]*" title="ひらがなで入力してください" required></label></p>
<p><label>年齢：<input type="text" name="cat-age" pattern="[\uFF10-\uFF19]*" title="全角数字で入力してください" required></label></p>
<p><label>体色：<input type="text" name="cat-color" pattern="(?=.*?[\u3041-\u309F])[\u3041-\u309F\u30FC]*" title="ひらがなで入力してください" required></label></p>

</fieldset>
<fieldset>

<legend>あなたの情報</legend>
<p><label>名前：<input type="text" name="name" pattern="(?=.*?[\u30A1-\u30FA])[\u30A1-\u30FC]*" title="全角カタカナで入力してください" required></label></p>
<p><label>メールアドレス：<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="アットマーク（“@”）を含んだ形式で入力してください" required></label></p>
<p><label>電話番号：<input type="tel" name="tel" pattern="\d{2,4}-\d{3,4}-\d{3,4}" title="ハイフン（“-”）を含んだ形式で入力してください"></label></p>
<p><label>ウェブサイト：<input type="url" name="website" pattern="^http(|s)://[0-9a-zA-Z/#&?%\.\-\+_=]+$" title="“http://”もしくは“https://”ではじまるＵＲＬを入力してください"></label></p>
<p><label>使命：<input type="text" name="mission" title="し‐めい【使命】：与えられた重大な務め。責任をもって果たさなければならない任務。" required></label></p>

</fieldset>
<p>

<p><button type="submit">送信する</button></p>

</p>

</form>

あなたの猫の情報

名前：

年齢：

体色：

あなたの情報

名前：

メールアドレス：

電話番号：

ウェブサイト：

使命：

送信する

＊送信すると入力内容が表示されます。