<input type=”email”>|メールアドレスの入力欄を作成する

<input type="email">|メールアドレスの入力欄を作成する

<input>タグのtype属性に「email」を指定すると、メールアドレスの入力欄を作成できます。
 
 

使用例

 
 

表示例

メールアドレス:

 
 

スポンサーリンク

size属性

入力欄の幅を、表示される文字数(整数)で指定します。

 
 

maxlength属性

入力欄に入力できる最大文字数を指定します。

 
 

スポンサーリンク

minlength属性

入力欄に入力できる最小文字数を指定します。

 
 

value属性

入力欄にあらかじめ表示されるテキストを指定します。
 
 

スポンサーリンク

autocomplete属性

入力欄でオートコンプリート機能を有効にするかどうかを指定します。

オートコンプリート
以前に入力した内容をブラウザが覚えておき、次回同じフォームにアクセスしたときに、入力候補を予測して自動的に表示する機能。
 
 
指定できる値は、「on」「off」のどちらかです。

  • on
    オートコンプリート機能を有効にする(デフォルト)
  • off
    オートコンプリート機能を無効にする

 
 
autocomplete属性がない場合は、デフォルトの「autocomplete=”on”」(有効)として扱われますが、form要素に「autocomplete=”off”」(無効)が指定されているときは、input要素のオートコンプリート機能も無効になります。
 
 

dirname属性

入力値の表記方向を示す情報を、サーバーに送信するための名前を指定します。
例えば、ユーザーが右から左へテキストを入力した場合、右から左の方向を示す情報が、dirname属性に指定された名前とともにサーバーへ送信されます。
 
 

スポンサーリンク

list属性

入力候補リストの表示を指定します。
ユーザーは表示された候補から選択するだけでなく、任意の値を入力することもできます。

入力候補リストはdatalist要素で作成し、datalist要素に指定したID名をlist属性の値に指定します。

 
 

pattern属性

入力欄に入力されたデータのチェックに使うパターン(書式)を、JavaScriptと同じ正規表現で指定します。
pattern属性がある場合、入力されたデータが指定されたパターンと完全に一致しない限り、送信できないようになります。

なお、pattern属性を使用する場合は、title属性で入力パターンの説明を入れておくことが推奨されています。
この説明は、データが指定されたパターンに一致しなかった場合に表示されるエラーメッセージや、コントロールにマウスカーソルを合わせたときに表示されるツールチップとして利用されます。
 
 

スポンサーリンク

placeholder属性

ユーザーに対して、入力欄に何を入力したらいいのか、簡単なヒントとして表示させるテキストを指定します。
この属性に対応したブラウザでは、placeholder属性に指定した値が、ヒントとしてあらかじめ入力欄に表示されます。

 
 

multiple属性

複数のメールアドレスを入力できるようにします。
複数のメールアドレスを入力する場合は、「,(カンマ)」で区切ります。
この属性を指定せずに複数のメールアドレスを入力すると、送信時にエラーメッセージが表示されます(対応しているブラウザのみ)。

 
 

スポンサーリンク

readonly属性

読み取り専用にして、ユーザーが入力値を編集できないようにします。
こちらは、以下のいずれかの形式で指定します。

  • readonly
  • readonly=”readonly”
  • readonly=””

 
 

required属性

そのコントロールへの入力が必須であることを指定します。
こちらは、以下のいずれかの形式で指定します。

  • required
  • required=”required”
  • required=””

 
 
required属性がある場合、コントロールにデータが入力されない限り、送信できないようになります。
 
 

スポンサーリンク

autofocus属性

ページが表示されたら、そのコントロールへ自動的にフォーカスが当たるよう指定します。
autofocus属性は、1つの文書に1つだけ指定することができます。
こちらは、以下のいずれかの形式で指定します。

  • autofocus
  • autofocus=”autofocus”
  • autofocus=””

 
 

disabled属性

そのコントロールを無効にします。
disabled属性を指定すると、入力や選択、クリックなどができなくなり、データも送信されなくなります。
こちらは、以下のいずれかの形式で指定します。

  • disabled
  • disabled=”disabled”
  • disabled=””

 
 

スポンサーリンク

form属性

コントロールを指定のform要素と結び付けます。
結びつけたいform要素のid属性の値をこの属性の値に指定することで、コントロールがform要素の中になくても、そのフォームの部品として機能するようになります。

 
 

name属性

コントロールを識別するための名前を指定します。
フォームのデータが送信されるときには、この名前とデータがセットになって送られ、サーバー側でコントロールを特定するために使われます。

 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








<input type="email">|メールアドレスの入力欄を作成する