0
1

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 1 year has passed since last update.

inputタグにつけることのできるオプションをいくつか紹介します。

Last updated at Posted at 2021-12-08

#概要
こんにちは!今日はinputタグにつけることのできる代表的なオプションを紹介したいと思います。
とはいっても僕が開発の時に有用だと感じたものをずらっと簡単に紹介します!
コード例ではReactのJSXを用いています。

#内容
コード例

          <input
            className="form-field"
            placeholder=""
            type="text"
            required={true}
            maxLength={19}
                        autoComplete="family-name"
          />

1.className
これはReact特有の書き方になります。普通のHTMLではclassで良いです。
ここでクラスの名前を指定することでCSSファイルで指定したCSSが適用できるようになります。

2.placeholder
最初にフォームを開いた時、ここに設定した値がフォームの入力欄に薄い色で記入されます。

3.type
どのようなデータを入力するのかを指定します。これによりウェブページの動きがかなり変わってきます。

4.required
入力が必須な時はここをtrueにしておきます。するとReactでは入力されていない時にメッセージを出してくれます。

5.maxLength
入力できる文字の最大の長さを指定できます。これ以上入力しようとすると入力されなくなります。

6.autoComplete
ここで入力するデータの種類を指定します。これによりブラウザに入力されたデータを保管する必要があることを示唆します。
入力できるデータには"given-name"や"nickname"など色々あります。

0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?