HTML5 フォーム属性
HTML5 新フォーム属性
この章は、<form>と<input>の新しい属性のいくつかをカバーしています。
新 form 属性:
新 input 属性:
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate,
formtarget)
- height 及び width
- list
- min, max 及び step
- multiple
- pattern (regexp)
- placeholder
- required
ブラウザ・サポート
| 属性 |
IE |
Firefox |
Opera |
Chrome |
Safari |
| autocomplete |
8.0 |
3.5 |
9.5 |
3.0 |
4.0 |
| autofocus |
No |
4.0 |
10.0 |
3.0 |
4.0 |
| form |
No |
4.0 |
9.5 |
10.0 |
No |
| form overrides |
No |
4.0 |
10.5 |
10.0 |
No |
| height 及び width |
8.0 |
3.5 |
9.5 |
3.0 |
4.0 |
| list |
No |
4.0 |
9.5 |
No |
No |
| min, max 及び step |
No |
No |
9.5 |
3.0 |
No |
| multiple |
No |
3.5 |
11.0 |
3.0 |
4.0 |
| novalidate |
No |
4.0 |
11.0 |
10.0 |
No |
| pattern |
No |
4.0 |
9.5 |
3.0 |
No |
| placeholder |
No |
4.0 |
11.0 |
3.0 |
3.0 |
| required |
No |
4.0 |
9.5 |
3.0 |
No |
autocomplete 属性
autocomplete 属性は、フォームまたは入力フィールドが自動補完機能を持つことを指定します。
注: autocomplete 属性は、<form> と次の <input> タイプで動作します:
text、search、url、telephone、email、password、datepickers、range および color。
ユーザが、autocomplete フィールドに入力を始めると、ブラウザはフィールドを補完する選択肢を表示します:
例
<form action="demo_form.html" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
Try it yourself »
注: いくつかのブラウザでは、これを動かすために、
autocomplete 機能をアクティブにする必要があるかもしれません。
autofocus 属性
autofocus 属性は、ページがロードされた時に、あるフィールドへ自動的にフォーカスが当たるように指定します。
注: autofocus 属性は、全ての <input> タイプで動作します。
例
User name: <input type="text" name="user_name" autofocus="autofocus" />
Try it yourself »
form 属性
form 属性は、入力フィールドが属する1つ以上のフォームを指定します。
注: form 属性は、全ての <input> タイプで動作します。
フォーム属性は、属するフォームの id を参照しなければなりません:
例
<form action="demo_form.html" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form"
/>
Try it yourself »
注: 複数のフォームを参照するためには、スペース区切りのリストを使用します。
Form Override 属性
form override 属性は、フォーム要素に設定されている属性のうちのいくつかをオーバーライドできるようにします。
form override 属性は:
- formaction - form action 属性をオーバーライドします
- formenctype - form enctype 属性をオーバーライドします
- formmethod - form method 属性をオーバーライドします
- formnovalidate - form novalidate 属性をオーバーライドします
- formtarget - form target 属性をオーバーライドします
注: form override 属性は、次の<input>タイプで動作します: submit および image。
例
<form action="demo_form.html" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.html" value="Submit as admin" />
<br
/>
<input type="submit" formnovalidate="true"
value="Submit without validation" />
<br
/>
</form>
Try it yourself »
Note: These attributes are helpful for creating different submit buttons.
height と width 属性
height と width 属性は、入力タイプが image である画像に使用する高さと幅を指定します。
注: height と width 属性は、次の<input>タイプだけで動作します: image。
例
<input type="image" src="img_submit.gif" width="24" height="24" />
Try it yourself »
list 属性
list 属性は、入力フィールドの datalist を指定します。 datalist は、入力フィールドの選択肢のリストです。
注: list 属性は、次の<input>タイプで動作します: text, search, url, telephone,
email, date pickers, number, range, および color。
例
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com"
/>
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com"
/>
</datalist>
Try it yourself »
min、max 及び step 要素
min、max および step 属性は、入力タイプが numbers または date であるときの制約を指定するために使用します。
max 属性は、入力フィールドに指定できる最大値を指定します。
min 属性は、入力フィールドに指定できる最小値を指定します。
step 属性は、入力フィールドへ規則的な数間隔を指定します（もし step="3" であれば、正当な数は -3、0、3、6 ..です）。
注: min、max および step 属性は、次の<input>タイプで動作します: date pickers, number, および range。
次の例は、step を 3 に指定した、0 から 10 の値を受け付ける numeric フィールドを示しています。
(正当な数は、0, 3, 6 および 9です):
例
Points: <input type="number" name="points" min="0" max="10" step="3" />
Try it yourself »
multiple 属性
multiple 属性は、入力フィールドへ複数の値が選択できることを指定します。
注: multiple 属性は、次の<input>タイプで動作します: email および file。
例
Select images: <input type="file" name="img" multiple="multiple" />
Try it yourself »
novalidate 属性
novalidate 属性は、送信する時に、フォームまたは入力フィールドの妥当性確認を行わないことを指定します。
この属性があると、フォームはフォーム入力の妥当性を確認しません。
注: novalidate 属性は、<form>と次の<input>タイプで動作します:
text, search, url, telephone, email, password, date pickers, range, および color。
例
<form action="demo_form.html" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
Try it yourself »
pattern 属性
pattern 属性は、入力フィールドの妥当性確認に使用するパターンを指定します
パターンは正規表現です。これに関しては、JavaScriptチュートリアル
を参照してください。
注: pattern 属性は、次の<input>タイプで動作します:
text, search, url, telephone, email, および password
次の例は、3つの(数値や特殊文字でない)文字しか含むことができないテキストフィールドを示しています:
例
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
Try it yourself »
placeholder 属性
placeholder 属性は、入力フィールドの期待する値を説明するヒントを提供します。
注: placeholder 属性は、次の<input>タイプで動作します:
text, search, url, telephone, email, および password
ヒントは、入力フィールドが空のときに表示され、そのフィールドにフォーカスが当ったときに消えます:
例
<input type="search" name="user_search" placeholder="Search W3Schools" />
Try it yourself »
required 属性
required 属性は、送信する前に入力フィールドへの入力がなされていなければならないことを指定します。
注: required 属性は、次の<input>タイプで動作します: text, search, url, telephone, email, password,
date pickers, number, checkbox, radio, および file.
|