HTML5_html5 チュートリアル スキルの 8 つの新しい INPUT 入力タイプの紹介

既存の入力タイプの 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. カラー タイプ アプリケーション
カラー タイプ入力要素は、カラーを設定するために特別に使用されるテキスト ボックスを提供します。

コードをコピー

コードは次のとおりです: