html5第4回
html5フォーム関連
今回はhtml5で追加されたformのinputタグのプロパティについて学習する。
placeholder
入力値のサンプルがグレーで表示される。ユーザが入力を開始すると自動で消える。
<input type="text" placeholder="入力サンプル">
required
必須項目とする。未入力ではsubmitできなくなる。
<input type="text" required="required">
autocomplete
入力値の候補が自動で表示される。
<input type="text" autocomplete="on">
typeの属性値
typeの属性値として指定する新たな値として主なものを挙げる。
type="email"
e-mail入力専用のtext属性。e-mail形式でないとエラーを出す。
<input type="email">
type="url"
url入力専用のtext属性。url形式でないとエラーを出す。
<input type="url">
type="range"
スライダが表示される。送信値は数値だが入力値は表示されない上、数値での入力はできない。
<input type="range">
type="color"
色の入力欄を表示させる。
<input type="color">
type="number"
数値入力のトグル付入力エリアを表示する。
<input type="number">
type="password"
パスワード入力エリアを表示する。入力値は黒丸で表示され、ブラウザ上で読めなくなる。
<input type="password">
type="list"
selectと同様に、こちらで用意した値以外は入力不可にさせる。
<input type="list"> <option value="選択肢1">選択肢1</option> <option value="選択肢2">選択肢2</option> <option value="選択肢3">選択肢3</option>
