HTML5_html5 チュートリアルスキルでフォームの共通属性と新しい属性を整理する-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5_html5 チュートリアルスキルでフォームの共通属性と新しい属性を整理する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:46 PM

html5属性形状

HTML5 の新しいフォーム属性
HTML5 の

タグだけでなく、テキスト、検索、URL、電話、電子メール、パスワード、範囲、色などのタグでも機能します。
例
HTML フォームでオートコンプリートをオンにする (入力フィールドのオートコンプリートをオフにする):

XML/HTML コードコンテンツをクリップボードにコピー

フォームアクション="demo-form.php " オートコンプリート="on">
名:入力タイプ= "テキスト" 名前="fname">br>
姓: 入力タイプ= "テキスト" 名前="lname">br>
電子メール: input type="メール" 名前="メール" オートコンプリート=「オフ」>br>
入力タイプ="送信" >
フォーム>

novalidate 属性
novalidate 属性のブール属性。
novalidate 属性は、フォームの送信時にフォームまたは入力フィールドを検証しないことを指定します。。
例
送信されたフォームデータを検証する必要はありません

XML/HTML コードコンテンツをクリップボードにコピー

フォームアクション="demo-form.php " novalidate>
電子メール: input type="メール" 名前="ユーザーメール">
入力タイプ="送信" >
フォーム>

autofocus 属性
autofocus 属性は、ページのロード時にフィールドが自動的にフォーカスを取得することを指定します。
例
ページの読み込み時に「名」入力フィールドに自動的にフォーカスを設定します:

XML/HTML コードコンテンツをクリップボードにコピー

名:入力タイプ= "テキスト" 名前="fname" autofocus>

フォーム属性
フォーム属性は、入力フィールドが属する 1 つ以上のフォームを指定します。 ヒント: 複数のフォームを参照する必要がある場合は、スペースで区切ったリストを使用します。
インスタンス
フォームの外にある入力フィールドは HTML フォームを参照します (入力フォームは依然としてフォームの一部です):

formaction 属性
formaction 属性は、フォーム送信の URL アドレスを記述するために使用されます。formaction 属性は、

要素の action 属性をオーバーライドします。
注: formaction 属性は、type="submit; に使用されます。 " and type=" image".
例
次の HTMLform フォームには、異なるアドレスを持つ 2 つの送信ボタンが含まれています:

XML/HTML コードコンテンツをクリップボードにコピー

フォームアクション="demo-form.php ">
名: 入力タイプ= "テキスト" 名前="fname">br>
姓: 入力タイプ= "テキスト" 名前="lname">br>
入力タイプ="送信" 値=「送信」>br>
入力タイプ="送信" フォームアクション="demo-admin.php"
値=「管理者として送信」>
フォーム>

formenctype プロパティ
formenctype プロパティは、サーバーにテーブル転送されるデータコードを説明します (フォームテーブル単位内のメソッド = "post" テーブルのみ)
formenctype プロパティは、元素の enctype プロパティを覆います。
主:
の例
最初の引用交換ボタンは表単位データの送信を承認しており、2 番目の引用交換ボタンは「multipart/form-data」コード形式で送信されています。送信表单データ:

XML/HTML コード复制コンテンツ到剪贴板

フォームアクション="demo-post_enctype.php " メソッド="投稿">
名: 入力タイプ= "テキスト" 名前="fname">br>
入力タイプ="送信" 値=「送信」>
入力タイプ="送信" formenctype="multipart/form-data"
値=「マルチパート/フォームデータとして送信」>
フォーム>

formmethod プロパティ
formmethod プロパティは、テーブル転送の方式を定義します。
formmethod プロパティは、

をオーバーライドします。
注意: このプロパティは type="submit" および type="image" と組み合わせて使用できます。

XML/HTML コード

复制コンテンツ到剪贴板

フォームアクション="demo-form.php " メソッド="get">
名: 入力タイプ= "テキスト" 名前="fname">br>
姓: 入力タイプ= "テキスト" 名前="lname">br>
入力タイプ="送信" 値=「送信」>
入力タイプ="送信" formmethod="post" formaction="demo-post.php"
値=「POST を使用して送信」>
フォーム>

formnovalidate プロパティ
novalidate プロパティはブール型プロパティの 1 つです。
novalidate プロパティ説明済み
formnovalidate プロパティは

をオーバーライドします。元素の novalidate プロパティ。
注意: formnovalidate プロパティ与type="submit一起使用
例
二提交按钮的表单(使用与不許可验证 ):

XML/HTML コード复制コンテンツ到剪贴板

フォームアクション="demo-form.php ">
電子メール: input type="メール" 名前="ユーザーID">br>
入力タイプ="送信" 値=「送信」>br>
入力タイプ="送信" formnovalidate value=「検証なしで送信」>
フォーム>

formtarget プロパティ
formtarget プロパティは、名前または関連する文字を指定して、テーブル転送データ受信後の表示を示します。
formtarget プロパティは、

要素のターゲットプロパティを覆います。
注意: formtarget プロパティ与type="submit" と type="image" を組み合わせて使用します。
例
二つの提交按钮の表单、異なる窗口中表示:

XML/HTML コード复制コンテンツ到剪贴板

フォームアクション="demo-form.php ">
名: 入力タイプ= "テキスト" 名前="fname">br>
姓: 入力タイプ= "テキスト" 名前="lname">br>
入力タイプ="送信" 値=「通常どおり送信」>
入力タイプ="送信" formtarget="_blank"
値=「新しいウィンドウに送信」>
フォーム>

高さと幅のプロパティ
画像タイプに使用する高さと幅のプロパティを定義する
注意: 高さと幅のプロパティは、画像タイプのにのみ適用されます。
示唆: 画像は通常、高さと解像度の属性を同時に指定することがあります。画像が高さと解像度を設定している場合、画像に必要なスペースはアップロード時に保持される可能性があります。
の例
高さと幅のプロパティを使用して、画像の置き換えを定義します。

XML/HTML コード复制コンテンツ到剪贴板

入力タイプ="画像" src="img_submit.gif" alt="送信" 幅="48" 高さ="48">

list プロパティ
list プロパティは入力フィールドのデータリストを定義します。datalist は入力フィールドの選択リストです。值:

XML/HTML コード

复制コンテンツ到剪贴板

入力リスト=「ブラウザ」 >
データリスト id="ブラウザ" >
オプション値="Internet Explorer ">
オプション値="Firefox" >
オプション値="Chrome" >
オプション値=「オペラ」 >
オプション値="Safari" >
データリスト>

min および max プロパティ
min、max、step プロパティは、数字または日期を含む入力タイプ定義 (制約) に使用されます。
注意: min、max および step プロパティは、以下のタイプの例

XML/HTML コード复制コンテンツ到剪贴板

input> 要素の最小値と最大値の設定:
1980-01-01 より前の日付を入力してください:
入力 type="日付" 名前="誕生日" 最大=「1979-12-31」>
2000-01-01 以降の日付を入力してください:
入力 type="日付" 名前=「誕生日」分="2000-01-02">
数量 (1 ～ 5):
入力 type="数値" 名前=「数量」分="1" 最大="5">

multiple 属性
multiple 属性は、で複数の値を選択できることを指定します。要素。
注: multiple 属性は、電子メールとファイルのタグのタイプに適用されます。 : 電子メール、およびファイル。
例
複数のファイルをアップロードする:

XML/HTML コードコンテンツをクリップボードにコピー

画像を選択: 入力 type= "ファイル" 名前="img" 複数>

パターン属性
パターン属性は、要素の値を検証するために使用される正規表現を記述します。 注: pattern 属性は、テキスト、検索、URL、電話番号、電子メール、およびパスワードのタグのタイプに適用されます。
ヒント: パターンを説明するためにグローバル title 属性とともに使用されます。 .
例
次の例は、3 文字のみを含めることができるテキストフィールド (数字と特殊文字を除く) を示しています:

XML/HTML コードコンテンツをクリップボードにコピー

国コード: 入力 type= "テキスト" 名前="国コード" パターン="[A-Za-z]{3}" タイトル=" 3 文字の国コード「> 」

プレースホルダー属性
プレースホルダー属性は、入力フィールドの期待値を説明するヒントを提供します。
ユーザーが値を入力する前に、入力フィールドに短いプロンプトが表示されます。
注: プレースホルダー属性は、テキスト、検索、URL、電話、メール、パスワードのタグのタイプに適用されます。
例
入力フィールドのプロンプトテキスト t:

XML/HTML コードコンテンツをクリップボードにコピー

入力タイプ="テキスト" name="fname" プレースホルダー=「名」>

必須属性
必須属性は、送信前に入力フィールドに入力する必要があることを指定します (空にすることはできません)。
注: 必須属性は、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイルのタグのタイプに適用されます。
インスタンス
空にすることはできない入力フィールド:

XML/HTML コードコンテンツをクリップボードにコピー

ユーザー名: input type="テキスト" 名前="usrname" 必須>

step 属性
step 属性は、入力フィールドの有効な数値間隔を指定します。 step="3" の場合、有効な数値は -3、0、3、6 などです。
ヒント: step 属性を max 属性および min 属性とともに使用して、範囲値を作成できます。
注: step 属性は次のタイプと同じです: 数値、範囲、日付、日時、日時ローカル、月、時刻、週。
インスタンス
は入力ステップが 3 であることを指定します。

XML/HTML コードコンテンツをクリップボードにコピー

入力 type="数値" 名前=「ポイント」ステップ="3">

要素
HTML5 では、スクリプトによって記述された出力など、さまざまな種類の出力結果を表す新しい要素も導入されています。

for 属性を使用して、出力要素と、計算に影響を与えるドキュメント内の他の要素 (たとえば、入力ソースまたはパラメーターとして) との関係を指定することもできます。 for 属性の値は、他の要素の ID のスペースで区切られたリストです。

placeholder 属性
HTML5 では、placeholder と呼ばれる新しい属性が導入されています。要素と要素のこの属性は、フィールドに入力できる内容に関するヒントをユーザーに提供します。プレースホルダー文字にはキャリッジリターンやラインフィードを含めることはできません。次に、プレースホルダー属性の簡単な構文を示します:

XML/HTML コードコンテンツをクリップボードにコピー

入力タイプ="テキスト" 名前=「検索」プレースホルダー=「ウェブを検索」/>

この属性は、Mozilla、Safari、Chrome ブラウザの最新バージョンでのみサポートされています。

必須属性
HTML5 では新しい属性が導入されているため、送信できない空のテキストボックスなどのクライアント側の検証を処理するために JavaScript を使用する必要がなくなりました。 required 属性と呼ばれる属性は、次のように使用できます。これにより、入力ボックスに値が確実に含まれます:

XML/HTML コードコンテンツをクリップボードにコピー

入力タイプ="テキスト" 名前=「検索」必須/>

この属性は、Mozilla、Safari、Chrome ブラウザの最新バージョンでのみサポートされています。

声明

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

H5：ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1）マルチメディアサポート：H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2）オフラインストレージ：WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3）パフォーマンスの最適化：ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

H5コードの分解：タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

H5コードの理解：HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

H5コード：Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5：Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1）HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2）CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3）JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか？詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

Dreamweaver Mac版

ビジュアル Web 開発ツール

メモ帳++7.3.1

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

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。