目次
HTML5 の新しい入力タイプとその属性
ホームページ ウェブフロントエンド htmlチュートリアル HTML5 にはどのような新しい入力タイプと属性が追加されますか?

HTML5 にはどのような新しい入力タイプと属性が追加されますか?

Dec 16, 2020 pm 02:21 PM
html5 input 属性

新しいタイプ: 色、日付、日時、電子メール、月、数値、電話番号、時刻、URL、週など; 新しい属性: オートフォーカス、フォーム、最大、最小、パターン、ステップ、リストなど。

HTML5 にはどのような新しい入力タイプと属性が追加されますか?

(推奨チュートリアル: html チュートリアル)

HTML5 の新しい入力タイプとその属性

HTML4.01では、入力タイプはテキスト、ボタン、パスワード、送信、ラジオ、チェックボックス、非表示(隠しフィールド)のみです。次のような、より使いやすい新しいタイプが H5 に追加されました。

  • color

HTML5 にはどのような新しい入力タイプと属性が追加されますか?
Colorセレクターをクリックするとポップアップが表示されます。任意の色を選択できます。

  • 番号
    HTML5 にはどのような新しい入力タイプと属性が追加されますか?
    範囲内の数値を入力してください。範囲外の数値を手動で入力することもできますを送信することはできません

  • tel
    電話番号を入力してください。Safari のみがサポートしています

  • email
    これには、 -in 検出機能 送信時に @ 記号が含まれているかどうか、@ 記号の前後に文字があるかどうかを検出します

  • 範囲
    HTML5 にはどのような新しい入力タイプと属性が追加されますか?

  • url
    入力した URL は先頭が http:// であり、その後に文字がなければ送信できません

  • date
    日付は手動で選択できます
    HTML5 にはどのような新しい入力タイプと属性が追加されますか?

  • time
    時刻は手動で選択できます
    HTML5 にはどのような新しい入力タイプと属性が追加されますか?

  • datetime
    タイム ゾーンを含む日付と時刻を選択します。つまり、filfox と chrome はサポートしていません

  • #datetime-local


    HTML5 にはどのような新しい入力タイプと属性が追加されますか? タイムゾーンなしの日付と時刻を選択します

  • month


    HTML5 にはどのような新しい入力タイプと属性が追加されますか? と日付の種類は同じですが、月のみ選択できる点が異なります

  • week


    HTML5 にはどのような新しい入力タイプと属性が追加されますか? と選択できるのは週のみです。この日付方法は中国ではほとんど使用されません。

  • 検索

    検索文字列の入力に使用するテキスト フィールドを定義します。


いくつかの新しい共通プロパティ :

  • autocomplete

    オプションの値 on/off。ユーザーが以前に入力した内容に基づいてブラウザが自動的に入力する / 自動入力を許可しないことを示します。

  • autofocus

    入力は自動的に取得されますページがロードされたときにフォーカス

  • form

    フォーム外の入力が 1 つ以上のフォームに属していることが指定されており、form 属性は所属するフォームの id 値を指します。 form. 、複数のフォームに属している場合は、ID の間にスペースを追加します

  • list

list は参照されるデータリストを指します (関数は選択と同じですが、Web ページには表示されません) 事前定義されたオプション オプション (

<form><input list="mylist"/><datalist id="mylist">
    <option>张三</option>
    <option>李四</option>
    <option>王五</option></datalist></form>
ログイン後にコピー

など)。ページ上のパフォーマンスは次のとおりです (オプション オプションは、右側をクリックして展開すると展開されます) :


HTML5 にはどのような新しい入力タイプと属性が追加されますか?

- formaction

は、フォームの送信時に入力コントロールを処理するファイルの URL を指定します。 (type="submit" および type="image" の場合のみ)

#- formenctype

サーバーに送信するときにフォーム データをエンコードする方法を指定します (type="submit" および type の場合のみ) =「イメージ」)。

-formmethod

フォーム データをアクション URL に送信する HTTP メソッドを定義します。 (type="submit" および type="image" にのみ適しています)

- formnovalidate

formnovalidate 属性は、

要素の novalidate 属性をオーバーライドします。 #-formtarget

は、フォームの送信後に受け取った応答の名前またはキーワードを表示する場所を指定します。 (type="submit" および type="image" にのみ適しています)

#- height

要素の高さを指定します。 (type="image" の場合のみ)

- min

数値、範囲、日付、日時、ローカル日時、月、時刻に適用される最小入力値を指定します

- max

は最大入力値を指定します。数値、範囲、日付、日時、ローカル日時、月、時刻にも適用されます。

- 複数の

は、「,」で区切られた複数の値を許可します

- 必須

項目は必ず入力する必要があります。つまり、空にすることはできません。空の場合は送信されません

- パターン

検証関連の通常のルールを定義します。形式に「/ /」を追加する必要がないことに注意してください。

- プレースホルダー
ユーザーが入力する前に入力ボックスに表示されるプロンプトの内容を定義します。通常はライトです。グレー

- step
数値変更のステップ サイズ、つまり、step="5" などの各変更の単位を定義します。入力が 5 の整数倍でない場合、

- width

width 属性は、 要素の幅を指定します。 (type="image" のみ)

プログラミング関連の知識については、プログラミング学習をご覧ください。 !

以上がHTML5 にはどのような新しい入力タイプと属性が追加されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles