HTML Input 属性

value 属性

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

readonly 属性

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

disabled 属性

disabled 属性は、入力フィールドが無効であることを指定します。

disabled 要素は、使用不可でクリックができません。また、フォームの送信時にはその値は送信されません。

size 属性

size 属性は、入力フィールドのサイズを文字数で指定します：

maxlength 属性

maxlength 属性は、入力フィールドの最大長を指定します：

maxlength 属性を使用すると、入力コントロールは、指定した数より多くの文字を受け付けません。

maxlength 属性は、フィードバックを提供しません。ユーザに警告する場合は、JavaScript コードを書く必要があります。

HTML5 属性

HTML5 では、次の属性が <input> に追加されています：

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

および、次の属性が <form> に追加されています：

• autocomplete
• novalidate

autocomplete 属性

autocomplete 属性は、フォームや入力フィールドにオートコンプリートを on するか off にするかを指定します：

オートコンプリートが on の時は、以前にユーザが入力したことのある値に基づいて、ブラウザが自動的に値を補完します。

チップ: フォームにオートコンプリートを "on" に、入力フィールドに "off" を、またはその逆を指定することができます。

autocomplete 属性は、フォームおよび、次の <input> タイプで動作します： text、search、url、tel、email、password、datepickers、range、color。

例

オートコンプリートがオン（そして、もう一方の入力フィールドが off ）の HTML フォーム：

<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>

Try it Yourself ❯

チップ: 一部のブラウザでは、これを動作させるためにオートコンプリート機能をアクティブにする必要があります。

novalidate 属性

novalidate 属性は、<form> 属性です。

novalidate が存在する場合、送信されたフォームデータを検証すべきではないことを指定します。

例

送信時にフォームの検証が必要でないことを示します：

<form action="action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

Try it Yourself ❯

autofocus 属性

autofocus 属性は、ブーリアン属性です。

存在する場合、ページのロード時に <input> 要素が自動的にフォーカスを取得するように指定します。

例

ページのロード時に、"First name" 入力フィールドへ自動的にフォーカスを取得させます：

First name:<input type="text" name="fname" autofocus>

Try it Yourself ❯

form 属性

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

チップ: 1 つ以上のフォームを参照するには、フォーム 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">

Try it Yourself ❯

formaction 属性

formaction 属性は、フォームが送信されたときに入力コントロールを処理するファイルの URL を指定します。

formaction 属性は、<form> 要素の action 属性をオーバーライドします。

formaction 属性は、type="submit" と type="image" で使用します。

例

異なるアクションを持った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.html"
  value="Submit as admin">
</form>

Try it Yourself ❯

formenctype 属性

formenctype 属性は、サーバに送信するときに、フォームデータをどのようにエンコードするかを指定します (method="post" を持つフォームのみ)。

formenctype 属性は、<form> 要素の enctype 属性をオーバーライドします。

formenctype 属性は、type="submit" と type="image" で使用します。

例

Send form-data that is default encoded (the first submit button), and encoded as "multipart/form-data" (the second submit button):

<form action="demo_post_enctype.html" 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>

Try it Yourself ❯

formmethod 属性

formmethod 属性は、フォームデータをアクション URL へ送信するための HTTP メソッドを定義します。

formmethod 属性は、<form> 要素の method 属性をオーバーライドします。

formmethod 属性は、type="submit" と type="image" で使用します。

例

second submit button overrides the HTTP method of the form:

<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.html"
  value="Submit using POST">
</form>

Try it Yourself ❯

formnovalidate 属性

novalidate 属性は、ブーリアン属性です。

存在する場合、送信時に <input> 要素の検証を行わないことを指定します。

formnovalidate 属性は、<form> 要素の novalidate 属性をオーバーライドします。

formnovalidate 属性は、type="submit" で使用します。

例

2 つの送信ボタンを持つフォーム（検証付きとなし）：

<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>

Try it Yourself ❯

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>

Try it Yourself ❯

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

Try it Yourself ❯

list 属性

list 属性は、<input> 要素用に予め定義された選択肢を含んでいる <datalist> 要素を参照します。

例

<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>

Try it Yourself ❯

min と max 属性

min と max 属性は、<input> 要素の最小値と最大値を指定します。

min と max 属性は、次の入力タイプで動作します：number、range、date、datetime、datetime-local、month、time および week。

例

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

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

Try it Yourself ❯

multiple 属性

multiple 属性は、ブーリアン属性です。

存在する場合、複数の値の <input> 要素への入力を、ユーザへ許可することを指定します。

multiple 属性は、次の入力タイプで動作します：email および file.

例

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

Select images: <input type="file" name="img" multiple>

Try it Yourself ❯

pattern 属性

pattern 属性は、<input> 要素をチェックするための正規表現を指定します：

pattern 属性は、次の入力タイプで動作します：text、search、url、tel、email および password。

チップ: ユーザ補助としてパターンを説明するためには、グローバル title 属性を使用してください。

チップ: 正規表現 の詳細を学習する場合は、 JavaScript チュートリアルをご覧ください。

例

3 文字（数字または特殊文字以外）だけを含むことができる入力フィールドです：

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

Try it Yourself ❯

placeholder 属性

placeholder 属性は、入力フィールドの期待値を説明するヒントを指定します (サンプル値、またはフォーマットの短い説明)。

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

placeholder 属性は、次の入力タイプで動作します：text、search、url、tel、email、and password.

例

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

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

Try it Yourself ❯

required 属性

required 属性は、ブーリアン属性です。

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

required 属性は、次の入力タイプで動作します：text、search、url、tel、email、password、date pickers、number、checkbox、radio および file。

例

必須入力フィールド：

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

Try it Yourself ❯

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

Try it Yourself ❯

練習問題を自分でテストしてください！

Exercise 1 ❯    Exercise 2 ❯    Exercise 3 ❯    Exercise 4 ❯