HTML 表單元素

PHPz原創: 2024-09-04 16:14:59625瀏覽

在Web開發技術（尤其是前端）中，「HTML」是我們用來顯示網頁（我們在網站上看到的頁面）的基本或主要標記語言。有時，在 HTML 頁面中，與其他內容顯示一起，我們還需要接受一些使用者輸入（尤其是在動態網站中）。為了在HTML 頁面中獲取使用者輸入，我們需要使用多個表單元素來正確建立這些表單，並且在這些表單的幫助下，我們正確地獲取使用者輸入並將這些輸入（資料）放入我們的內部資料庫中：後端。現在，我們知道 HTML 程式碼是在各種標籤元素 () 下編寫的，因此，基本上，「HTML 表單元素」是在「

」內部使用的那些元素。標籤，這些元素以及其他標準和獨特的屬性也給出了表單和結構，這讓使用者知道如何處理表單以及如何以結構方式進行。

解釋 HTML 表單元素（包括語法和輸出範例）

由於有多個 HTML 表單元素來建立表單並以結構化方式賦予表單適當的外觀，因此下面對其中一些元素進行一一解釋。

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> 1</td> <td width="132"></td> <td width="375">定義使用者輸入的 HTML 表單</td> </tr> <tr> <td> 2</td> <td width="132"></td> <td width="375">定義輸入控制</td> </tr> <tr> <td> 3</td> <td width="132"></td> <td width="375">指定預定義選項清單</td> </tr> <tr> <td> 4</td> <td width="132"></td> <td width="375">定義群組相關元素</td> </tr> <tr> <td> 5</td> <td width="132"></td> <td width="375">定義安全輸入</td> </tr> <tr> <td> 6</td> <td width="132"></td> <td width="375">定義輸入標籤</td> </tr> <tr> <td> 7</td> <td width="132"></td> <td width="375">定義字段集的標題</td> </tr> <tr> <td> 8</td> <td width="132"><optgroup></optgroup></td> <td> 定義一組相似的選項。 </td> </tr> <tr> <td> 9</td> <td width="132"> <em> </em> </td> <td> 定義下拉選項。 </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> </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>「</p> <form>」範例帶有輸入和提交按鈕的元素： <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. “”元素</h4> <p>該元素可能位於表單之外，但它仍然可能是表單的一部分。通常，該元素用於指定一種或多種形式。 HTML5 版本中新使用此元素來產生加密金鑰，以便透過基於 HTML 的網站中的表單傳遞加密資料。 </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>這個元素實際上定義了 </p> <fieldset> 的標題。元素。它是另一個元素的支撐元素，是組元素的一部分。 <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> 下下拉清單中的選項。元素;下拉清單必須至少包含一個選項。 </select></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> </fieldset> </form></keygen> </form><p>以上是HTML 表單元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！</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="http://m.php.cn/zh-tw/faq/1796600032.html">HTML 表單控制項</a></span><span>下一篇：<a class="dBlack" title="HTML 表單控制項" href="http://m.php.cn/zh-tw/faq/1796600035.html">HTML 表單控制項</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><em><a href="http://m.php.cn/zh-tw/article.html" class="bBlack"><i>看更多</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/zh-tw/faq/348757.html" title="Html小知識總結" class="aBlack">Html小知識總結</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348804.html" title="如何快速學習HTML" class="aBlack">如何快速學習HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348873.html" title="html xhtml xml的區別" class="aBlack">html xhtml xml的區別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348884.html" title="src與href屬性的差別" class="aBlack">src與href屬性的差別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348902.html" title="關於HTML5和CSS替換使用" class="aBlack">關於HTML5和CSS替換使用</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益線上PHP培訓，幫助PHP學習者快速成長！</p></div><div class="footermid"><a href="http://m.php.cn/zh-tw/about/us.html">關於我們</a><a href="http://m.php.cn/zh-tw/about/disclaimer.html">免責聲明</a><a href="http://m.php.cn/zh-tw/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></html>