Contents
input要素とは
input要素とは、お問い合わせフォームなどユーザーに入力や選択をさせたい箇所で使用する要素です。
type属性
input要素の基本的な書き方として必須な項目がtype属性です。
type属性を指定することで、フォームの見た目を変更します。
今回のこの記事では、テキスト系のtype属性をメインに紹介していきます。
テキスト入力系のinput
input type = ”text”
type属性の初期値としても設定されている”text”は、↓の様にもっともシンプルなテキストフィールドになります。
<input type = "text">input type = ”number”
半角数字のみ入力できるフィールドです。
<input type = "number">input type = ”tel”
電話番号といっても入力形式の制限はなく、pattern属性を指定して数字以外は入力できなくする必要がある。
<input type = "tel">input type = ”email”
”email”は自動的に@が含まれているか判定してくれる。
<input type = "email">input type = ”url”
”url”では「http(s)://〜」から始まる文字列以外は「URLを入力してください」とエラーがでるようになる。
<input type = "url">input type = ”password”
”password”は入力した内容を「●●●」にして非表示にしてくれます。
<input type = "password">
