HTML Form Elements

In Web Development Technologies (especially for the front-end), “HTML” is the basic or primary markup language that we use to display the web pages (the page which we see on a website). Sometimes, in an HTML page, along with the other content display, we need to take some user inputs as well (especially in dynamic web sites). And to take the user inputs in an HTML page, we need to use multiple form elements to create those forms properly, and with the help of those forms, we correctly take the user inputs and put those inputs (data) in our internal Databases at the back-end. Now, as we know that HTML codes are written under various tag elements (<>), so, basically, “HTML Form Elements” are those elements that are used inside a “

” tag, and these elements, along with other standard and unique attributes, give a form and structure as well, which let the users know what to do with the form and how to proceed in a structural manner.

Explain HTML Form Elements (including syntax and examples with output)

Since there are multiple HTML form elements to create a form & give the form a proper look in a structured way, below are some of them explained one by one.

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 No.</td> <td width="132">Tags</td> <td width="375">Meanings / Descriptions</td> </tr> <tr> <td width="132">  1</td> <td width="132"><form></td> <td width="375">To define a HTML form for user inputs</td> </tr> <tr> <td width="132">  2</td> <td width="132"><input></td> <td width="375">To define input control</td> </tr> <tr> <td width="132">  3</td> <td width="132"><datalist></td> <td width="375">To specify a list of pre-defined options</td> </tr> <tr> <td width="132">  4</td> <td width="132"><fieldset></td> <td width="375">To define group related elements</td> </tr> <tr> <td width="132">  5</td> <td width="132"><keygen></td> <td width="375">To define a secure input</td> </tr> <tr> <td width="132">  6</td> <td width="132"><label></td> <td width="375">To define a label of input</td> </tr> <tr> <td width="132">  7</td> <td width="132"><legend></td> <td width="375">To define a caption for fieldset</td> </tr> <tr> <td width="132">  8</td> <td width="132"><optgroup></td> <td width="375">  To define a group of similar options.  </td> </tr> <tr> <td width="132">  9</td> <td width="132"> <em> </em> <option></td> <td width="375">  To define an option for the drop-down.</td> </tr> <tr> <td width="132"> <em> </em> 10</td> <td width="132"> <em> </em> <output></td> <td width="375"> <em> </em> To define a  result</td> </tr> <tr> <td width="132"> <em> </em> 11</td> <td width="132"> <em> </em> <select></td> <td width="375"> <em> </em> To define a list of the drop-down.</td> </tr> <tr> <td width="132"> <em> </em> 12</td> <td width="132">  <textarea></td> <td width="375"> <em> </em> To define a multiline input area.</td> </tr> </tbody> </table> <strong>Note: </strong>Most of the HTML tag elements discussed here are for HTML5, the latest HTML language version. The tag element <keygen> is no longer supported in HTML5; it was actually used for the prior version of HTML. <h3>Syntax and Example</h3> <p>Some syntaxes and examples of HTML Form Elements with outputs are discussed below:</p> <h4>1. “<form>” element</h4> <p>This element can contain many other elements as well including the below:</p> <ul> <li><input></li> <li><output></li> <li><label></li> <li><select></li> <li><button></li> <li><option></li> <li><textarea></li> <li><optgroup></li> <li><fieldset></li> </ul> <p>Example for a “<form>” element with input and submit button:</p> <p><strong>Syntax:</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>Codes:</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="HTML Form Elements" ></p> <h4>2. “<input>” element</h4> <p><strong> </strong>This element is an inline element and belongs to the form-element group.</p> <p><strong>Syntax:</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>Codes:</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="HTML Form Elements" ><strong>       </strong></p> <h4>3. “<datalist>” element</h4> <p>It usually specifies a pre-defined list of inputs for <input> element where users can choose any option from the pre-defined list.</p> <p><strong>Syntax:</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>Codes:</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="HTML Form Elements" ></p> <h4>4. “<fieldset>” element</h4> <p>This element is basically used to group related elements in forms and draws a box around similar elements.</p> <p><strong>Syntax:</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>Codes:</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="HTML Form Elements" ></p> <h4>5. “<keygen>” element</h4> <p>This element may be located outside the form, but it might still be a part of the form. Usually, this element is used to specify one or more forms. This element is newly used in the HTML5 version to generate an encryption key to pass encrypted data over a form in a website based on HTML.</p> <p><strong>Syntax:</strong></p> <p><code><keygen form="form_id"></code></p> <p><strong>Codes:</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="HTML Form Elements" ></p> <h4>6. “<label>” element</h4> <p>This element basically gives a name for the input form to make the users understand what input data it should be. It acts as an indicator for users.</p> <p><strong>Syntax:</strong></p> <pre class="brush:php;toolbar:false"><label for="control id" > ... </label></pre> <p><strong>Codes:</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="HTML Form Elements" ></p> <h4>7. “<legend>” element</h4> <p>This element actually defines a caption for a <fieldset> element. It’s kind of a supporting element for another element, a part of the group element.</p> <p><strong>Syntax:</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>Codes:</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="HTML Form Elements" ></p> <h4>8. “<optgroup>” element</h4> <p>This element is a group-related element used for options in a drop-down list in an HTML form. It helps the users to handle a long list easily.</p> <p><strong>Syntax:</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>Codes:</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="HTML Form Elements" ></p> <h4>9. “<option>” element</h4> <p>This element is used to represent an option from a dropdown list under <select> element; the dropdown list must contain at least one option.</p> <p><strong>Syntax:</strong></p> <pre class="brush:php;toolbar:false"><option value="option-value"> ... </option></pre> <p><strong>Codes:</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="HTML Form Elements" ></p> <h4>10. “<output>” element</h4> <p>This element is basically used to show the output of a calculation (e.g. in a scripted calculation).</p> <p><strong>Syntax:</strong></p> <pre class="brush:php;toolbar:false"><output> ... </output></pre> <p><strong>Codes:</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="HTML Form Elements" ></p> <h4>11. “<select>” element</h4> <p>This element is used to make a selection from a list within a form.</p> <p><strong>Syntax:</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>Codes:</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 Form Elements" ></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 Form Elements" ></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>The above is the detailed content of HTML Form Elements. For more information, please follow other related articles on the PHP Chinese website!</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>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="HTML Form Controls" href="https://m.php.cn/faq/1796600032.html">HTML Form Controls</a></span><span>Next article：<a class="dBlack" title="HTML Form Controls" href="https://m.php.cn/faq/1796600035.html">HTML Form Controls</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</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/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</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>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/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>