HTML5フォームのサポート機能

html

placeholder属性

入力欄に薄字の入力例を記述できる。
実際入力すると、薄字が消える。
html

<label for="name">お名前</label>
<input type="text" name="name" id="name" size="20" maxlength="25" class="text1" placeholder="例）式乃辺 健一">

出力


autofocus属性

フォームページを開いたときに、この属性があるinputフォームが
フォーカスされている状態になる。
基本的に一番上にある名前入力欄で使われる。

html

<input type="text" name="name" id="name" size="20" maxlength="25" class="text1" placeholder="例）式乃辺 健一" autofocus>


type="email"

type属性をemailにすることで入力欄に"@"が入っていないと送信時に
エラー警告を出してくれる。
今までメール入力欄をinput type="text"にしていたのをtype="email"にした方が便利。

html

<label for="email">メールアドレス</label>
<input type="text" name="email" id="email" size="30" maxlength="40" class="text2" placeholder="例)xxx@yyy.cojp" >


required属性

requiredを付け加えることでそのinputフォームが必須項目として
未入力送信時に警告を出してくれる。

html

<input type="text" name="name" id="name" size="20" maxlength="25" class="text1" placeholder="例）式乃辺 健一" autofocus required>


|