ホームページ > 記事 > ウェブフロントエンド > HTML5_html5 チュートリアル スキルの 8 つの新しい INPUT 入力タイプの紹介
HTML5_html5 チュートリアル スキルの 8 つの新しい INPUT 入力タイプの紹介
- WBOYオリジナル
- 2016-05-16 15:46:302326ブラウズ
既存の入力タイプの HTML コードの例:
コードをコピーします
コードは次のとおりです:テキストフィールド
ラジオボタン
チェックボックス
ドロップダウンリスト< ;select>
HTML5 では、複数の新しいフォーム入力入力タイプが追加されており、これらの新しい要素を使用することで、より優れた入力制御と検証を有効にすることができます。
1. 電子メール タイプのアプリケーション
電子メール タイプの入力要素は、フォームを送信するときに、電子メールの入力値が自動的に検証されるテキスト入力ボックスです。箱の。
コードをコピー
コードは次のとおりです:2. URL タイプの適用
url タイプの input 要素は、URL アドレスなどの特殊なテキストを入力するためのテキスト ボックスを提供します。
コードをコピー
コードは次のとおりです:3. 数値型の適用
数値型入力要素は、数値を入力するためのテキスト ボックスを提供します。
コードをコピー
コードは次のとおりです:4. 範囲型の応用
範囲型のinput要素は、Webページ上にスクロールバーとして表示される、一定の範囲内の数値を入力するためのテキストボックスを提供します。 。
コードをコピー
コードは次のとおりです:5. 日付チェックアウト型アプリケーション
入力タイプ HTML コード 機能説明
コードをコピー
コードは次のとおりです。日付
日、月、年を選択
月 < input type="month">
月と年を選択
コードをコピー
コードは次のとおりです。 週
週と年を選択
コードをコピー
コードは次のとおりです:time
時間を選択 (時と分)
コードをコピー
コードは次のとおりです:datetime < ;input type="datetime">
時間、日、月、年 (UTC 時間) を選択
コードをコピー
コードは次のとおりです: datetime-local
時刻、日、月、年を選択します。時間)
6. 検索系アプリケーション
検索タイプの入力要素には、検索キーワードを入力するためのテキスト ボックスが表示されます。
コードをコピーします
コードは次のとおりです:input[type="search"]{
-webkit-Appearance:textfield;
}
7. Tel タイプのアプリケーション
tel タイプの入力要素は、電話番号を入力するための専用のテキスト ボックスを提供します。
コードをコピー
コードは次のとおりです:8. カラー タイプ アプリケーション
カラー タイプ入力要素は、カラーを設定するために特別に使用されるテキスト ボックスを提供します。
コードをコピー
コードは次のとおりです:声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。