フォームでメールアドレスや電話番号、URL を入力してもらうとき、input の type 属性を適切に選ぶだけで、入力のしやすさと正確さがぐっと上がります。スマホでは種類に合ったキーボードが自動で開き、送信時には形式のチェックもブラウザが手伝ってくれます。この記事では、type="email"・type="tel"・type="url" の3つを取り上げ、それぞれの使い方と、実務で役立つ inputmode やバリデーションのコツを、触れるデモ付きで解説します。
目次
type を変えると入力欄はどう変わるか
見た目はどれも同じ一行の入力欄ですが、type を変えると次の2つが変わります。ひとつはスマホで開くキーボードで、メールなら @ が押しやすい配列、電話なら数字キーパッドが出ます。もうひとつは送信時の形式チェックで、メールらしくない文字列や URL の形になっていない入力を、ブラウザが自動でエラーにしてくれます。まずは3つの型を順番に見ていきましょう。
type=”email” でメールアドレスの入力欄を作る
type="email" にすると、@ を含むメールアドレスの形式かどうかをブラウザがチェックします。required を付ければ未入力も弾けます。複数のアドレスを受け付けたいときは multiple を付け、カンマ区切りで入力してもらえます。
<label>メールアドレス
<input type="email" name="email" required>
</label>
<!-- カンマ区切りで複数のアドレスを許可 -->
<label>宛先（複数可）
<input type="email" name="to" multiple>
</label>ブラウザのチェックは「@ があり、その前後に文字がある」程度のゆるやかなものです。実在するアドレスかどうかまでは判定できないため、あくまで明らかな入力ミスを減らすためのものと考えましょう。
type=”tel” で電話番号の入力欄を作る
type="tel" の主な役割は、スマホで数字キーパッドを開くことです。電話番号は国や表記によってハイフンの有無などが大きく変わるため、type="tel" 自体には形式チェックがありません。決まった形式に合わせたいときは pattern 属性で正規表現を指定します。
<label>電話番号
<input
type="tel"
name="tel"
inputmode="numeric"
pattern="[0-9]{10,11}"
placeholder="09012345678">
</label>pattern="[0-9]{10,11}" は「数字10〜11桁」という意味で、ハイフン無しの番号だけを受け付けます。ハイフンありも許可したい場合は pattern をゆるめるか、送信後にサーバー側で整形します。inputmode="numeric" については後述します。
type=”url” でURLの入力欄を作る
type="url" にすると、https:// のようなスキーム（プロトコル）から始まる形式かどうかをチェックします。example.com のようにスキームを省いた入力はエラーになるため、プレースホルダーで https:// 付きの例を示しておくと親切です。
<label>サイトURL
<input
type="url"
name="site"
placeholder="https://example.com">
</label>下のデモは、この3つの型を並べた小さなフォームです。形式が正しくない入力欄は :invalid で赤枠にしています。you@example.com のような正しい値と、abc のような不正な値を入れて、枠の色の変化を試してみてください（スマホで開くとキーボードの違いもわかります）。
<form class="form">
<label>メールアドレス
<input type="email" placeholder="you@example.com" required>
</label>
<label>電話番号
<input type="tel" placeholder="09012345678" inputmode="numeric">
</label>
<label>サイトURL
<input type="url" placeholder="https://example.com">
</label>
<button type="submit">送信する</button>
</form>
.form {
font-family: sans-serif;
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px;
max-width: 320px;
}
.form label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 14px;
color: #333;
}
.form input {
padding: 8px 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 6px;
}
/* 形式が正しくない入力欄を赤枠にする */
.form input:invalid {
border-color: #e53935;
}
.form button {
padding: 10px;
background: #007bff;
color: #fff;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
}
inputmode でスマホのキーボードを最適化する
type だけでもキーボードはある程度切り替わりますが、より細かく指定したいときは inputmode 属性を使います。inputmode は表示するキーボードの種類だけを指定するもので、入力値の意味やバリデーションには影響しません。type と組み合わせて使うのが基本です。
| inputmode | 開くキーボード |
|---|---|
numeric | 数字のみ（電話番号・数量など） |
tel | 電話用のキーパッド |
email | @ が押しやすいメール用 |
url | / や . が押しやすいURL用 |
decimal | 小数点付きの数字 |
たとえば電話番号欄は type="tel" に inputmode="numeric" を添えると、より確実に数字キーパッドを出せます。郵便番号や数量のように「数字だけ入れてほしいが電話ではない」欄でも inputmode="numeric" が役立ちます。
入力チェックと見た目のスタイリング
required を付けた欄が未入力だったり、形式が合っていなかったりすると、送信時にブラウザがエラーを表示して送信を止めてくれます。この状態は CSS の :invalid / :valid 疑似クラスで見た目に反映できます。入力ミスをその場で気づいてもらえるので、フォームの使いやすさが上がります。
/* 形式が正しくない入力欄を赤枠にする */
input:invalid {
border-color: #e53935;
}
/* 正しく入力できている欄を緑枠にする */
input:valid {
border-color: #43a047;
}ただし、:invalid はページを開いた直後の空欄にも当たってしまい、まだ何も触っていないのに赤枠になることがあります。これを避けたいときは、:user-invalid（ユーザーが操作したあとにだけ当たる）を使うか、JavaScript で入力後に判定するとよいでしょう。ブラウザ標準のエラー表示そのものを止めたい場合は、form に novalidate を付け、代わりに JavaScript で自前のチェックを行います。
フロントのチェックだけに頼らない
ここで紹介した type や pattern によるチェックは、あくまでブラウザ（フロントエンド）側の補助です。ユーザーが開発者ツールで属性を書き換えたり、フォームを介さずにデータを送ったりすれば、簡単にすり抜けられます。そのため、受け取ったデータはサーバー側でも必ず検証・整形するのが原則です。フロントのバリデーションは「入力ミスをその場で防いで親切にする」ためのもの、サーバーの検証は「不正なデータを受け入れない」ための最後の砦、と役割を分けて考えましょう。
まとめ
type="email"・type="tel"・type="url" は、スマホのキーボードを入力内容に合わせて切り替え、送信時の形式チェックまで手伝ってくれる便利な型です。email と url は形式チェックがありますが、tel は数字キーパッドを出すのが主な役割で、形式をそろえたいときは pattern を併用します。キーボードをより細かく指定したいときは inputmode、見た目のフィードバックには :invalid / :valid が使えます。フロントのチェックは親切のための補助と位置づけ、最終的な検証はサーバー側でも行うようにしましょう。