最新のWeb開発のチュートリアル

HTMLのInput属性


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

OperaSafariChromeFirefoxInternet Explorer

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提出されたときにフォームデータを検証すべきではないことを指定します。

OperaSafariChromeFirefoxInternet Explorer

フォームを送信するに検証されていないことを示します:

<form action="action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>
»それを自分で試してみてください

autofocus属性

autofocus属性は論理属性です。

存在する場合、それがあることを指定<input>要素は、自動的にページのロード時に焦点を当てて取得する必要があります。

OperaSafariChromeFirefoxInternet Explorer

ましょう"First name"入力フィールドが自動的にページのロード時にフォーカスを取得:

First name:<input type="text" name="fname" autofocus>
»それを自分で試してみてください

form属性

form属性は、一の以上のフォームを指定<input>要素が属します。

Tip:複数のフォームを参照のスペース区切りのリストを使用するにはform ids

OperaSafariChromeFirefoxInternet Explorer

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属性は、「送信」および=「画像」を入力=タイプで使用されます。

OperaSafariChromeFirefoxInternet Explorer

異なるアクションを持つ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"

OperaSafariChromeFirefoxInternet Explorer

送信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"

OperaSafariChromeFirefoxInternet Explorer

第二送信ボタンはフォームの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"

OperaSafariChromeFirefoxInternet Explorer

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属性は、タイプ=「送信」および=「画像」と入力して使用することができます。

OperaSafariChromeFirefoxInternet Explorer

異なるターゲットウィンドウを持つ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>
»それを自分で試してみてください

heightwidth属性

heightと幅の属性は、高さと幅を指定する<input>要素。

heightwidthの属性のみで使用されている<input type="image">

常に画像のサイズを指定します。 ブラウザのサイズを知らない場合は、画像の読み込みながら、ページが点滅します。

OperaSafariChromeFirefoxInternet Explorer

高さと幅の属性を持つ、送信ボタンとして画像を定義します。

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
»それを自分で試してみてください

list属性

list属性が指す<datalist>のための事前定義されたオプションが含まれている要素<input>要素。

OperaSafariChromeFirefoxInternet Explorer

<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>
»それを自分で試してみてください

minmaxの属性

minmaxための最小値と最大値を指定属性<input>要素。

minmax以下の入力タイプと作業属性number, range, date, datetime, datetime-local, month, time and week

OperaSafariChromeFirefoxInternet Explorer

<入力>最小値と最大値を持つ要素:

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

OperaSafariChromeFirefoxInternet Explorer

複数の値を受け入れ、ファイルアップロードフィールド:

Select images: <input type="file" name="img" multiple>
»それを自分で試してみてください

pattern属性

pattern属性は、正規表現を指定<input>要素の値が照合されています。

pattern :属性は、次の入力タイプで動作するtext, search, url, tel, email, and password

ヒント:グローバル使用タイトルのユーザーを支援するためのパターンを記述するための属性を。

Tip:詳細については、こちらをご覧ください正規表現私たちのJavaScriptのチュートリアルで。

OperaSafariChromeFirefoxInternet Explorer

唯一の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

OperaSafariChromeFirefoxInternet Explorer

プレースホルダーテキストで入力フィールド:

<input type="text" name="fname" placeholder="First name">
»それを自分で試してみてください

required属性

required属性は論理属性です。

存在する場合、それは、入力フィールドがフォームを送信する前に記入しなければならないことを指定します。

required :属性は、次の入力タイプで動作するtext, search, url, tel, email, password, date pickers, number, checkbox, radio, and file

OperaSafariChromeFirefoxInternet Explorer

必要な入力フィールド:

Username: <input type="text" name="usrname" required>
»それを自分で試してみてください

step属性

step属性は、のために法的な数の間隔を指定し<input>要素。

例:ステップ= "3" の場合、法的番号等-3、0、3、6、とすることができます

Tip: step属性は、一緒に使用することができmaxmin正当な値の範囲を作成する属性。

step :属性は、次の入力タイプで動作number, range, date, datetime, datetime-local, month, time and week

OperaSafariChromeFirefoxInternet Explorer

指定された法定数間隔で入力フィールド:

<input type="number" name="points" step="3">
»それを自分で試してみてください

練習で自分自身をテストします!

演習1» 演習2» 演習3» 演習4»