<input type="email">
<input type="email">は email アドレスの入力ができる HTML タグエレメントで input のタイプのひとつです。FORM エレメントで利用します。 pattern 属性によって文字列が email アドレスの形式と合っているかを検証することができます。
<label>e-mail<input name="val_datetime-local" type="email" value="" /></label>
<label> エレメントによって項目名や説明を付けることができます。
CSS、スタイルシートを利用して入力値を検証するには :valid、:invalid クラスを使います。
検証の真偽によって自動でスタイルを反映します。
送信時に pattern 属性があっているか、required 属性が指定しているかを oninvalid イベントハンドラーを設定することでチェックすることができます。
属性
グローバル属性も持ちます。以下に主な属性のみを示します。
ここでは送信するという前提で<FORM>部品を作成しますのでnameパラメーターは付けるようにしています。 送信したくないデータにはnameパラメーターを付けない方法があります。
関連typeについて
- button... 汎用ボタン。scriptに利用する
- checkbox... 複数選択が可能。選択済みにするにはcheckedパラメータを追記する
- color... カラーピッカー。色選択に使用します。
- date... 日付け
- datetime-local... 日付けと時刻(ローカルタイムゾーン)
- email... emailアドレス
- file... ファイルのアップロード
- hidden... 画面に表示しないがサーバーに送信するデータ
- image... 任意の画像を利用したカスタム用ボタン
- month... 年度と月度
- number... 数値
- password... パスワード入力
- radio... 選択肢が必要な場合
- range... 調整バーによる数値入力
- reset... リセットボタン。入力データをクリア
- search... 検索用
- submit... 送信ボタン
- tel... 電話番号
- text... テキスト入力。改行を含む場合は<textarea>を
- time... 時刻
- url... URL
- week... 年度の第何週目か
関連(Related)
参考サイト
メールの正規表現のパターンはJavaDrive メールアドレスの正規表現
を参考させていただきました。