HTML5 に追加される新しい入力コントロールのタイプ-フロントエンドQ&A-php.cn

HTML5 に追加される新しい入力コントロールのタイプ

青灯夜游

リリース： 2022-05-30 15:34:31

オリジナル

6972 人が閲覧しました

13 の新しいタイプを追加しました: 1. カラー、カラーピッカーコントロール; 2. 日付、日付コントロール (年、月、日を含むが時間は含まれません); 3. 電話番号、電話番号コントロール; 4. 時間、時刻制御 (タイムゾーンなし); 5. "datetime-local"、日付と時刻の制御; 6. 検索、検索制御など。

HTML5 に追加される新しい入力コントロールのタイプ

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

<input> タグは、ユーザーがデータを入力できる入力フィールドを指定します。この要素は、ユーザーがデータを入力できる入力コントロールを宣言するために

要素で使用されます。

type 属性は、表示される <input> 要素のタイプを指定します。

#HTML5 の新しい入力コントロールタイプ (type 属性値)

ValueDescriptioncolorカラーピッカーを定義します。 date日付コントロールを定義します (年、月、日を含み、時間を除く)。 datetime日付と時刻のコントロールを定義します (UTC タイムゾーンに基づいて、年、月、日、時、分、秒、秒の小数部を含む)。 datetime-local日付と時刻のコントロールを定義します (年、月、日、時、分、秒、秒の小数部、タイムゾーンなしを含む)。 email 電子メールアドレスに使用されるフィールドを定義します。 month月と年のコントロールを定義します (タイムゾーンなし)。 number 数値を入力するフィールドを定義します。 #range正確な値が重要ではない数値を入力するためのコントロール (スライダーコントロールなど) を定義します。 search検索文字列の入力に使用するテキストフィールドを定義します。 tel 電話番号を入力するフィールドを定義します。 time 時刻を入力するためのコントロールを定義します (タイムゾーンなし)。 urlURL を入力するフィールドを定義します。 week週と年のコントロールを定義します (タイムゾーンなし)。

タイプは以下に紹介されています:

color

HTML5 に追加される新しい入力コントロールのタイプ ## クリックするとカラーセレクターがポップアップ表示され、次のことができます。任意の色を選択してください

数値

範囲内の数値を入力してください。範囲外の数値を手動で入力することはできますが、送信することはできません
tel
電話番号を入力してください、safari のみサポートしています
email
検出機能が組み込まれています。 @ 記号が含まれているかどうか、および @ 記号の前後に文字 ## があるかどうかを検出します。 ##url
入力した URL は http:// で始まり、その後に文字が続く必要があります。それ以外の場合は送信できません。
search
テキストを定義してください検索文字列を入力するために使用されるフィールド
#Date control- date
<input>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
時間制御- time