Elemen Borang HTML

Dalam Teknologi Pembangunan Web (terutamanya untuk bahagian hadapan), "HTML" ialah bahasa penanda asas atau utama yang kami gunakan untuk memaparkan halaman web (halaman yang kami lihat di tapak web). Kadangkala, dalam halaman HTML, bersama-sama dengan paparan kandungan lain, kita perlu mengambil beberapa input pengguna juga (terutamanya dalam laman web dinamik). Dan untuk mengambil input pengguna dalam halaman HTML, kami perlu menggunakan berbilang elemen borang untuk mencipta borang tersebut dengan betul, dan dengan bantuan borang tersebut, kami mengambil input pengguna dengan betul dan meletakkan input (data) tersebut dalam Pangkalan Data dalaman kami di bahagian belakang. Sekarang, seperti yang kita ketahui bahawa kod HTML ditulis di bawah pelbagai elemen teg (<>), jadi, pada asasnya, "Elemen Borang HTML" ialah elemen yang digunakan dalam "" teg, dan elemen ini, bersama-sama dengan atribut standard dan unik yang lain, memberikan bentuk dan struktur juga, yang membolehkan pengguna mengetahui perkara yang perlu dilakukan dengan borang dan cara meneruskan dengan cara berstruktur.

Terangkan Elemen Borang HTML (termasuk sintaks dan contoh dengan output)

Memandangkan terdapat berbilang elemen borang HTML untuk mencipta borang & memberikan bentuk rupa yang betul dalam cara berstruktur, di bawah adalah beberapa daripadanya diterangkan satu persatu.

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>No. SL</td> <td width="132">Teg</td> <td width="375">Maksud / Penerangan</td> </tr> <tr> <td width="132">  1</td> <td width="132"><form></td> <td width="375">Untuk menentukan borang HTML untuk input pengguna</td> </tr> <tr> <td width="132">  2</td> <td width="132"><input></td> <td width="375">Untuk menentukan kawalan input</td> </tr> <tr> <td width="132">  3</td> <td width="132"><datalist></td> <td width="375">Untuk menentukan senarai pilihan yang dipratakrifkan</td> </tr> <tr> <td width="132">  4</td> <td width="132"><fieldset></td> <td width="375">Untuk menentukan elemen berkaitan kumpulan</td> </tr> <tr> <td width="132">  5</td> <td width="132"><keygen></td> <td width="375">Untuk menentukan input selamat</td> </tr> <tr> <td width="132">  6</td> <td width="132"><label></td> <td width="375">Untuk menentukan label input</td> </tr> <tr> <td width="132">  7</td> <td width="132"><legend></td> <td width="375">Untuk menentukan kapsyen untuk set medan</td> </tr> <tr> <td width="132">  8</td> <td width="132"><optgroup></td> <td width="375">  Untuk menentukan kumpulan pilihan yang serupa.  </td> </tr> <tr> <td width="132">  9</td> <td width="132"> <em> </em> <pilihan></td> <td width="375">  Untuk menentukan pilihan untuk menu lungsur.</td> </tr> <tr> <td width="132"> <em> </em> 10</td> <td width="132"> <em> </em> <output></td> <td width="375"> <em> </em> Untuk menentukan  hasil</td> </tr> <tr> <td width="132"> <em> </em> 11</td> <td width="132"> <em> </em> <pilih></td> <td width="375"> <em> </em> Untuk menentukan senarai lungsur turun.</td> </tr> <tr> <td width="132"> <em> </em> 12</td> <td width="132">  <textarea></td> <td width="375"> <em> </em> Untuk menentukan kawasan input berbilang baris.</td> </tr> </tbody> </table> <strong>Nota: </strong>Kebanyakan elemen teg HTML yang dibincangkan di sini adalah untuk HTML5, versi bahasa HTML terkini. Elemen teg <keygen> tidak lagi disokong dalam HTML5; ia sebenarnya digunakan untuk versi HTML sebelumnya. <h3>Sintaks dan Contoh</h3> <p>Beberapa sintaks dan contoh Elemen Borang HTML dengan output dibincangkan di bawah:</p> <h4>1. “<bentuk>” unsur</h4> <p>Elemen ini boleh mengandungi banyak elemen lain juga termasuk di bawah:</p> <ul> <li><input></li> <li><output></li> <li><label></li> <li><pilih></li> <li><butang></li> <li><pilihan></li> <li><textarea></li> <li><kumpulan pilih></li> <li><fieldset></li> </ul> <p>Contoh untuk “<borang>” elemen dengan butang input dan hantar:</p> <p><strong>Sintaks:</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>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543770194399.png" alt="Elemen Borang HTML" ></p> <h4>2. “<input>” unsur</h4> <p><strong> </strong>Elemen ini ialah elemen sebaris dan tergolong dalam kumpulan elemen bentuk.</p> <p><strong>Sintaks:</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>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543770458077.png" alt="Elemen Borang HTML" ><strong>       </strong></p> <h4>3. “<datalist>” unsur</h4> <p>Ia biasanya menentukan senarai input yang dipratakrifkan untuk <input> elemen yang membolehkan pengguna memilih sebarang pilihan daripada senarai yang telah ditetapkan.</p> <p><strong>Sintaks:</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>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543770666578.png" alt="Elemen Borang HTML" ></p> <h4>4. “<set medan>” unsur</h4> <p>Elemen ini pada asasnya digunakan untuk mengumpulkan elemen berkaitan dalam bentuk dan melukis kotak di sekeliling elemen yang serupa.</p> <p><strong>Sintaks:</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>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543771164146.png" alt="Elemen Borang HTML" ></p> <h4>5. “<keygen>” unsur</h4> <p>Elemen ini mungkin terletak di luar borang, tetapi ia mungkin masih menjadi sebahagian daripada borang. Biasanya, elemen ini digunakan untuk menentukan satu atau lebih bentuk. Elemen ini baru digunakan dalam versi HTML5 untuk menjana kunci penyulitan untuk menghantar data yang disulitkan ke atas borang dalam tapak web berdasarkan HTML.</p> <p><strong>Sintaks:</strong></p> <p><code><keygen form="form_id"></code></p> <p><strong>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543771487086.png" alt="Elemen Borang HTML" ></p> <h4>6. “<label>” unsur</h4> <p>Elemen ini pada asasnya memberi nama untuk borang input untuk membuat pengguna memahami data input yang sepatutnya. Ia bertindak sebagai penunjuk untuk pengguna.</p> <p><strong>Sintaks:</strong></p> <pre class="brush:php;toolbar:false"><label for="control id" > ... </label></pre> <p><strong>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543772068306.png" alt="Elemen Borang HTML" ></p> <h4>7. “<legenda>” unsur</h4> <p>Elemen ini sebenarnya mentakrifkan kapsyen untuk <set medan> unsur. Ia semacam elemen sokongan untuk elemen lain, sebahagian daripada elemen kumpulan.</p> <p><strong>Sintaks:</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>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543772258001.png" alt="Elemen Borang HTML" ></p> <h4>8. “<kumpulan pilih>” unsur</h4> <p>Elemen ini ialah elemen berkaitan kumpulan yang digunakan untuk pilihan dalam senarai juntai bawah dalam bentuk HTML. Ia membantu pengguna mengendalikan senarai panjang dengan mudah.</p> <p><strong>Sintaks:</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>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543772526128.png" alt="Elemen Borang HTML" ></p> <h4>9. “<pilihan>” unsur</h4> <p>Elemen ini digunakan untuk mewakili pilihan daripada senarai juntai bawah di bawah <pilih> unsur; senarai lungsur turun mesti mengandungi sekurang-kurangnya satu pilihan.</p> <p><strong>Sintaks:</strong></p> <pre class="brush:php;toolbar:false"><option value="option-value"> ... </option></pre> <p><strong>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543772857797.png" alt="Elemen Borang HTML" ></p> <h4>10. “<output>” unsur</h4> <p>Elemen ini pada asasnya digunakan untuk menunjukkan output pengiraan (cth. dalam pengiraan berskrip).</p> <p><strong>Sintaks:</strong></p> <pre class="brush:php;toolbar:false"><output> ... </output></pre> <p><strong>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543773157607.png" alt="Elemen Borang HTML" ></p> <h4>11. “<pilih>” unsur</h4> <p>Elemen ini digunakan untuk membuat pilihan daripada senarai dalam borang.</p> <p><strong>Sintaks:</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>Kod:</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="Elemen Borang 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="Elemen Borang 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><p>Atas ialah kandungan terperinci Elemen Borang HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China 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>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Kawalan Borang HTML" href="https://m.php.cn/ms/faq/1796600032.html">Kawalan Borang HTML</a></span><span>Artikel seterusnya：<a class="dBlack" title="Kawalan Borang HTML" href="https://m.php.cn/ms/faq/1796600035.html">Kawalan Borang HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</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/ms/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/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/ms/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/ms/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>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/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>