シュウ

今回は【HTML】type属性emailの使い方、メールアドレスの入力欄を作成しよう!
の解説になります！

こんな方に読んでほしい

• HTMLを学び始めた方へ
• HTMLについて学びたい方へ
• 今回はinput type=”email”(メールアドレス)について解説しております。

今回は、input type="email"(メールアドレス)について詳しく解説していきます。
type=”email”では、「メールアドレス」の入力欄を作成します。

Chrome	Safari	Firefox	IE	Edge

type=”email”について

input type="email"は、input type="tel"と違い、「email」と指定した際に、
英語キーボードには切り替わりはしません。
emailは、英語キーボードには切り替わらず、日本語キーボードの状態になります。
telは、数字キーボードが表示されます。
書き方は以下のようになります。

<form method="post">
 <div>
   <label for="email">メールアドレス</label>
   <input type="email" name="email" placeholder="info@example.com" />
 </div>
</form>

「なぜ？ telは、数字キーボードが表示されるのに、emailは、英語キーボードには切り替わらないんだろう」と思う方がいるとおもいますが、
少し難しいところがありますので、今は気にしなくて大丈夫です!

placeholder属性(入力欄に薄く表示)について

placeholder属性とは、入力欄に文字や値を薄く表示します、入力例などを表示するときに指定します。
「info@example.com」など、入力を予測する文字を入れておくとユーザーが間違わずに入力してくれます。
placeholderで指定した文字や値は入力する際に、消えますので問題はありません。

<form method="post">
 <div>
   <label for="email">メールアドレス</label>
   <input type="email" name="email" placeholder="info@example.com" />
 </div>
</form>

required属性(必須項目)について

required属性とは、必須項目に設定します、エラー表示はブラウザによって違います。
requiredのみ記述すれば問題ありません。

<form method="post">
 <div>
   <label for="email">メールアドレス</label>
   <input type="email" name="email" placeholder="info@example.com" required />
   <input type="submit" value="チェック" />
 </div>
</form>

ポイント！
type="email"とtype="text"は、見た目は変わりませんが、送信ボタンを押し、バリデーション(エラー表示)した際、エラー表示画面が変わってきます。

type=”email”を使ったほうが、ユーザーにとって誤入力した際に、
間違いに気づきやすよね!

CSSでinput type=”email”を整える

今回はCSSの「属性セレクタ」を使い整えていきます。
書き方は以下のようになります

input[type="email"] {
  /*--type="email"のinput要素にのみ適用されます--*/
}

<form method="post">
 <div>
   <label for="email">メールアドレス</label>
   <input type="email" name="email" placeholder="info@example.com" required />
   <input type="submit" value="チェック" />
 </div>
</form>

input[type="email"] {
  width: 200px; /*--幅--*/
  padding: 10px; /*--余白--*/
  font-size: 16px; /*--文字サイズ--*/
  border: solid 2px #cccccc; /*--ボーダー線--*/
  border-radius: 5px; /*--角丸--*/
}

/*--focus--*/
input[type="email"]:focus {
  background-color: #febe3e; /*--背景色--*/
}

:focusとは、テキストフィールドなどのフォーム部品がフォーカス状態になったときに、
スタイルが適用されます。
今回は、「背景色」が変わるようになっております。

関連記事

今回はこれで以上です。
次回も「フォーム」について解説していきます。

Chrome	Safari	Firefox	IE	Edge

< 前の記事

【HTML】type属性telの使い方、電話番号の入力欄を作成しよう!

次の記事 >

【HTML】type属性urlの使い方、URLの入力欄を作成しよう!