HTML Input 属性

value 属性

value 属性が入力フィールドの初期値を定義します：

例

<form action="">
 名前:<br>
<input type="text" name="firstname" value="Bill">
<br>
 姓:<br>
<input type="text" name="lastname">
</form>

自分で試してみる

readonly 属性

readonly 属性が入力フィールドが読み取り専用（変更不可）であることを定義します：

例

<form action="">
 名前:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 姓:<br>
<input type="text" name="lastname">
</form>

自分で試してみる

readonly 属性には値が必要ありません。readonly="readonly"と同等です。

disabled 属性

disabled 属性が入力フィールドが無効化されていることを定義します。

無効化された要素は使用不能でクリックもできません。

無効化された要素は送信されません。

例

<form action="">
 名前:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 姓:<br>
<input type="text" name="lastname">
</form>

自分で試してみる

disabled 属性には値が必要ありません。disabled="disabled"と同等です。

size 属性

size 属性が入力フィールドのサイズ（文字数で表されます）：

例

<form action="">
 名前:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 姓:<br>
<input type="text" name="lastname">
</form>

自分で試してみる

maxlength 属性

maxlength 属性が入力フィールドに許可される最大長さを定義します：

例

<form action="">
 名前:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 姓:<br>
<input type="text" name="lastname">
</form>

自分で試してみる

maxlength 属性が設定されている場合、入力コントロールは許可された文字数を超える文字を受け入れません。

この属性はユーザーにフィードバックを提供しません。ユーザーに通知が必要な場合は、JavaScript コードを書く必要があります。

注釈：入力制限は完璧ではありません。JavaScript は不正な入力を追加するための多くの方法を提供します。安全に入力を制限するには、受信者（サーバー）が制限を同時に確認する必要があります。

HTML5 属性

HTML5 では <input> に以下の属性が追加されました：

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height および width
  • list
  • min および max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

および以下の属性を <form> に追加します：

  • autocomplete
  • novalidate

autocomplete 属性

autocomplete 属性は、フォームまたは入力フィールドが自動的に完了すべきかどうかを指定します。

自動完成が有効な場合、ブラウザはユーザーの前の入力値に基づいて自動で値を入力します。

ヒント：フォームの autocomplete を off に設定して、特定の入力フィールドを off に設定することもできます。

autocomplete 属性は <form> および以下の <input> タイプに適用されます：text、search、url、tel、email、password、datepickers、range、color。

例

自動完成が有効な HTML フォーム（特定の入力フィールドが off）：

<form action="action_page.php" autocomplete="on">
   名前:<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>

自分で試してみる

ヒント：在某些浏览器中，您也许需要手动启用自动完成功能。

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> 元素所属的一个或多个表单。

ヒント：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

例

输入字段位于 HTML 表单之外（但仍属表单）：

<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 属性覆盖 <form> 元素的 action 属性。

formaction 属性适用于 type="submit" 以及 type="image"。

例

拥有两个两个提交按钮并对于不同动作的 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 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。

formenctype 属性覆盖 <form> 元素的 enctype 属性。

formenctype 属性は type="submit" および type="image" に適用できます。

例

デフォルトのエンコーディングおよびエンコーディングが "multipart/form-data"（二つ目の送信ボタン）のフォームデータ（form-data）を送信します：

<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 属性は、アクション URL にフォームデータ（form-data）を送信するための HTTP メソッドを定義します。

formmethod 属性は <form> 要素の method 属性を覆します。

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 属性は <form> 要素の novalidate 属性を覆します。

formnovalidate 属性は type="submit" に使用できます。

例

持ち合わせる二つの送信ボタンのフォーム（確認あり・なし）：

<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 属性は <form> 元素の target 属性をオーバーライドします。

formtarget 属性は type="submit" と type="image" とともに使用できます。

例

このフォームには、異なるターゲットウィンドウに対応する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 と width 属性は <input> 元素の高さと幅を指定します。

height と width 属性は <input type="image"> にのみ使用されます。

注釈：常に画像のサイズを指定してください。ブラウザが画像のサイズを把握していない場合、ページは画像の読み込み中にフラッシュします。

例

画像を提交ボタンとして定義し、height と width 属性を設定します：

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

自分で試してみる

list 屬性

list 屬性参照の <datalist> 元素に <input> 元素の預定オプションが含まれています。

例

使用 <datalist> 設定預定義值的 <input> 元素：

<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、weekなどの入力タイプに適用されます。

例

最小値と最大値を持つ<input> 元素：

1980-01-01 以前の日付を入力してください：
<input type="date" name="bday" max="1979-12-31">
 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 属性

multiple 属性はボルン属性です。

設定された場合、ユーザーが<input> 元素に1以上の値を入力できることを指定します。

multiple 属性は、以下の入力タイプに適用されます：email と file。

例

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

画像を選択してください：<input type="file" name="img" multiple>

自分で試してみる

pattern 属性

pattern 属性は、<input> 元素の値をチェックするための正規表現を定義します。

pattern 属性は、以下の入力タイプに適用されます：text、search、url、tel、email、password。

ヒント：ユーザーを助けるために、タイトル属性を使用してパターンを説明してください。

ヒント：正規表現に関する詳細は、JavaScriptのチュートリアルを学んでください。

例

数字や特殊文字を含まない、3文字のアルファベットのみを含む入力フィールドです：

Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

自分で試してみる

placeholder 属性

placeholder 属性は、入力フィールドの予期される値を説明するためのヒント（サンプル値またはフォーマットの短い説明）を定義します。

このヒントは、ユーザーが値を入力する前に入力フィールドに表示されます。

placeholder 属性は以下の入力タイプに適用されます：text、search、url、tel、email そして password。

例

プレースホルダーテキストを持つ入力フィールド：

<input type="text" name="fname" placeholder="First name">

自分で試してみる

required 属性

required 属性はボルン属性です。

設定された場合、フォームを送信する前に入力フィールドが必須であることを指定します。

required 属性は以下の入力タイプに適用されます：text、search、url、tel、email、password、date pickers、number、checkbox、radio そして file。

例

必須の入力フィールド：

Username: <input type="text" name="usrname" required>

自分で試してみる

step 属性

step 属性は <input> 要素の合法な数字の間隔を指定します。

例：step="3" の場合、合法な数字は -3、0、3、6、などです。

ヒント：step 属性は max と min 属性とともに使用され、合法な値の範囲を作成します。

step 属性は以下の入力タイプに適用されます：number、range、date、datetime、datetime-local、month、time そして week。

例

具体的な合法な数字の間隔を持つ入力フィールド：

<input type="number" name="points" step="3">

自分で試してみる