cman.jpWEBページ作成
広告
<input type="email"> 「メールアドレス入力」
<input type="email">は、メールアドレスの入力時に使用します。SUBMIT時に入力フォーマットのチェックが行われ、エラーの場合はSUBMITが中止されメッセージが表示されます。
※非対応のブラウザもあるため利用には注意が必要です。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<input type="email">の属性
【構文】
ページTOP
<input type="email" name="email01" size="10" maxlength="20" ・・・>
| 属性 | 意味 | 値のサンプルなど | ||||||
|---|---|---|---|---|---|---|---|---|
| name="固有名" | 入力に付ける固有名 | "email01" | ||||||
| size="文字数" | 入力幅の文字数 | "10"(文字数) | ||||||
| maxlength="文字数" | 入力可能最大文字数 | "50"(文字数) | ||||||
| minlength="文字数" | 入力可能最小文字数 ※HTML5で追加 | "50"(文字数) | ||||||
| value="値" | 初期値の表示 | "abc@example.jp" | ||||||
| disabled | 入力の無効化 | "disabled" | ||||||
| readonly | 読み取り専用 | "readonly" | ||||||
| form="フォーム名" | 送信するフォームの関連付け ※HTML5で追加 | "form01" | ||||||
| autofocus | フォーカス（カーソル）を設定 ※HTML5以降にグローバル属性に変更 | "autofocus" | ||||||
| autocomplete="on","off" | オートコンプリート機能の使用有無 ※HTML5で追加 |
|
||||||
| list="ID名" | 入力候補のリスト指定 ※HTML5で追加 | "id01" | ||||||
| pattern="正規表現" | 入力可能フォーマットの指定 ※HTML5で追加 | "list01" | ||||||
| placeholder="テキスト" | 入力ヒントの表示 ※HTML5で追加 | "氏名を入力ください" | ||||||
| multiple | 複数を入力可能とする ※HTML5で追加 | "multiple" | ||||||
| required | 入力を必須とする ※HTML5で追加 | "required" | ||||||
| dirname="固有名" | 文字方向のサーバ送信固有名 ※HTML5以降に追加 | "name01" |
| グローバル属性 |
| |
| イベント属性 |
| |
<input type="email">のサンプル
<input type="email" name="email01" size="30" maxlength="50">
送信(SUBMIT)時にメールアドレスチェックが行われます。
※非対応のブラウザもあるので注意が必要です。
ブラウザによって表示が異なります。画面イメージを確認
| IE11 |  |
|---|---|
| Chrome32 |  |
| Firefox27 |  |
| Safari5.1 |  |
初期値の指定【value】
<input type="email" name="email01" size="40" maxlength="100" value="abc@example.jp">
入力の無効化【disabled】
<input type="email" name="email01" size="15" maxlength="50" value="abc@example.jp" disabled>
読み取り専用【readonly】
<input type="email" name="email01" size="30" maxlength="50" value="abc@example.jp" readonly>
フォーカスの初期設定【autofocus】
<input type="email" name="email01" size="30" maxlength="50" value="abc@example.jp" autofocus>
オートコンプリートの使用有無【autocomplete】
<input type="email" name="email01" size="30" maxlength="50" autocomplete="off">
オートコンプリート無効
入力候補リストの表示【list】
<input type="email" name="in02" size="20" maxlength="20" list="mail01">
<datalist id="mail01">
<option value="bucho@example.jp">経理部長</option>
<option value="kacho@example.jp">経理課長</option>
<option value="kakaricho@example.jp">経理係長</option>
</datalist>
<datalist id="mail01">
<option value="bucho@example.jp">経理部長</option>
<option value="kacho@example.jp">経理課長</option>
<option value="kakaricho@example.jp">経理係長</option>
</datalist>
入力時に入力候補リストを表示することができます。
※非対応のブラウザもあるので注意が必要です。
ブラウザによって表示が異なります。画面イメージを確認
| IE11 |  |
|---|---|
| Chrome32 |  |
| Firefox27 |  |
| Safari5.1 |  |
入力形式・フォーマットの指定【pattern】
入力形式指定（メールアドレス）
<input type="email" name="email01" size="20" maxlength="40" pattern="^[a-zA-Z0-9!$&*.=^`|~#%'+\/?_{}-]+@([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,4}$" title="abc@example.jpで入力ください">
<input type="email" name="email01" size="20" maxlength="40" pattern="^[a-zA-Z0-9!$&*.=^`|~#%'+\/?_{}-]+@([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,4}$" title="abc@example.jpで入力ください">
入力時に入力フォーマットのチェックを行うことができます。
patternを指定したときは"title"の指定が推奨されています。
※非対応のブラウザもあるので注意が必要です。
ブラウザによって表示が異なります。画面イメージを確認
| IE11 |  |
|---|---|
| Chrome32 |  |
| Firefox27 |  |
| Safari5.1 |  |
入力欄に入力ヒントの表示【placeholder】
入力ヒントを表示
<input type="email" name="email01" size="18" maxlength="50" placeholder="メールアドレス入力">
<input type="email" name="email01" size="18" maxlength="50" placeholder="メールアドレス入力">
入力ヒントを表示
ブラウザによって表示が異なります。画面イメージを確認
| IE11 | Chrome32 | Firefox27 | Safari5.1 |
|---|---|---|---|
 |  |  |  |
入力必須【required】
<input type="email" name="email01" size="20" maxlength="50" required>
送信(SUBMIT)時に入力必須チェックが行われます。
※非対応のブラウザもあるので注意が必要です。
ブラウザによって表示が異なります。画面イメージを確認
| IE11 |  |
|---|---|
| Chrome32 |  |
| Firefox27 |  |
| Safari5.1 |  |
複数の入力を可能とする【multiple】
入力形式指定（メールアドレス）
<input type="email" name="email01" size="40" maxlength="100" multiple>
<input type="email" name="email01" size="40" maxlength="100" multiple>
「abc@example.jp,xyz@example.jp」などカンマ区切りで複数のメールアドレスが入力可能となります。
patternを指定した場合は、patternが優先されるため注意が必要です。
<input type="email">のスタイルシートサンプル
<style type="email/css">
<!--
.inputSample {
width:200px;
font-size: 20pt;
padding: 5px;
background-color: #ccffff;
border: 3px inset #00ccff;
-->
</style>
<input type="email" name="email01" placeholder="入力してください" class="inputSample">
<!--
.inputSample {
width:200px;
font-size: 20pt;
padding: 5px;
background-color: #ccffff;
border: 3px inset #00ccff;
-->
</style>
<input type="email" name="email01" placeholder="入力してください" class="inputSample">
スタイルシートを使用することで、色々な入力が可能となります。
留意事項
- <input type="email">はHTML5で追加されました。対応していないブラウザはJavaScriptなどで同等機能を実現することが可能です。
※フォーマットチェックの機能を実現したJavascriptを表示
※Javascriptで同等の機能を実現した動作サンプルは、「入力欄、ボタン」のサンプル画面 javascript版を参照下さい。
- <input type="email">は1行入力のため改行は入力できません。
複数行入力を行う場合は<textarea>を使用します。
広告