#概要
こんにちは!今日は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"など色々あります。