ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML フォーム要素

HTML フォーム要素

PHPzオリジナル: 2024-09-04 16:14:59657ブラウズ

Web 開発テクノロジ (特にフロントエンド) では、「HTML」は、Web ページ (Web サイトで表示されるページ) を表示するために使用する基本または主要なマークアップ言語です。場合によっては、HTML ページでは、他のコンテンツ表示とともに、ユーザー入力も取得する必要があります (特に動的 Web サイトの場合)。また、HTML ページでユーザー入力を取得するには、複数のフォーム要素を使用してフォームを適切に作成する必要があります。これらのフォームの助けを借りて、ユーザー入力を正しく取得し、それらの入力 (データ) を内部データベースに配置します。バックエンド。ご存知のとおり、HTML コードはさまざまなタグ要素 (<>) の下に記述されるため、基本的に「HTML フォーム要素」は「

」内で使用される要素です。タグ、およびこれらの要素は、他の標準および固有の属性とともにフォームと構造も提供します。これにより、ユーザーはフォームで何をすべきか、構造的な方法でどのように進めるかを知ることができます。

HTML フォーム要素の説明 (構文と出力例を含む)

フォームを作成し、構造化された方法でフォームに適切な外観を与えるには、複数の HTML フォーム要素があるため、以下ではその一部を 1 つずつ説明します。

SL No.	Tags	Meanings / Descriptions
1		To define a HTML form for user inputs
2		To define input control
3		To specify a list of pre-defined options
4		To define group related elements
5		To define a secure input
6		To define a label of input
7		To define a caption for fieldset
8		To define a group of similar options.
9		To define an option for the drop-down.
10		To define a result
11		To define a list of the drop-down.
12	</p> </td> <td width="375"> <em> </em> <p>To define a multiline input area.</p> </td> </tr> </tbody> </table>SL 番号</td> <td width="132">タグ</td> <td width="375">意味/説明</td> </tr> <tr> <td width="132"> 1</td> <td width="132"><フォーム></td> <td width="375">ユーザー入力用の HTML フォームを定義するには</td> </tr> <tr> <td width="132"> 2</td> <td width="132"><入力></td> <td width="375">入力コントロールを定義するには</td> </tr> <tr> <td width="132"> 3</td> <td width="132"><データリスト></td> <td width="375">事前定義されたオプションのリストを指定するには</td> </tr> <tr> <td width="132"> 4</td> <td width="132"><フィールドセット></td> <td width="375">グループ関連の要素を定義するには</td> </tr> <tr> <td width="132"> 5</td> <td width="132"><keygen></td> <td width="375">安全な入力を定義するには</td> </tr> <tr> <td width="132"> 6</td> <td width="132"></td> <td width="375">入力のラベルを定義するには</td> </tr> <tr> <td width="132"> 7</td> <td width="132"><凡例></td> <td width="375">フィールドセットのキャプションを定義するには</td> </tr> <tr> <td width="132"> 8</td> <td width="132"><optgroup></td> <td width="375"> 同様のオプションのグループを定義します。 </td> </tr> <tr> <td width="132"> 9</td> <td width="132"> <em> </em> <オプション></td> <td width="375"> ドロップダウンのオプションを定義します。</td> </tr> <tr> <td width="132"> <em> </em> 10</td> <td width="132"> <em> </em> <出力></td> <td width="375"> <em> </em> 結果を定義するには</td> </tr> <tr> <td width="132"> <em> </em> 11</td> <td width="132"> <em> </em> </td> <td width="375"> <em> </em> ドロップダウンのリストを定義します。</td> </tr> <tr> <td width="132"> <em> </em> 12</td> <td width="132"> <テキストエリア></td> <td width="375"> <em> </em> 複数行の入力領域を定義するには。</td> </tr> テーブル><strong>注: </strong>ここで説明する HTML タグ要素のほとんどは、最新の HTML 言語バージョンである HTML5 用です。タグ要素 <keygen> は、 HTML5 ではサポートされなくなりました。実際には、以前のバージョンの HTML で使用されていました。 <h3>構文と例</h3> <p>出力を含む HTML フォーム要素のいくつかの構文と例については、以下で説明します。</p> <h4>1. 「」要素</h4> <p>この要素には、以下を含む他の多くの要素も含めることができます:</p> <ul> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ul> <p>「<form>」の例入力および送信ボタンのある要素:</p> <p><strong>構文:</strong></p> <pre class="brush:php;toolbar:false"><form action="/test_page.php" method="get"> Your Name: <input type="text" name="name"><br> <input type="submit" value="Submit"> </form></pre> <p><strong>コード:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <form action="/test_page.php"> Your name: <input type="text" name="Name" value="Raju"><br> <input type="submit" value="Submit"> </form> </body> </html></pre> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543770194399.png" alt="HTML フォーム要素" ></p> <h4>2. 「」要素</h4> <p><strong> </strong>この要素はインライン要素であり、フォーム要素グループに属します。</p> <p><strong>構文:</strong></p> <pre class="brush:php;toolbar:false"><form action="/test_page.php"> Input name: <input type="text" name="name"><br> Input age: <input type="text" name="age"><br> <input type="submit" value="Submit"> </form></pre> <p><strong>コード:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <form action="/action_page.php"> Input name: <input type="text" name="name" value=""><br> Input age: <input type="text" name="age" value=""><br> <input type="submit" value="Submit"> </form> </body> </html></pre> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543770458077.png" alt="HTML フォーム要素" ><strong> </strong></p> <h4>3. 「<データリスト>」要素</h4> <p>通常、<input> の入力の事前定義されたリストを指定します。ユーザーが事前定義されたリストから任意のオプションを選択できる要素。</p> <p><strong>構文:</strong></p> <pre class="brush:php;toolbar:false"><input list="fruits"> <datalist id="fruits"> <option value="Mango"> <option value="Apple"> <option value="Banana"> <option value="Pomegranate"> <option value="Pineapple"> </datalist></pre> <p><strong>コード:</strong></p> <pre class="brush:php;toolbar:false"><! DOCTYPE html> <html> <body> <form action="/test_page.php" method="get"> <input list="fruits" name="fruit"> <datalist id="fruits"> <option value="Mango"> <option value="Apple"> <option value="Banana"> <option value="Pomegranate"> <option value="Pineapple"> </datalist> <input type="submit"> </form> </body> </html></pre> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543770666578.png" alt="HTML フォーム要素" ></p> <h4>4. 「<フィールドセット>」要素</h4> <p>この要素は基本的にフォーム内の関連要素をグループ化するために使用され、同様の要素の周囲にボックスを描画します。</p> <p><strong>構文:</strong></p> <pre class="brush:php;toolbar:false"><form> <fieldset> <legend>Celebrity:</legend> Name: <input type="text"><br> Phone: <input type="number"><br> Age: <input type="text"> </fieldset> </form></pre> <p><strong>コード:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <form> <fieldset> <legend>Celebrity:</legend> Name: <input type="text"><br> Phone: <input type="number"><br> Age: <input type="text"> </fieldset> </form> </body> </html></pre> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543771164146.png" alt="HTML フォーム要素" ></p> <h4>5. 「<keygen>」要素</h4> <p>この要素はフォームの外側にある可能性がありますが、依然としてフォームの一部である可能性があります。通常、この要素は 1 つ以上のフォームを指定するために使用されます。この要素は、HTML ベースの Web サイトのフォーム上で暗号化されたデータを渡すための暗号化キーを生成するために、HTML5 バージョンで新たに使用されます。</p> <p><strong>構文:</strong></p> <p><code><keygen form="form_id"></code></p> <p><strong>コード:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <form action="/test_page.php" method="get" id="secureform"> Username: <input type="text" name="user_name"> <input type="submit"> </form> <p>The below mentioned keygen field is outside of the form, but it's still a part of the above form.</p> Encryption: <keygen name="security" form="secureform"> </body> </html></pre> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543771487086.png" alt="HTML フォーム要素" ></p> <h4>6. 「」要素</h4> <p>この要素は基本的に、ユーザーがどのような入力データであるべきかを理解できるように、入力フォームに名前を付けます。ユーザーの指標として機能します。</p> <p><strong>構文:</strong></p> <pre class="brush:php;toolbar:false"><label for="control id" > ... </label></pre> <p><strong>コード:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <head> <title>Example of HTML label tag</title> </head> <body> <form> <input type="radio" name="gender" value="boy" id="boy"> <label for="boy">Boy</label> <input type="radio" name="gender" value="girl" id="girl"> <label for="girl">Girl</label> </form> </body> </html></pre> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543772068306.png" alt="HTML フォーム要素" ></p> <h4>7. 「」要素</h4> <p>この要素は実際に <fieldset> のキャプションを定義します。要素。これは、グループ要素の一部である、別の要素をサポートする要素のようなものです。</p> <p><strong>構文:</strong></p> <pre class="brush:php;toolbar:false"><fieldset> <legend>Celebrity:</legend> Name: <input type="text"><br> Phone: <input type="number"><br> Age: <input type="text"> </fieldset></pre> <p><strong>コード:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <head> <title>Example of HTML legend tag</title> </head> <body> <form> <fieldset> <legend>Celebrity:</legend> Name: <input type="text"><br> Phone: <input type="number"><br> Age: <input type="text"> </fieldset> </form> </body> </html></pre> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543772258001.png" alt="HTML フォーム要素" ></p> <h4>8. 「<オプトグループ>」要素</h4> <p>この要素は、HTML フォームのドロップダウンリストのオプションに使用されるグループ関連の要素です。これは、ユーザーが長いリストを簡単に処理するのに役立ちます。</p> <p><strong>構文:</strong></p> <pre class="brush:php;toolbar:false"><select> <optgroup label="Kawasaki Bikes"> <option value="ninja300">Ninja 300</option> <option value="ninja450">Ninja 450</option> </optgroup> <optgroup label="Bajaj Bikes"> <option value="pulsar200">Pulsar 200</option> <option value="pulsar150">Pulsar 150</option> </optgroup> </select></pre> <p><strong>コード:</strong><strong> </strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Example of HTML legend tag</title> </head> <body> <select> <optgroup label="Kawasaki Bikes"> <option value="ninja300">Ninja 300</option> <option value="ninja450">Ninja 450</option> </optgroup> <optgroup label="Bajaj Bikes"> <option value="pulsar200">Pulsar 200</option> <option value="pulsar150">Pulsar 150</option> </optgroup> </select> </body> </html></pre> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543772526128.png" alt="HTML フォーム要素" ></p> <h4>9. 「<オプション>」要素</h4> <p>この要素は、<select> の下のドロップダウンリストからのオプションを表すために使用されます。要素;ドロップダウンリストには少なくとも 1 つのオプションが含まれている必要があります。</p> <p><strong>構文:</strong></p> <pre class="brush:php;toolbar:false"><option value="option-value"> ... </option></pre> <p><strong>コード:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Example of HTML option tag</title> </head> <body> <form> <select> <option value="Bikes"> Bikes </option> <option value="Cars"> Cars </option> <option value="Buses"> Buses </option> </select> </form> </body> </html></pre> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543772857797.png" alt="HTML フォーム要素" ></p> <h4>10. 「<出力>」要素</h4> <p>この要素は基本的に、計算 (スクリプト化された計算など) の出力を表示するために使用されます。</p> <p><strong>構文:</strong></p> <pre class="brush:php;toolbar:false"><output> ... </output></pre> <p><strong>コード:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Example of HTML output Tag</title> </head> <body> <form oninput="result.value=parseInt(x.value)+parseInt(y.value)"> <input type="range" id="x" value="50"> + <input type="number" id="y" value="100"> = <output name="result" for="x y"></output> </form> </body> </html></pre> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543773157607.png" alt="HTML フォーム要素" ></p> <h4>11. 「<選択>」要素</h4> <p>この要素は、フォーム内のリストから選択を行うために使用されます。</p> <p><strong>構文:</strong></p> <pre class="brush:php;toolbar:false"><select> <option value="Bike">Bike</option> <option value="Car">Car</option> <option value="Bus">Bus</option> </select></pre> <p><strong>コード:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Example of HTML select Tag</title> </head> <body> <form> <select> <option value="Bike">Bike</option> <option value="Car">Car</option> <option value="Bus">Bus</option> </select> </form> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543773369304.png" alt="HTML フォーム要素" ></p> <h4>12. “<textarea>” element</h4> <p>This element is used to define multi-line text inputs (e.g. for address).</p> <p><strong>Syntax:</strong></p> <pre class="brush:php;toolbar:false"><form> <p>Put your Comment: <textarea cols="50" rows="6">Put here...</textarea> </p> </form></pre> <p><strong>Codes:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Example of HTML textarea Tag</title> </head> <body> <form> <p>Put your Comment: <textarea cols="30" rows="4">Put here...</textarea> </p> </form> </body> </html> </pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543773533119.png" alt="HTML フォーム要素" ></p> <h3>Conclusion</h3> <p>There are so many HTML form elements available; in this article, we have discussed some of the basic or native form elements. It helps us to create proper and functional HTML forms. The point to be noted is that most of the HTML form elements need a few attributes to be included along with them. Some of the elements depend on each other, which must be coded together. All the browsers may not display the elements which are already deprecated.</p></keygen><p>以上がHTML フォーム要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">define</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">internal</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">kind</a><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="HTMLフォームコントロール" href="https://m.php.cn/ja/faq/1796600032.html">HTMLフォームコントロール</a></span><span>次の記事：<a class="dBlack" title="HTMLフォームコントロール" href="https://m.php.cn/ja/faq/1796600035.html">HTMLフォームコントロール</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/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</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><!-- Matomo --><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><!-- End Matomo Code --></html>