English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5新しいフォーム属性が追加されました。formにはautocompleteとnovalidate、inputコントロールにはautocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、heightとwidth、list、minとmax、multiple、pattern(regexp)が追加されました。
HTML5 のformとinputタグにいくつかの新しい属性が追加されました。
form新属性：
autocomplete
novalidate
input新属性：
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height と width
list
min と max
multiple
pattern (regexp)
placeholder
required
step
autocomplete属性は、formまたはinputドメインが自動完了機能を持つべきであることを定義します。
ユーザーが自動完了フィールドに文字を入力し始めたとき、ブラウザはそのフィールドに入力されたオプションを表示するべきです。
ヒント: autocomplete属性はform要素で有効にされている可能性があるが、input要素では無効にされている可能性があります。
注意: autocompleteは<form>タグに適用され、以下の<input>タグのタイプに適用されます：text, search, url, telephone, email, password, datepickers, rangeおよびcolor。
HTMLフォームで autocomplete を有効にする（1つの input フィールドで autocomplete を無効にする）:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php" 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> <p>フォームを記入し、提出し、ページを再読み込みして内容が自動的に埋まっているかを確認してください。</p> <p>注意 formのautocomplete属性は「on」（オン）に設定されていますが、e-mailは自動的に「off」（オフ）に設定されています。</p> </body> </html>テストを見て‹/›
ヒント: この属性が有効になるためには、自動完了機能を有効にする必要がある可能性があります。
novalidate 属性は boolean(ボールーン) 属性です。
novalidate 属性は、フォームまたは input フィールドを検証しないことを定義します。
無効なデータの提出が不要なフォームデータ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form> <p><strong>注意：</strong> SafariおよびInternet Explorer 9 及びその以前のバージョンでは、novalidate 属性はサポートされていません。</p> </body> </html>テストを見て‹/›
autofocus 属性は boolean 属性です。
autofocus 属性は、ページが読み込まれた際にフィールドが自動的にフォーカスを得ることを定義します。
ページが読み込まれたときに「First name」の入力フィールドに自動的にフォーカスさせる：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="fname" autofocus><br> Last name: <input type="text" name="lname"><br> <input type="submit"> </form> <p><strong>注意：</strong>Internet Explorer 9及以前のIEバージョンでは、inputタグのautofocus属性をサポートしていません。</p> </body> </html>テストを見て‹/›
form属性は、入力フィールドが属する一つまたは複数のフォームを指定します。
ヒント:複数のフォームを参照する場合は、スペースで区切られたリストを使用してください。
formフォームの外にあるinputフィールドはHTMLフォームを参照しています（このinputフォームはまだformフォームの一部です）:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="提出"> </form> <p> "Last name"フィールドはformフォームの内にないが、formフォームの一部です。</p> Last name: <input type="text" name="lname" form="form1"> <p><b>注意:</b>/b> IEではform属性をサポートしていません</p> </body> </html>テストを見て‹/›
formaction属性はフォームが送信するURLアドレスを説明します。
formaction属性は<form>要素のaction属性をオーバーライドします。
注意: formaction属性はtype="submit"とtype="image"に使用されます。
以下のHTMLフォームには、異なるアドレスを持つ二つの送信ボタンが含まれています：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提交"><br> <input type="submit" formaction="demo-admin.php" value="送信"> </form> <p><strong>注意：</strong>Internet Explorer 9及以前のIEバージョンでは、inputタグのformaction属性をサポートしていません。</p> </body> </html>テストを見て‹/›
formenctype属性はフォームがサーバーに送信されるデータのエンコーディングを説明します（method="post"のフォームに対してのみ）。
formenctype属性はform要素のenctype属性をオーバーライドします。
主に: この属性はtype="submit"とtype="image"と一緒に使用されます。
最初の送信ボタンはデフォルトのエンコーディングでフォームデータを送信し、二つ目の送信ボタンは "multipart/form-data" コード形式でフォームデータを送信:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-post-enctype.php" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="提出"> <input type="submit" formenctype="multipart/form-data" value="Multipartで/form-data提交"> </form> <p><strong>注意：</strong>Internet Explorer 9及以前のIEバージョンでは、inputタグのformenctype属性をサポートしていません。</p> </body> </html>テストを見て‹/›
formmethod 属性はフォームの提交方法を定義します。
formmethod 属性は <form> 元素の method 属性をオーバーライドします。
注意: この属性は type="submit" と type="image" と組み合わせて使用できます。
フォームの提交方法を再定義する例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提出"> <input type="submit" formmethod="post" formaction="demo-form.php" value="POST メソッドで提交を使用"> </form> <p><strong>注意：</strong>Internet Explorer 9及びそれ以前の IE 版では、input タグの formmethod 属性をサポートしていません。</p> </body> </html>テストを見て‹/›
novalidate 属性は boolean 属性です。
novalidate 属性は、<input> 元素がフォームの提交時に確認されないことを説明しています。
formnovalidate 属性は <form> 元素の novalidate 属性をオーバーライドします。
注意: formnovalidate 属性は type="submit" と一緒に使用されます
二つの提交ボタンのフォーム（使用と非使用の確認）:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="提交"><br> <input type="submit" formnovalidate="formnovalidate" value="確認なしに提交"> </form> <p><strong>注意：</strong>Internet Explorer 9及びそれ以前の IE 版や Safari では、input タグの formnovalidate 属性をサポートしていません。</p> </body> </html>テストを見て‹/›
formtarget 属性は、フォームデータが送信された後の表示を指定する名前やキーワードを指定します。
formtarget 属性は <form> 要素の target 属性をオーバーライドします.
注意: formtarget 属性は type="submit" と type="image" と組み合わせて使用されます.
二つの提交ボタンのフォームは、異なるウィンドウで表示されます:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="通常の提交"> <input type="submit" formtarget="_blank" value="新しいページに提交"> </form> <p><strong>注意：</strong>Internet Explorer 9およびより古い IE バージョンでは input タグの formtarget 属性をサポートしていません。</p> </body> </html>テストを見て‹/›
height と width 属性は image タイプの <input> タグの画像の高さと幅を指定します。
注意: height と width 属性は image タイプの <input> タグにのみ適用されます。
ヒント:画像は通常、高さと幅属性を同時に指定します。画像に高さと幅を設定すると、画像が必要とする空間 ページの読み込み時に保持されます。これらの属性がないと ブラウザは画像のサイズを知っておらず、予留できません 適切なスペース。画像の読み込み中にページレイアウト効果が変わる場合があります （画像が読み込まれた後でも）。
画像提交ボタンを定義しました。height と width 属性を使用しています:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="image" src="login_button.gif" alt="Submit"> </form> </body> </html>テストを見て‹/›
list 属性は、入力フィールドの datalist を指定します。datalist は入力フィールドのオプションリストです。
在 <datalist>中預定義 <input> 値:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong>/strong>Internet Explorer 9（更早 IE バージョン），Safari は datalist タグを サポートしません。</p> </body> </html>テストを見て‹/›
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
<input>要素の最小値と最大値の設定:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> 入力 1980-01-01 以前の日付: <input type="date" name="bday" max="1979-12-31><br> 入力 2000-01-01 以降の日付: <input type="date" name="bday" min="2000-01-02><br> 数量（1および5の間): <input type="number" name="quantity" min="1" max="5><br> <input type="submit"> </form> <p><strong>注意:</strong>/strong>Internet Explorer 9及び以前のIEバージョン、Firefoxではinputタグのmaxおよびmin属性をサポートしていません。</p> <p><strong>注意:</strong>/strong> Internet Explorer 10IEではmaxおよびmin属性が入力日付と時間をサポートしていません。 10 これらの入力タイプをサポートしていません。</p> </body> </html>テストを見て‹/›
multiple属性はboolean属性です。
multiple属性は<input>要素内で複数の値を選択可能にします。
注意: multiple属性は以下の<input>タグのタイプに適用されます：emailおよびfile:
複数のファイルをアップロード:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> 画像を選択: <input type="file" name="img" multiple> <input type="submit"> </form> <p>1枚または複数の画像を選択してください。</p> <p><strong>注意:</strong>/strong> Internet Explorer 9及び以前のIEバージョンでは、inputタグのmultiple属性をサポートしていません。</p> </body> </html>テストを見て‹/›
pattern属性は<input>要素の値を検証するための正規表現を説明しています。
注意:pattern属性は以下の<input>タグのタイプに適用されます：text、search、url、tel、email、およびpassword。
ヒント：は全体的に使用されます title 属性はパターンを説明しています。
以下の例では、数字や特殊文字を含まない3文字のテキストフィールドのみを表示しています：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基礎教程(oldtoolbag.com)</title>/title>
</head>
<body>
<form action="demo-form.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3" title="Three letter country code">
<input type="submit">
</form>
<p><strong>注意:</strong>/strong> Internet Explorer 9及以前のIEバージョン、またはSafariではinputタグのpattern属性をサポートしていません。</p>
</body>
</html>テストを見て‹/›placeholder属性は、入力フィールドが期待する値を説明するヒント（ヒント）を提供します。
短いヒントは、ユーザーが値を入力する前に入力フィールドに表示されます。
注意: placeholder属性は以下の<input>タグのタイプに適用されます：text, search, url, telephone, email そして password。
inputフィールドのヒントテキストt:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> <input type="text" name="fname" placeholder="First name"><br> <input type="text" name="lname" placeholder="Last name"><br> <input type="submit" value="提出"> </form> <p><strong>注意：</strong>Internet Explorer 9及びより古いIEバージョンではinputタグのplaceholder属性をサポートしていません。</p> </body> </html>テストを見て‹/›
required属性はboolean属性です。
required属性は、入力フィールドが提出前に必ず入力される必要があることを定義します（空ではありません）。
注意:required属性は以下の<input>タグのタイプに適用されます：text, search, url, telephone, email, password, date pickers, number, checkbox, radio そして file。
空のinputフィールドはありません:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> Username: <input type="text" name="usrname" required> <input type="submit"> </form> <p><strong>注意：</strong>Internet Explorer 9及びより古いIEバージョン、またはSafariではinputタグのrequired属性をサポートしていません。</p> </body> </html>テストを見て‹/›
step属性は入力フィールドの合法な数字の間隔を定義します。
step="3「」の場合、合法な数は -3、0、3、6 など
ヒント： step属性は以下のものと一緒に使用できます: max と min属性は範囲値を作成します。
注意: step属性は以下のtypeタイプと一緒に使用されます: number, range, date, datetime, datetime-local, month, time そして week.
規定inputステップ長度為3：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎教程(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> <input type="number" name="points" step="3"> <input type="submit"> </form> <p><strong>注意：</strong>Internet Explorer 9及び以前のIEバージョン、またはFirefoxはinputタグのstep属性をサポートしていません。</p> </body> </html>テストを見て‹/›
| タグ | 説明 |
| <form> | form フォームを定義 |
| <input> | input フィールドを定義 |