このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

input”要素~“type="email"HTML5で追加

記事Sep.15th, 2020
メールアドレスの入力欄
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

type="email"

送信可能な値 改行を含まない妥当な形式のメールアドレス、空文字列
妥当性のチェック 書式の制約あり

type="email"”を指定したinput”要素はメールアドレスの入力欄を表します。

フォームの送信時にはname”属性の値とともに入力された内容が送信されます。入力値は妥当な形式のメールアドレス(“emailaddress@example.com”など)であるかチェックされます。multiple”属性を指定した場合はカンマ(“,”)で区切った複数のメールアドレスを送信できます。

ブラウザによるオートコンプリートで入力候補として表示される入力候補に影響する場合があります。また、モバイルブラウザでは入力時に英数字入力用のソフトウェアキーボードが表示される場合があります。

対応していないブラウザでは単純なテキスト入力欄(type="text")として扱われます。

サンプルコード

<form method="post" action="sample-inputtag2.php" target="_blank">
<fieldset>
<p><label>メールアドレス:<input type="email" name="sample01"></p>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>

*送信すると入力内容が表示されます。

属性と値

属性
属性 説明 説明
必須属性
type="" 入力欄の種類 email メールアドレスの入力欄
任意属性
グローバル属性
autocomplete=""HTML5で追加 ブラウザーによるオートコンプリートの可否 トークンHTML5.1で追加 オートコンプリートで表示されるべき入力候補の種類
on オートコンプリートを行う
off オートコンプリートを行わない
disabled="" 入力欄を無効化 disabled 入力欄を無効化
form=""HTML5で追加 関連付けるフォーム ID名 関連づけるform”要素id”属性の値
list=""HTML5で追加 入力値の候補と関連付ける ID名 関連づけるdatalist”要素id”属性の値
maxlength="" 入力可能な最大の文字数 正の整数 入力可能な最大の文字数
minlength="" 入力可能な最小の文字数 正の整数 入力可能な最小の文字数
multiple=""HTML5で追加 複数の値を入力を可能にする multiple 複数の値を入力を可能にする
name="" 入力欄の名前 文字列 入力欄の名前
pattern=""HTML5で追加 入力可能な値の書式 正規表現 JavaScriptの正規表現で表した入力可能な値の書式
placeholder=""HTML5で追加 入力欄のプレースホルダー テキスト 入力欄のプレースホルダー
readonly="" 入力値を編集できなくする readonly 入力値を編集できなくする
required=""HTML5で追加 入力を必須にする required 入力を必須にする
size="" 入力欄の横幅 正の整数 入力欄が表示できる文字数
value="" フォームで送信する値の初期値 メールアドレス 妥当な形式のメールアドレス

仕様書

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
email
定義なし

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク