value 属性は、入力フィールドの初期値を指定します。
<form action=""> First name:<br> <input type="text" name="firstname" value="Bill"> <br> Last name:<br> <input type="text" name="lastname"> </form>
readonly 属性は、入力フィールドが読み取り専用 (変更できない) であることを指定します。
<form action=""> First name:<br> <input type="text" name="firstname" value="Bill" readonly> <br> Last name:<br> <input type="text" name="lastname"> </form>
readonly 属性には値は必要ありません。 これは、readonly="readonly" と同等です。
disabled 属性は、入力フィールドが無効であることを指定します。
無効な要素は使用できず、クリックすることもできません。
無効な要素は送信されません。
<form action=""> First name:<br> <input type="text" name="firstname" value="Bill" disabled> <br> Last name:<br> <input type="text" name="lastname"> </form>
disabled 属性には値は必要ありません。 これは、disabled="disabled"と同等です。
size 属性は、入力フィールドのサイズ (文字数) を指定します。
<form action=""> First name:<br> <input type="text" name="firstname" value="Bill" size="40"> <br> Last name:<br> <input type="text" name="lastname"> </form>
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 には、無効な入力を追加するさまざまな方法が用意されています。 入力を安全に制限するには、受信者 (サーバー) も制限をチェックする必要があります。
HTML5 は、次の属性を <input> に追加します:
そして、必要な属性を <form> に追加します。
autocomplete 属性は、フォームまたは入力フィールドをオートコンプリートするかどうかを指定します。
オートコンプリートが有効になっている場合、ブラウザはユーザーの以前の入力に基づいて値を自動的に入力します。
ヒント: 特定の入力フィールドをオフに設定しながらフォームのオートコンプリートをオンに設定することも、その逆も可能です。
autocomplete 属性は、<form> および次の <input> タイプ (text、search、url、tel、email、password、datepickers、range、color ) に適用されます。
オートコンプリートがオンになっている HTML フォーム (1 つの入力フィールドは off):
<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>
ヒント: ブラウザによっては、オートコンプリートを手動で有効にする必要がある場合があります。
novalidate 属性は <form> 属性に属します。
設定されている場合、novalidate は、フォームの送信時にフォーム データを検証しないことを指定します。
検証なしでフォームを送信するように指示します。
<form action="action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>
autofocus 属性はブール属性です。
設定されている場合、ページの読み込み時に <input> 要素が自動的にフォーカスを取得するように指定します。
"First name" 入力フィールドがページ読み込みに自動的に焦点を当てるようにします:
First name:<input type="text" name="fname" autofocus>
form 属性は、<input> 要素が属する 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">
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.php" value="Submit as admin"> </form>
formenctype 属性は、サーバーに送信されるときにフォームデータをエンコードする方法を指定します (method="post" のフォームの場合のみ)。
formenctype 属性は、<form> 要素の enctype 属性をオーバーライドします。
formenctype 属性は、type="submit" および type="image" で機能します。
デフォルトのエンコーディングとフォームデータを "multipart/form-data"としてエンコードして送信します（2 番目の送信ボタン）。
<form action="demo_post_enctype.php" 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 属性は、アクション URL にフォームデータを送信するために使用される HTTP メソッドを定義します。
formmethod 属性は、<form> 要素のメソッド属性をオーバーライドします。
formmethod 属性は、type="submit" および type="image" で機能します。
2 番目の送信ボタンは、フォームの 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.php" value="Submit using POST"> </form>
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>
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 属性は、<input> 要素の高さと幅を指定します。
height 属性と width 属性は、<input type="image"> にのみ使用されます。
注: 画像のサイズを必ず指定してください。 ブラウザが画像のサイズを認識していない場合、画像の読み込み中にページがちらつきます。
画像を送信ボタンとして定義し、height 属性と width 属性を設定します。
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
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 属性は、<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">
multiple属性はブール属性です。
設定すると、ユーザーが <input> 要素に複数の値を入力できることを指定します。
multiple 属性は、入力タイプ email と filele に適用されます。
複数の値を受け入れるファイル アップロード フィールド:
Select images: <input type="file" name="img" multiple>
pattern 属性は、<input> 要素の値をチェックするために使用される正規表現を指定します。
パターン属性は、テキスト、検索、URL、電話番号、電子メール、パスワードの入力タイプに適用されます。
ヒント: ユーザーを支援するモードを説明するには、グローバル タイトル属性を使用してください。
ヒント: 正規表現について詳しくは、JavaScript チュートリアルをご覧ください。
入力フィールドには 3 文字のみを含めることができます (数字や特殊文字は含めることはできません):
Country code:
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
placeholder 属性は、入力フィールドの期待値を説明するヒント (サンプル値または形式に関する短い説明) を指定します。
ユーザーが値を入力する前に、入力フィールドにヒントが表示されます。
placeholder 属性は、text、search、url、tel、email、passwordd の入力タイプに適用されます。
プレースホルダー テキストを含む入力フィールド:
<input type="text" name="fname" placeholder="First name">
required 属性はブール属性です。
設定すると、フォームを送信する前に入力フィールドに入力する必要があることを指定します。
必須属性は、text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file の入力タイプに適用されます。
必須入力フィールド:
Username: <input type="text" name="usrname" required>
step 属性は、<input> 要素の有効な数値間隔を指定します。
例: step="3" の場合、有効な数値は -3、0、3、6 などになります。
ヒント: step 属性を max 属性および min 属性とともに使用して、有効な値の範囲を作成できます。
step 属性は、numberr、range、date、datetime、datetime-local、month、time、week の入力タイプに適用されます。
特定の有効な数値間隔を含む入力フィールド:
<input type="number" name="points" step="3">