HTML入門 | HTML5の開始 | HTML5 input要素の属性(attributes)

HTML5 form要素の属性

HTML5で新しく追加されたform要素の属性は次のとおりである。

autocomplete
novalidate

HTML5 input要素の属性

HTML5で新しく追加されたinput要素の属性は次のとおりである。

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

autocomplete属性

autocomplete属性は、form要素またはinput要素に入力された情報を自動保存するかどうかを指定する。この属性の値がonに設定されると、ブラウザーはユーザーが入力する情報を自動的に保存する。その後は、入力される値を保存済みの情報に基づいて自動補完する。

この属性は、次のinputタイプでのみ使用できる。

text, search, url, tel, email, password, datepickers, range, color

<form action="/" autocomplete="on">
  名前 : <input type="text" name="name"><br>
  メール : <input type="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>

コード実行

novalidate属性

novalidate属性はinput要素の属性ではなく、form要素の属性である。この属性は、入力した情報(data)を送信するとき、その情報を検証するかどうかを指定する。urlタイプやemailタイプのように自動的に検証を行うinputタイプにこの属性を記述すると、検証を行わない。つまり、この属性が使用されたform要素から送信された情報(data)は、必ずサーバー側で別途検証しなければならない。

<form action="/" novalidate>
  メール : <input type="email" name="email">
  <input type="submit">
</form>

コード実行

novalidate属性はInternet Explorer 9以前、およびSafari 10ではサポートされない。

autofocus属性

autofocus属性は、Webページが読み込まれたとき、属性が適用されたinput要素に自動的にフォーカス(focus)が当たるようにする。

<form action="/examples/media/request.php">
    ユーザー : <input type="text" name="username"><br>
    パスワード : <input type="password" name="password" autofocus><br><br>
</form>

autofocus属性はInternet Explorer 9以前ではサポートされない。

form属性

form属性は、そのinput要素の位置に関係なく、所属するform要素を指定する。所属させるform要素のid属性値を空白で区切ることで、2つ以上のform要素に所属させることもできる。

<form action="/examples/media/request.php" id="user">
    ユーザー : <input type="text" name="username"><br><br>
</form>
...
パスワード : <input type="password" name="password" form="user">

form属性はInternet Explorerではサポートされない。

formaction属性

formaction属性は、入力した情報(data)を送信するとき、その情報が渡されるサーバー側ファイルを指定する。つまり、formaction属性はform要素のaction属性を上書きする。この属性を使うと、入力された情報を渡すサーバー側ファイルをinput要素で変更できる。

この属性はsubmitタイプとimageタイプでのみ使用できる。

<form action="/examples/media/request.php">
    ユーザー : <input type="text" name="username"><br>
    パスワード : <input type="password" name="password"><br><br>
    <input type="submit" value="管理者権限で送信" formaction="/examples/media/request_admin.php"><br>
</form>

formaction属性はInternet Explorer 9以前ではサポートされない。

formenctype属性

formenctype属性は、入力した情報(data)を送信するときに暗号化する方法を指定する。つまり、formaction属性はform要素のenctype属性を上書きする。

formenctype属性は、form要素のmethod属性がpostの場合にのみ適用される。この属性はsubmitタイプとimageタイプでのみ使用できる。

<form action="/examples/media/request_enctype.php" method="post">
    ユーザー名を入力してください : <input type="text" name="username"><br><br>
    <input type="submit" value="暗号化して送信" formenctype="multipart/form-data"><br>
</form>

formenctype属性はInternet Explorer 9以前ではサポートされない。

formmethod属性

formmethod属性は、入力した情報(data)を送信するときに使用するHTTPメソッド(method)を指定する。つまり、formmethod属性はform要素のmethod属性を上書きする。

この属性はsubmitタイプとimageタイプでのみ使用できる。

<form action="/examples/media/request.php" method="get">
    ユーザー名を入力してください : <input type="text" name="username"><br><br>
    <input type="submit" value="post方式で送信" formmethod="post"><br>
</form>

formmethod属性はInternet Explorer 9以前ではサポートされない。

formnovalidate属性

formnovalidate属性は、入力した情報(data)を送信するとき、その情報が有効かどうかを検査しないことを指定する。つまり、formnovalidate属性はform要素のnovalidate属性を上書きする。

この属性はsubmitタイプでのみ使用できる。

<form action="/examples/media/request.php">
    よく訪れるサイトのURLアドレスを入力してください : <input type="url" name="url"><br><br>
    <input type="submit" value="novalidate方式で送信" formnovalidate><br>
</form>

formnovalidate属性はSafari、Internet Explorer 9以前ではサポートされません。

formtarget属性

formtarget属性は、入力した情報(data)を送信した後、その結果として受け取った応答ページをどこに表示するかを指定する。つまり、formtarget属性はform要素のtarget属性を上書きする。

この属性はsubmitタイプとimageタイプでのみ使用できる。


<form action="/examples/media/request.php">
    ユーザー名を入力してください : <input type="text" name="username"><br><br>
    <input type="submit" value="応答画面を新しいウィンドウに表示" formtarget="_blank"><br>
</form>

formtarget属性はInternet Explorer 9以前ではサポートされない。

heightとwidth属性

<input>タグのtype属性が"image"の場合、height属性とwidth属性を使って画像の高さと幅を指定できる。したがって、この属性はimageタイプでのみ使用できる。また、画像をクリックすると、クリックした場所のx座標とy座標がxとyという名前で一緒に送信される。

<form action="/examples/media/request.php">
    ユーザー : <input type="text" name="username"><br>
    パスワード : <input type="password" name="password" autofocus><br><br>
    <input type="image" src="/examples/images/img_penguin.png" alt="送信" height="26" width="26">
    画像をクリックすると送信されます。
</form>

list属性

list属性は、そのinput要素に対する事前定義済みオプションリストを設定するdatalist要素に関連する。input要素のlist属性値がdatalist要素のid属性値と一致して初めて連結される。

<form action="/examples/media/request.php">
    <input list="lectures" name="lecture">
        <datalist id="lectures">
            <option value="HTML">
            <option value="CSS">
        </datalist>
</form>

list属性はSafari、Internet Explorer 9以前ではサポートされない。

minとmax属性

min属性とmax属性は、input要素に入力できる最小値と最大値を指定する。

この属性は、次のinputタイプでのみ使用できる。

number, range, date, time, datetime-local, month, weekタイプ

<form action="/examples/media/request.php">
    <input type="date" name="theday" min="1977-01-01" max="2020-12-31"><br><br>
    <input type="submit" value="送信">
</form>

min属性とmax属性はFirefox、Internet Explorer 9以前ではサポートされない。

multiple属性

multiple属性は、ユーザーがinput要素に2つ以上の値を入力することを許可する。

この属性はemailタイプとfileタイプでのみ使用できる。

<form action="/examples/media/request.php">
    <input type="file" name="uploadfile" multiple><br><br>
    <input type="submit" value="送信">
</form>

multiple属性はInternet Explorer 9以前ではサポートされない。

pattern属性

pattern属性は、input要素に入力された値を検査するための正規表現(regular expression)を指定する。正規表現とは、文字列の中から特定の規則を持つ文字列の集合を見つけるための検索パターンを意味する。

この属性は、次のinputタイプでのみ使用できる。

text, password, email, tel, urlタイプ

<form action="/examples/media/request.php">
    <input type="email" name="email"
        pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" title="メール形式">
</form>

上の例で使用された正規表現の意味は次のとおりである。

[a-zA-Z0-9] : 英小文字、英大文字、数字のいずれかが個数に関係なく現れることができる。
[@] : ‘@‘文字だけが現れなければならない。
[.] : ‘.‘文字だけが現れなければならない。
[.]* : ‘.‘文字が現れてもよく、現れなくてもよい。
[a-zA-Z0-9]* : 英小文字、英大文字、数字のいずれかが個数に関係なく現れてもよく、現れなくてもよい。

したがって、上のような正規表現を使用すると、その文字列がメール形式に合う文字列かどうかを確認できる。

pattern属性はSafari、Internet Explorer 9以前ではサポートされない。

placeholder属性

placeholder属性は、input要素に入力されるべき値についてのヒントを提供する。このヒントは例示であることも、入力形式についての説明であることもある。placeholder属性値は、その入力フィールドにフォーカスが当たると表示されなくなる。

この属性は、次のinputタイプでのみ使用できる。

text, password, email, tel, url, searchタイプ

<form action="/examples/media/request.php">
    ユーザー : <input type="text" name="username" placeholder="山田太郎"><br>
    パスワード : <input type="password" name="password" placeholder="1234"><br><br>
</form>

placeholder属性はInternet Explorer 9以前ではサポートされない。

required属性

required属性は、必ず入力しなければならない必須input要素を指定する。この属性が設定されたすべてのinput要素に入力値が存在して初めて、サーバーへ送信(submit)できる。

<form action="/examples/media/request.php">
    名前 : <input type="text" name="name" required> (名前は必ず入力してください。)<br>
    年齢 : <input type="number" name="age" min="1" max="99"><br><br>
</form>

required属性はSafari、Internet Explorer 9以前ではサポートされない。

step属性

step属性は、input要素に入力できる数値の間隔を指定する。たとえば、step属性値が2の場合、入力が許可される数値は…, -4, -2, 0, 2, 4,…となる。

この属性は、次のinputタイプでのみ使用できる。

number, range, date, time, datetime-local, month, weekタイプ

<form action="/examples/media/request.php">
    あなたが一番好きな数字はいくつですか。(ただし、-30から30の間で5刻みで選んでください。)<br><br>
    <input type="number" name="favnum" min="-30" max="30" step="5"><br><br>
</form>

step属性はInternet Explorer 9以前ではサポートされない。