コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 入力要素のタイプ: 電子メールと URL の紹介_html5 チュートリアルのスキル

HTML5 入力要素のタイプ: 電子メールと URL の紹介_html5 チュートリアルのスキル

WBOY
リリース： 2016-05-16 15:49:01
オリジナル
2588 人が閲覧しました

前回のブログ投稿では、プレースホルダー、プリフェッチ、webStorage など、HTML5 のいくつかの改善点について説明しました。次に紹介するのは、2 つの新しい入力要素タイプ、つまり email と URL です。コードに従ってその利点を確認してみましょう:

構文形式:
新しい入力タイプ属性。テキストの代わりに電子メールまたは URL を使用します:

コードをコピーします
コードは次のとおりです:

; input type="url" value="">


HTML5 に固有のパターン属性フィールドを使用して、メール アドレスと URL アドレスの形式を検証するための正規表現を指定できます。このトピックについては、別の記事で説明します。


利点
- 特別な CSS スタイルをカスタマイズできる、input[type=email] - 特別な CSS スタイルをカスタマイズできる、input[type=url]
- より多くのセマンティック定義を行うことができます
- モバイル アプリケーションの適応性: モバイル ブラウザーでは、ユーザーが手動で切り替える必要なく、電子メールと URL 用の特別なキーボードがポップアップ表示されます。

最初は冗長な入力タイプを追加することに嫌悪感を抱きましたが、よく考えてみると、ユーザー エクスペリエンスを向上させるためには良い措置だと思います。どう思いますか?
関連ラベル：
html5 input
ソース：php.cn
前の記事：HTML5 卓球 (衝突検出) の例 two_html5 チュートリアル スキル 次の記事：HTML5迷路ゲーム（衝突判定）例1_html5チュートリアルスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート