input要素を使いこなそう【テキスト偏】

Contents

input要素とは

input要素とは、お問い合わせフォームなどユーザーに入力や選択をさせたい箇所で使用する要素です。

input要素の基本的な書き方として必須な項目がtype属性です。

type属性を指定することで、フォームの見た目を変更します。

今回のこの記事では、テキスト系のtype属性をメインに紹介していきます。

type属性の初期値としても設定されている”text”は、↓の様にもっともシンプルなテキストフィールドになります。

<input type = "text">

text：

半角数字のみ入力できるフィールドです。

<input type = "number">

number：

電話番号といっても入力形式の制限はなく、pattern属性を指定して数字以外は入力できなくする必要がある。

<input type = "tel">

tel：

”email”は自動的に@が含まれているか判定してくれる。

<input type = "email">

email：

”url”では「http(s)://〜」から始まる文字列以外は「URLを入力してください」とエラーがでるようになる。

<input type = "url">

url：

”password”は入力した内容を「●●●」にして非表示にしてくれます。

<input type = "password">

password：