accept属性
accept属性は、フォームが送信できるファイル形式を指定します。
<input type="file" accept=".jpg, .png">タグのfileタイプでのみ使用でき、カンマで区切られた1つ以上のファイルタイプのリストを記述します。特定のメディアタイプのファイルをすべて許可するには、accept=”image/*”を使用します。
autofocus属性
autofocus属性は、ページのロード時に、指定した要素にフォーカスをあてるかどうかを指定します。
<input type="text" autofocus>autofocus属性は、ドキュメントまたはダイアログ内の1つの要素にのみ指定することができ、複数の要素に適用すると、最初の要素にフォーカスがあたります。
inputmode属性
inputmode属性は、要素またはそのコンテンツを編集する際に、ユーザが入力するデータの種類を示唆します。
<input type="text" inputmode="url">
<input type="text" inputmode="email">
<input type="text" inputmode="numeric">主にスマホ向けの機能、入力に適した種類のソフトウェアキーボードを表示します。
pattern属性
pattern属性は、フォームの送信時に、<input>の値をチェックするための正規表現を指定します。
<input name="username" id="username" pattern="[A-Za-z0-9]+">required属性
required属性は、フォームを送信する前に、その要素に入力する必要があることをブラウザに知らせます。いわゆる必須項目です。
<form action="/send_form.js">
Username: <input type="text" name="username" required>
<input type="submit">
</form>autocomplete属性
autocomplete属性は、フォームでメールアドレスや電話番号などを入力する際に、ブラウザによる自動補完機能を使用します。
<input name="credit-card-number" id="credit-card-number" autocomplete="off">
<input type="text" name="name" autocomplete="name">autocomplete属性を使用する際には、nameまたはidを記述する必要があり、<input>のsubmit型も必要です。
代表的な項目は以下の通り。
- name : 姓名
- family-name : 姓
- given-name : 名
- email : メールアドレス
- postal-code : 郵便番号
- address-level1 : 都道府県
- address-level2 : 市区町村
- address-line1 : 番地・マンション名（1行目）
- address-line2 : 番地・マンション名（2行目）
- organization : 会社名
- off : 自動入力を無効にする
その他、生年月日や性別、クレジット情報の項目などもある。
autocomplete属性は、セキュリティの観点からoffにしているウェブサイトも多いが、現在はほとんどのブラウザーで無視されてしまうため、offに設定してもあまり意味がない。自動入力を使用しているユーザーがいるのであれば、そのユーザーが利用しやすいように設定しておくべきである。
その他注意点は下記の通り。
- 都道府県はselect要素だと、自動入力が効かないことがあるため、input要素にするのが無難
- 生年月日の自動入力はSafariのみ有効。Chromeは未対応
multiple属性
multiple属性は、ユーザーがフォームで複数の値を選択できます。
<input type="file" multiple>emailとfileの入力型と<select>に対して有効で、ユーザーが複数の値を選択する方法はフォームコントロールに依存する。
readonly属性
readonly属性は、入力フィールドが読み取り専用であることを指定します。
<input type="text" id="sports" name="sports" value="golf" readonly>ユーザーは、タブで移動したり、選択してハイライトにしたり、テキストをコピーすることができます。これらのアクションを禁止するには、代わりにdisabled属性を使用します。
