ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5_html5 チュートリアルスキルでフォームの共通属性と新しい属性を整理する

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

WBOYオリジナル: 2016-05-16 15:46:001697ブラウズ

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

タグとタグには、いくつかの新しい属性が追加されました。
新しい属性:
autocomplete
novalidate
新しい属性:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
高さと幅
リスト
最小値と最大値
複数
パターン (正規表現)
プレースホルダー
必須
ステップ

/ autocomplete 属性
autocomplete 属性は、フォームまたは入力フィールドにオートコンプリート機能があることを指定します。
ユーザーがオートコンプリートフィールドに入力を開始すると、ブラウザにはフィールドに入力するためのオプションが表示されます。
ヒント: autocomplete 属性は、form 要素ではオンになっていても、input 要素ではオフになっている場合があります。
注: オートコンプリートは、タグだけでなく、テキスト、検索、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 と呼ばれる新しい属性が導入されています。要素と要素のこの属性は、フィールドに入力できる内容に関するヒントをユーザーに提供します。プレースホルダー文字にはキャリッジリターンやラインフィードを含めることはできません。 </strong>次に、プレースホルダー属性の簡単な構文を示します: <br><br> </p> <div class="codeText"> <div class="codeHead">XML/HTML コード<span class="lantxt"></span>コンテンツをクリップボードにコピー<span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_1536')"></span><div id="code_1536"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">入力</span><span> </span><span class="attribute">タイプ</span><span>=</span><span class="attribute-value">"テキスト"</span> <span> </span><span class="attribute">名前</span><span>=</span><span class="attribute-value">「検索」</span><span> </span><span class="attribute">プレースホルダー</span><span>=</span><span class="attribute-value">「ウェブを検索」</span><span class="tag">/></span><span> </span></span></li> </ol> </div> </div> <p>この属性は、Mozilla、Safari、Chrome ブラウザの最新バージョンでのみサポートされています。 </p> <p><br /><strong>必須属性 <br /></strong>HTML5 では新しい属性が導入されているため、送信できない空のテキストボックスなどのクライアント側の検証を処理するために JavaScript を使用する必要がなくなりました。 required 属性と呼ばれる属性は、次のように使用できます。これにより、入力ボックスに値が確実に含まれます: <br /></p> <div class="codeText"> <div class="codeHead"><span class="lantxt">XML/HTML コード</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_2864')">コンテンツをクリップボードにコピー</span></div> <div id="code_2864"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">入力</span><span> </span><span class="attribute">タイプ</span><span>=</span><span class="attribute-value">"テキスト"</span> <span> </span><span class="attribute">名前</span><span>=</span><span class="attribute-value">「検索」</span><span> 必須</span><span class="tag">/></span><span> </span></span></li> </ol> </div> </div> <p>この属性は、Mozilla、Safari、Chrome ブラウザの最新バージョンでのみサポートされています。 </p> </div></span></li></ol> </div> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="画像のスケーリング、反転、色のグラデーションを実装するための HTML5 Canvas コード例_html5 チュートリアルスキル" href="https://m.php.cn/ja/faq/5659.html">画像のスケーリング、反転、色のグラデーションを実装するための HTML5 Canvas コード例_html5 チュートリアルスキル</a></span><span>次の記事：<a class="dBlack" title="画像のスケーリング、反転、色のグラデーションを実装するための HTML5 Canvas コード例_html5 チュートリアルスキル" href="https://m.php.cn/ja/faq/5664.html">画像のスケーリング、反転、色のグラデーションを実装するための HTML5 Canvas コード例_html5 チュートリアルスキル</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/348281.html" title="AlloyTouch 全画面スクロールプラグインは 30 秒で滑らかな H5 ページを作成します" class="aBlack">AlloyTouch 全画面スクロールプラグインは 30 秒で滑らかな H5 ページを作成します</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348372.html" title="HTML5の実戦とタッチイベント解析（touchstart、touchmove、touchend）" class="aBlack">HTML5の実戦とタッチイベント解析（touchstart、touchmove、touchend）</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348373.html" title="HTML5 Canvas 9での画像描画例を詳しく解説" class="aBlack">HTML5 Canvas 9での画像描画例を詳しく解説</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348374.html" title="正規表現と新しい HTML5 要素" class="aBlack">正規表現と新しい HTML5 要素</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348469.html" title="NodeJS と HTML5 を組み合わせて複数のファイルをドラッグアンドドロップしてサーバーにアップロードする方法" class="aBlack">NodeJS と HTML5 を組み合わせて複数のファイルをドラッグアンドドロップしてサーバーにアップロードする方法</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script></html>

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

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