入力フォームを作成するときは、<input>
要素を使うかと思います。
ユーザからなにかを情報を入力してもらうときには、入力のしやすいフォームでなければなりません。
そこで、<input>要素を使う場面に応じておすすめする属性を紹介していきます。
年齢を入力してもらうとき
年齢確認の際に必要なもので、お申し込みフォームや登録フォームなどで年齢を入力してもらう機会があります。
数値(年齢)を入力してもらうときは、type="number"
属性を使うことで数値を入力してもらうことができるのですが、最初から入力に制限をかけることができます。
<input type="number" min="18">
これで、18歳以下の方はこのフォームに入力できなくなりました。
min
属性とは別に、max
属性という制限のかけ方もあります。
max
属性はmax
属性で設定した値以上の入力を制限することができるようになります。
入力フォームに漏れがあったとき
どうしても入力してもらいたい情報(名前など)があったとします。
その場合に、フォームに入力漏れがあった状態でボタンをクリックされても別のページに移動せずに、そのページのまま注意喚起してくれるのがrequired
属性です。
<form action="xxx.php" method="post">
<input type="text" required>
<input type="submit" value="送信">
</form>
これで、ユーザの入力漏れで送信ボタンを押したとしても、自動でページの移動を阻止してくれます。
番外編(管理者・ユーザそれぞれ別操作)
例えば、管理者とユーザの二種類の悪性タイプが存在するとします。
その場合、管理者は入力フォームに入力できますが、ユーザからは閲覧・コピーのみの動作しかしてほしくない場合と仮定します。
そのときに使うべきなのが、readonly
属性です。
※PHPを使います
<?php
const ADMINISTRATOR = 1; // 管理者
const USER = 2; // ユーザ
?>
<input type="text"
<?php
if (defined('USER')) { // ユーザをチェック
readonly
}
?>
>
こうすることで、ユーザからは入力操作はできず読み取り専用とすることができます。
これは、<textarea></textarea>
でも有効です。