【HTML】input要素の属性を見直してみる

こんにちは、クリエイターブログです。今回はhtmlのinput要素の属性を見直してみたいと思います。

 

はじめに

フォームを作る際、入力制御をどの程度付けるか困ることが多いと思います。実装方法も表側ではhtml、javascript、裏側ではphp、cgiなどあり、html側で制御できる部分があれば色々と楽になることもあるでしょう。

まずはhtmlでどこまで出来るのか把握することが大事なので、良く使うものや新たに使えそうなのものを以下の開発者ドキュメントを参考に調べ直してみたいと思います。

<input>: 入力欄（フォーム入力）要素 – HTML: ハイパーテキストマークアップ言語 | MDN

 

以下から洗い出した各属性について紹介、簡単な説明をしていきます。

 

各属性について

autocomplete

入力欄の保管機能について詳細に設定することができ、ユーザーが入力した過去の値から提案する値を取得します。

name属性に依存してるので値によっては望み通りに動作しないこともありますのでご注意ください。

 

使用例

→DEMO

 

autofocus

ページが読み込まれたとき、自動的にその要素にフォーカスされます。文書内で1つのみ設定でき、hidden型の入力欄には使用できません。

最初の一つ目の入力欄に設定してあげるのが理想ですね。

 

使用例

→DEMO

 

checked

radio型とcheckbox型の両方で有効で、ページが読み込まれた時に設定されたものがチェックされます。

デフォルトにしたい選択肢などに付けてあげるといいでしょう。

 

使用例

→DEMO

 

disabled

設定されている場合、ユーザーが入力欄を操作出来ないようになります。デフォルトではグレー背景などで使用できないことが分かるような形で表示されます。

重要な点としては、無効になった入力欄はclickイベントを受け取らず、フォームと共に送信されることもなくなります。

javascriptで入力欄を制御する際に、この点を理解しているとスムーズに行くことが多いかと思います。

 

使用例

→DEMO

 

form

入力欄と関連付けたいform要素のidを指定します。1つのフォームとしか関連付けはできませんのでご注意ください。

以下の使用例のようにformタグ外にも入力欄を設置できるので非常に便利です。

 

使用例

→DEMO

 

送信ボタンを押してURLを確認すると、関連付いていることがわかります。

 

id

文書全体でユニークでなければならない識別子です。ラベルのfor属性と関連付けることができます。

javascriptとCSSでカスタマイズする際に使用例のような形で使うことが多いでしょう。

 

使用例

→DEMO

 

max

date型、month型、week型、time型、datetime-local型、number型、range型で有効で値の最大値を設定できます。

属性の値が数値でない場合は、最大値は設定されません。

 

使用例

→DEMO

 

maxlength

text型、search型、url型、tel型、email型、password型で有効で値の最大文字数を設定できます。

値が指定されなかった場合、または無効な値が指定された場合は、最大文字数が設定されません。

 

使用例

→DEMO

 

min

date型、month型、week型、time型、datetime-local型、number型、range型で有効で値の最小値を設定できます。

属性の値が数値でない場合は、最小値は設定されません。

 

使用例

→DEMO

 

minlength

text型、search型、url型、tel型、email型、password型で有効で値の最小文字数を設定できます。

値が指定されなかった場合、または無効な値が指定された場合は、最小文字数が設定されません。

 

使用例

→DEMO

 

見かけ上分かりにくいので、ブラウザのバリデーションをかけました。

 

multiple

要素が1つ以上の値を受け入れる際に設定し、email型、file型、セレクトボックスに対して有効です。

ユーザーが複数の値を選択する方法は要素に依存します。

 

使用例

→DEMO

 

name

入力欄の名前を指定する文字列です。フォームが送信される時に値と共に送信されます。

基本的に必須の属性です。

 

使用例

→DEMO

 

送信ボタンを押してURLを確認すると、name属性が無いと値が送信出来ていないことがわかります。

 

pattern

text型、search型、url型、tel型、email型、password型で有効であり正規表現で指定します。

指定されていないか無効な場合はこの属性は無視されます。

また、属性が有効でパターンと一致しない場合はフォームの送信ができなくなります。

 

使用例

→DEMO

 

半角数字のみの入力制限をかけたので、それ以外の値は送信できなくなってることが確認できます。

 

placeholder

text型、search型、url型、tel型、email型、password型、number型で有効です。

この属性は、どのような情報が期待されているかユーザーに簡単なヒントを与えるものです。

できるだけ全ての要素に付けてあげましょう。

 

使用例

→DEMO

 

readonly

text型、search型、url型、tel型、email型、date型、month型、week型、time型、datetime-local型、number型、password型が対応しています。

指定すると、ユーザーが入力欄の値を編集できなくなります。

javascriptなどでカスタマイズする際に使用することが多いかと思います。

 

使用例

→DEMO

 

required

text型、search型、url型、tel型、email型、date型、month型、week型、time型、datetime-local型、number型、password型、checkbox型、radio型、file型が対応しています。

指定すると、ブラウザ側でバリデーションが利用できます。用途に応じて使用しましょう。

 

使用例

→DEMO

 

value

フォームの送信される値です。予め指定しておくとその値が初期値となります。

基本的に省略が可能ですが、checkbox型、radio型、hidden型、においては必須となります。

 

使用例

→DEMO

 

まとめ

こうして有用なものを洗い出してみると、ユーザビリティ向上、入力制御で使えるものが沢山あります。

セキュリティの観点から言えばhtmlだけでの入力制御は望ましく無いので、php、cgiなどの裏側の制御と組み合わせて使用してあげるのが理想でしょう。

ブラウザによっても挙動が変わってしまう部分もあるので、各ブラウザやスマートフォンの端末で確認は必須となります。特にiOS機種は特殊なので要確認です。