はじめに
- HTMLタグはよく使うけど、属性までいちいちどんなのがあるか気にしていなかった
- 今回はinputタグの属性で、へ～使えるなぁコレと思ったものをピックアップしてみた
パスワード入力欄
- 入力されたテキスト、ブラウザ上ではアスタリスク（*）などに置き換えられて表示される
<input type='password'>
入力文字数制限
- 以下の例だと9文字以上は入力できない
<input maxlength='8'>
入力欄に初期値を表示
- 何も入力していないときに表示する値を設定できる
- 文字入力を始めると表示は消える
<input placeholder='名前を入力してください'>
入力自動補完
- 以下の例だと、"スーパー"と入力すると選択肢が表示される
- また、入力欄をクリックしても選択肢が表示される
- inputタグのlistとdatalistタグのidは一致している必要がある
<input autocomplete="on" list="keywords">
<datalist id="keywords">
<option value="スーパーマーケット">
<option value="スーパーマリオブラザーズ">
<option value="スーパードライ">
</datalist>
入力文字制限
- 許可された文字以外が入力されていた場合、カーソルをテキストエリアにあてると「入力された値がフィールドに指定された書式と異なります。」と表示される
- また、許可された文字以外が入力されていた場合、テキストエリア枠が赤くなる
- 以下の例では半角英数のみの入力を許可する場合
<input pattern="^[0-9A-Za-z]+$">
入力必須
- 入力が必須の場合に使用する
- 未入力の場合、カーソルをテキストエリアにあてると「このフィールドは入力必須です。」と表示される
- また、未入力の場合、テキストエリア枠が赤くなる
<input required>
オートフォーカス
- ウェブページが表示された際に、指定した入力欄にカーソルが当たって自動的にフォーカスされる
- 複数autofocusを指定しても最初のほうが優先される
<input autofocus>
- これらの挙動をすぐに見たい方は、HTML書いたんでこちらをどうぞ！
～ただの宣伝～
- 全国のSeleniumer必読
- Seleniumerといっていますが、Selenium, SauceLabs, Travis, Jenkinsに関するノウハウ書いているのでよかったら参考にしてみてください