1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

<input>要素を使うときにおすすめする属性

Last updated at Posted at 2019-06-11

入力フォームを作成するときは、<input>要素を使うかと思います。
ユーザからなにかを情報を入力してもらうときには、入力のしやすいフォームでなければなりません。
そこで、<input>要素を使う場面に応じておすすめする属性を紹介していきます。

年齢を入力してもらうとき

年齢確認の際に必要なもので、お申し込みフォームや登録フォームなどで年齢を入力してもらう機会があります。
数値(年齢)を入力してもらうときは、type="number"属性を使うことで数値を入力してもらうことができるのですが、最初から入力に制限をかけることができます。

form.html
<input type="number" min="18">

これで、18歳以下の方はこのフォームに入力できなくなりました。
min属性とは別に、max属性という制限のかけ方もあります。
max属性はmax属性で設定した値以上の入力を制限することができるようになります。

入力フォームに漏れがあったとき

どうしても入力してもらいたい情報(名前など)があったとします。
その場合に、フォームに入力漏れがあった状態でボタンをクリックされても別のページに移動せずに、そのページのまま注意喚起してくれるのがrequired属性です。

form.html
<form action="xxx.php" method="post">
  <input type="text" required>
  <input type="submit" value="送信">
</form>

これで、ユーザの入力漏れで送信ボタンを押したとしても、自動でページの移動を阻止してくれます。

番外編(管理者・ユーザそれぞれ別操作)

例えば、管理者とユーザの二種類の悪性タイプが存在するとします。
その場合、管理者は入力フォームに入力できますが、ユーザからは閲覧・コピーのみの動作しかしてほしくない場合と仮定します。
そのときに使うべきなのが、readonly属性です。
※PHPを使います

form.php
<?php
const ADMINISTRATOR = 1; // 管理者
const USER = 2;          // ユーザ
?>

<input type="text" 
<?php
if (defined('USER')) { // ユーザをチェック
  readonly
}
?>
>

こうすることで、ユーザからは入力操作はできず読み取り専用とすることができます。
これは、<textarea></textarea>でも有効です。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?