value属性
value属性は、入力フィールドの初期値を指定します。
例
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
»それを自分で試してみてください readonly属性
readonly属性は、入力フィールドが読み取り専用であることを指定します(cannot be changed) 。
例
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
»それを自分で試してみてください readonly属性は、値を必要としません。 それは=「読み取り専用」読み取り専用の書き込みと同じです。
disabled属性
disabled属性は、入力フィールドが無効になっていることを指定します。
無効な要素は非使用可能と非クリッカブルです。
無効要素が提出されることはありません。
例
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
»それを自分で試してみてください disabled属性が値を必要としません。 それは「無効」=無効の書き込みと同じです。
size属性
size属性は、サイズを指定します(in characters)の入力フィールドに:
例
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
»それを自分で試してみてください maxlength属性
maxlength属性は、入力フィールドの最大長を指定します。
例
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
»それを自分で試してみてください maxlength属性、入力制御は、文字の許可された数より多くを受け入れることはありません。
属性には、任意のフィードバックを提供していません。 ユーザーに警告する場合は、JavaScriptコードを記述する必要があります。
入力制限は万全ではありません。 JavaScriptが違法な入力を追加するための多くの方法を提供します。
安全入力を制限するには、制限が受信機によってチェックされなければならない(the server)にも。
HTML5の属性
HTML5は、追加followingの属性を<input> :
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
そしてfollowingの属性<form>
- autocomplete
- novalidate
autocomplete属性
autocomplete属性は、フォームや入力フィールドが持っているかどうかを指定しautocompleteオンまたはオフに。
ときにautocomplete 、上でユーザーが以前に入力した値に基づいて、ブラウザに自動的に完了した値です。
Tip:持っていることが可能であるautocomplete "on"フォームの、そして"off" 、特定の入力フィールド、またはその逆のために。
autocomplete属性は、と連携し<form>と次<input>タイプのtext, search, url, tel, email, password, datepickers, range, and color 。
例
HTMLフォームautocompleteに(and off for one input field) :
<form action="action_page.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>
»それを自分で試してみてください ヒント:一部のブラウザでは、アクティブにする必要がありautocomplete仕事に、このための機能を。
novalidate属性
novalidate属性がある<form>属性。
存在する場合、 novalidate提出されたときにフォームデータを検証すべきではないことを指定します。
例
フォームを送信するに検証されていないことを示します:
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
»それを自分で試してみてください autofocus属性
autofocus属性は論理属性です。
存在する場合、それがあることを指定<input>要素は、自動的にページのロード時に焦点を当てて取得する必要があります。
例
ましょう"First name"入力フィールドが自動的にページのロード時にフォーカスを取得:
First name:<input type="text" name="fname" autofocus>
»それを自分で試してみてください form属性
form属性は、一の以上のフォームを指定<input>要素が属します。
Tip:複数のフォームを参照のスペース区切りのリストを使用するにはform ids 。
例
input fieldのHTMLフォームの外側に位置する(but still a part of the form) 。
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
»それを自分で試してみてください formaction属性
formaction属性は、フォームが送信されたときに入力制御を処理するファイルのURLを指定します。
formaction属性が優先されますactionの属性<form>要素を。
formaction属性は、「送信」および=「画像」を入力=タイプで使用されます。
例
異なるアクションを持つ2つの送信ボタンを持つHTMLフォーム、:
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>
»それを自分で試してみてください formenctype属性
formenctype属性は、サーバーにそれを提出するときに、フォームデータをエンコードする方法を指定する(only for forms with method="post" ) 。
formenctype属性が優先されますenctypeの属性<form>要素を。
formenctype属性が一緒に使用されるtype="submit"とtype="image" 。
例
送信form-dataデフォルト符号化される(the first submit button) 、およびとしてエンコード"multipart/form-data" (the second submit button) :
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
»それを自分で試してみてください formmethod属性
formmethod属性は、送信するためのHTTPメソッドを定義しform-dataアクションURLにします。
formmethod属性が優先されますmethodの属性<form>要素を。
formmethod属性を一緒に使用することができますtype="submit"とtype="image" 。
例
第二送信ボタンはフォームのHTTPメソッドをオーバーライドします。
<form action="action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST">
</form>
»それを自分で試してみてください formnovalidate属性
novalidate属性は論理属性です。
存在する場合、それがあることを指定し<input>送信したときに要素を検証すべきではありません。
formnovalidate属性が優先されますnovalidateの属性<form>要素を。
formnovalidate属性を一緒に使用することができtype="submit" 。
例
2つの送信ボタンを持つフォーム(with and without validation) :
<form action="action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
»それを自分で試してみてください formtarget属性
formtarget属性には、名前やフォームの送信後に受信された応答を表示する場所を示すキーワードを指定します。
formtarget属性が優先されますtargetの属性<form>要素を。
formtarget属性は、タイプ=「送信」および=「画像」と入力して使用することができます。
例
異なるターゲットウィンドウを持つ2つの送信ボタンを持つフォーム、:
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
»それを自分で試してみてください heightとwidth属性
heightと幅の属性は、高さと幅を指定する<input>要素。
heightとwidthの属性のみで使用されている<input type="image">
常に画像のサイズを指定します。 ブラウザのサイズを知らない場合は、画像の読み込みながら、ページが点滅します。
例
高さと幅の属性を持つ、送信ボタンとして画像を定義します。
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
»それを自分で試してみてください list属性
list属性が指す<datalist>のための事前定義されたオプションが含まれている要素<input>要素。
例
<input>で事前定義された値を持つ要素<datalist> :
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
»それを自分で試してみてください minとmaxの属性
minとmaxための最小値と最大値を指定属性<input>要素。
minとmax以下の入力タイプと作業属性number, range, date, datetime, datetime-local, month, time and week 。
例
<入力>最小値と最大値を持つ要素:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
»それを自分で試してみてください multiple Attribute
multiple属性は論理属性です。
存在する場合、それはユーザーが複数の値を入力することが許されることを指定し<input>要素。
multiple :属性は、次の入力タイプで動作しemail 、およびfile 。
例
複数の値を受け入れ、ファイルアップロードフィールド:
Select images: <input type="file" name="img" multiple>
»それを自分で試してみてください pattern属性
pattern属性は、正規表現を指定<input>要素の値が照合されています。
pattern :属性は、次の入力タイプで動作するtext, search, url, tel, email, and password 。
ヒント:グローバル使用タイトルのユーザーを支援するためのパターンを記述するための属性を。
Tip:詳細については、こちらをご覧ください正規表現私たちのJavaScriptのチュートリアルで。
例
唯一の3文字を含めることができ、入力フィールド(no numbers or special characters) :
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
»それを自分で試してみてください placeholder属性
placeholder属性は、入力フィールドの期待値について説明ヒント指定(a sample value or a short description of the format) 。
ユーザが値を入力する前に、ヒントは、入力フィールドに表示されています。
placeholder :属性は、次の入力タイプで動作するtext, search, url, tel, email, and password 。
required属性
required属性は論理属性です。
存在する場合、それは、入力フィールドがフォームを送信する前に記入しなければならないことを指定します。
required :属性は、次の入力タイプで動作するtext, search, url, tel, email, password, date pickers, number, checkbox, radio, and file 。
step属性
step属性は、のために法的な数の間隔を指定し<input>要素。
例:ステップ= "3" の場合、法的番号等-3、0、3、6、とすることができます
Tip: step属性は、一緒に使用することができmaxとmin正当な値の範囲を作成する属性。
step :属性は、次の入力タイプで動作number, range, date, datetime, datetime-local, month, time and week 。