はじめに
同僚とHTML5について話していたところ、追加されたinput type属性について説明ができなかった。
復習するためにアウトプットしたいと思います。
記事を8割書いた時点でデータが吹っ飛んだ為、随時追加型にしております。
参考サイト
<input>の終了タグ/閉じタグについて
HTML5から終了タグ/閉じタグをつけるのは間違った文法ではなくなりました。
ですが、終了タグ/閉じタグをつけないのが正しい文法だそうです。
私はつけるようにしています。
イベントハンドラ
<input>属性の中に一つのみ設定できる。
イベントハンドラ内では複数の関数の呼び出しを行える。
技法的には古いらしい。
入力方法
例えば<input type="text">と<input type="number">を比較してみます。
PCでは「増やす」「減らす」の増減ボタンが<input type="number">において表示されます。
SPでは自動でキーパッドが数値用に<input type="number">ではなります。
フォームバリデーション
HTML5のpattern,required属性等の追加に伴い、JSで実装していたクライアントチェック処理を
一部HTMLの記述のみに置き換えられるようになった。
ブラウザ依存(旧ブラウザ)問題がある場合、フォームバリデーションを切ることもできる。
<input type="submit" name="" value="" formnovalidate />
input type属性
input type属性一覧
| name | name | name | name |
|---|---|---|---|
| hidden | text | password | checkbox |
| radio | file | submit | image |
| reset | button | search | tel |
| url | datetime | date | |
| month | week | time | datetime-local |
| number | range | color |
- search以降はHTML5にて追加
input type属性の概要
hidden
<input type="hidden" name="" value="" />
- ブラウザ上に表示しないデータを送信します。
text
<input type="text" name="" value="" />
- ブラウザ上に1行テキストボックスを表示し、入力データを送信します。
password
<input type="password" name="" value="" />
- ブラウザ上に1行テキストボックスを表示し、入力データを暗号化せず送信します。
- 入力した文字列は「＊」に置き換えられます。
checkbox
<input type="checkbox" name="" value="">選択肢1</input>
<input type="checkbox" name="" value="">選択肢2</input>
<input type="checkbox" name="" value="">選択肢3</input>
- ブラウザ上にチェックボックスを表示し、選択データを送信します。
radio
<input type="radio" name="" value="">選択肢1</input>
<input type="radio" name="" value="">選択肢2</input>
<input type="radio" name="" value="">選択肢3</input>
- ブラウザ上にラジオボタンを表示し、選択データを送信します。
file
<input type="file" name="" />
- ブラウザ上にファイル参照とファイル名を表示し、ファイルを送信します。
submit
<input type="submit" value="" />
- ブラウザ上にサブミットボタンを表示し、ボタン押下後フォーム情報を送信します。
image
<input type="image" src="" alt="" />
- ブラウザ上に画像ボタンを表示する。
reset
<input type="submit" value="" />
- ブラウザ上にリセットボタンを表示し、ボタン押下後フォーム情報を初期化します。
button
<input type="button" value="" />
- ブラウザ上に汎用ボタンを表示する。
search
<input type="search" name="" value="" />
- ブラウザ上に1行テキストボックス(検索用)を表示し、入力データを送信します。
tel
<input type="tel" name="" value="" />
- ブラウザ上に1行テキストボックス(電話番号用)を表示し、入力データを送信します。
url
<input type="url" name="" value="" />
- ブラウザ上に1行テキストボックス(URL用)を表示し、入力データを送信します。
<input type="email" name="" value="" />
- ブラウザ上に1行テキストボックス(mail用)を表示し、入力データを送信します。
datetime
<input type="datetime" name="" value="" />
- ブラウザ上に1行テキストボックス(UTC（協定世界時）による日時の入力欄用)を表示し、入力データを送信します。
date
<input type="date" name="" value="" />
- ブラウザ上に1行テキストボックス(日付用)を表示し、入力データを送信します。
month
<input type="month" name="" value="" />
- ブラウザ上に1行テキストボックス(月用)を表示し、入力データを送信します。
week
<input type="week" name="" value="" />
- ブラウザ上に1行テキストボックス(週用)を表示し、入力データを送信します。
time
<input type="time" name="" value="" />
- ブラウザ上に1行テキストボックス(時間用)を表示し、入力データを送信します。
datetime-local
<input type="datetime-local" name="" value="" />
- ブラウザ上に1行テキストボックス(UTC（協定世界時）によらないローカル日時の入力欄用)を表示し、入力データを送信します。
number
<input type="number" name="" value="" />
- ブラウザ上に1行テキストボックス(数値用)を表示し、入力データを送信します。
range
<input type="range" name="" />
- ブラウザ上にレンジバーを表示し、選択データを送信します。
color
<input type="color" name="" value="" />
- ブラウザ上に1行テキストボックス(カラー用)を表示し、入力データを送信します。
input type属性以外の属性
input type属性以外の属性抜粋一覧
| name | name | name | name |
|---|---|---|---|
| checked | disabled | maxlength | readonly |
| size | autocomplete | autofocus | formnovalidate |
| formtarget | max | min | multiple |
| pattern | placeholder | required | step |
input type属性以外の属性の概要
checked
<input type="checkbox" name="" value="" checked="checked">選択肢1</input>
<input type="radio" name="" value="" checked="checked">選択肢1</input>
-
checkboxとradioに設定することで、選択状態にします。
disabled
<input type="text" name="" value="" disabled="disabled" />
<input type="submit" value="" disabled="disabled" />
- 操作を無効/非活性にします。データを送信しません。
maxlength
<input type="text" name="" value="" maxlength="" />
- 入力可能な最大文字数を指定します。
readonly
<input type="text" name="" value="" readonly="readonly" />
<input type="password" name="" value="" readonly="readonly" />
- 操作を無効/非活性にします。データを送信します。
size
<input type="text" name="" value="" size="" />
- 表示文字数を指定します。
autocomplete
- list属性とを使用し、入力候補を提示して入力内容を自動補完する。
autofocus
<input type="text" name="" value="" autofocus />
- ウェブページが表示された際に、autofocauが指定された入力欄に自動的にフォーカスされるようにします。
formnovalidate
formtarget
max
<input type="number" name="" value="" max="10" />
- 入力可能な最大値を指定します。
min
<input type="number" name="" value="" min="1" />
- 入力可能な最小値を指定します。
multiple
<input type="text" name="" value="" multiple />
- 複数の値を一度に入力し、カンマ区切りのデータを送信します。
pattern
<input type="text" name="" value="" pattern="^[0-9A-Za-z]+$" />
- 正規表現を使って入力値のパターンを指定します。
placeholder
<input type="text" name="" value="" placeholder ="サンプル" />
- テキストフィールドに透過した文字を設定できる。
required
<input type="text" name="" value="" required />
- 入力必須にします。
step
<input type="number" name="" value="" step="3" />
- 入力欄でカウントアップ/ダウンする幅を指定します。