{"id":2452,"date":"2019-01-11T04:47:35","date_gmt":"2019-01-11T04:47:35","guid":{"rendered":"http:\/\/softlect.in\/?p=2452"},"modified":"2020-04-09T12:12:51","modified_gmt":"2020-04-09T12:12:51","slug":"html-forms-and-input-control-tags","status":"publish","type":"post","link":"http:\/\/softlect.com\/index.php\/html-forms-and-input-control-tags\/","title":{"rendered":"HTML Forms and Input Control Tags"},"content":{"rendered":"<p>The HTML Forms are an integral part of the web page. The basic purpose of the form is to collect information. The form is created using &lt;form&gt; tag. The &lt;form&gt; tag is the container for all the input controls of the form such as Labels,\u00a0Text Input, TextArea, Checkboxes, Radio Buttons, Select Menus\/ Dropdown List, Listboxes, and Buttons. The &lt;form&gt; tag and all the other Input Control tags must have an attribute name, such that the data collected through forms can be retrieved.<\/p>\n<p>The &lt;form&gt; tag has several attributes:<\/p>\n<ul>\n<li>name &#8211; used to specify the name of the Form<\/li>\n<li>action &#8211; used to specifies the location where the form data should be sent to the process<\/li>\n<li>method &#8211; used to specifies the method through which data is sent. The values for method attribute are GET and POST\n<ul>\n<li>get &#8211; Sends the data to the server attached to the end of the URL<\/li>\n<li>post &#8211; Sends the data to the server in the message body<\/li>\n<\/ul>\n<\/li>\n<li>enctype\u00a0&#8211; This attribute can only be used with the POST method. This attribute is used for sending a large amount of data such as an attachment or for uploading images or pdf files.<\/li>\n<\/ul>\n<p>The HTML code given below describes the use of &lt;form&gt; tag with all the possible attributes:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;p&gt;This is the description of form tag&lt;\/p&gt;<\/p>\n<p>&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;http:\/\/abc.com\/process.jsp&#8221; enctype=&#8221;multipart\/form-data&#8221; &gt;<\/p>\n<p>&lt;\/form&gt;<\/p>\n<p>&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p><strong><span style=\"color: #ff6600;\">The video below demonstrates the complete working of HTML Form tag and Input Control Tags<\/span><\/strong><\/p>\n<p><center><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/2EZDfI_J_0I\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><center><strong>Video: HTML Form tag and Input Control Tags<\/strong><\/center><\/p>\n<h2>Text Input Control<\/h2>\n<p>The &lt;input&gt; tag with the value of the type attribute as &#8220;text&#8221; is used to create Text Input Controls. Apart from the name as the attribute, there are several optional attributes that can be used with the\u00a0&lt;input&gt; tag:<\/p>\n<ul>\n<li>size &#8211; used to specify the length of the Text Input Control in characters<\/li>\n<li>maxlength &#8211; used to specify the maximum number of characters that can be entered by the user<\/li>\n<li>value &#8211; used to specify default text from the Input Control<\/li>\n<\/ul>\n<p>The HTML code given below demonstrates the use of &lt;input&gt; tag with type attribute as &#8220;text&#8221; to create textfield controls:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating Textfield Input Control for Web Page Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\nName: &lt;input type=&#8221;text&#8221; name=&#8221;sname&#8221; \/&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;&lt;br\/&gt;<br \/>\nName: &lt;input type=&#8221;text&#8221; name=&#8221;sname&#8221; size=&#8221;50&#8243; maxlength=&#8221;100&#8243; \/&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;&lt;br\/&gt;<br \/>\nDate of Birth: &lt;input type=&#8221;text&#8221; name=&#8221;dob&#8221; value=&#8221;DD\/MM\/YYYY&#8221; \/&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to create textfield is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/1.-Text-Input-Control-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2593\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/1.-Text-Input-Control-Output.png\" alt=\"\" width=\"600\" height=\"300\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/1.-Text-Input-Control-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/1.-Text-Input-Control-Output-300x150.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/1.-Text-Input-Control-Output-768x384.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Password Input Control<\/h2>\n<p>The &lt;input&gt; tag with the value of the type attribute as &#8220;password&#8221; is used to create Password Input Controls. This Input Control also supports name, size, maxlength, and value as optional attributes. The HTML code given below demonstrates the use of &lt;input&gt; tag with type attribute as &#8220;password&#8221; to create password\u00a0controls:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating Password Input Control for Web Page Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\nPassword: &lt;input type=&#8221;password&#8221; name=&#8221;pwd&#8221; \/&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;&lt;br\/&gt;<br \/>\nPassword: &lt;input type=&#8221;password&#8221; name=&#8221;pwd&#8221; size=&#8221;50&#8243; \/&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to create the password field\u00a0is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/2.-Password-Input-Control-values-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2717\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/2.-Password-Input-Control-values-Output.png\" alt=\"\" width=\"600\" height=\"262\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/2.-Password-Input-Control-values-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/2.-Password-Input-Control-values-Output-300x131.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/2.-Password-Input-Control-values-Output-768x335.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Checkboxes<\/h2>\n<p>The Checkboxes are Input Controls that are used to select a single option from the list of options.\u00a0The &lt;input&gt; tag with the value of the type attribute as &#8220;checkbox&#8221; is used to create Checkboxes. This Input Control also supports name, value and checked as optional attributes. The HTML code given below\u00a0demonstrates the use of &lt;input&gt; tag with type attribute as &#8220;checkbox&#8221; to create Checkbox controls:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating Checkbox Input Control for Web Page Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\n&lt;h4&gt;List of Countries&lt;\/h4&gt;<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;country&#8221; value=&#8221;US&#8221;\/&gt;United States of America&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;country&#8221; value=&#8221;GR&#8221;\/&gt;Germany&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;country&#8221; value=&#8221;IN&#8221;\/&gt;India&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;country&#8221; value=&#8221;UK&#8221;\/&gt;United Kingdom&lt;br\/&gt;<br \/>\n&lt;h4&gt;List of Countries with prechecked value&lt;\/h4&gt;<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;country&#8221; value=&#8221;US&#8221;\/&gt;United States of America&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;country&#8221; value=&#8221;GR&#8221;\/&gt;Germany&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;country&#8221; value=&#8221;IN&#8221; checked=&#8221;checked&#8221;\/&gt;India&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;country&#8221; value=&#8221;UK&#8221;\/&gt;United Kingdom&lt;br\/&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to create the checkboxes is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/3.-Checkboxes-Input-Control-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2597\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/3.-Checkboxes-Input-Control-Output.png\" alt=\"\" width=\"600\" height=\"438\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/3.-Checkboxes-Input-Control-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/3.-Checkboxes-Input-Control-Output-300x219.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/3.-Checkboxes-Input-Control-Output-768x561.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Radio Buttons<\/h2>\n<p>The Radio Buttons are Input Controls that are used to select multiple options from the list of options.\u00a0The &lt;input&gt; tag with the value of the type attribute as &#8220;radio&#8221; is used to create Radio Buttons. This Input Control also supports name, value and checked as optional attributes.\u00a0The HTML code given below\u00a0demonstrates the use of &lt;input&gt; tag with type attribute as &#8220;radio&#8221; to create Radio Button controls:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating Radio Button Input Control for Web Page Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\n&lt;h4&gt;List of Countries&lt;\/h4&gt;<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;country&#8221; value=&#8221;US&#8221;\/&gt;United States of America&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;country&#8221; value=&#8221;GR&#8221;\/&gt;Germany&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;country&#8221; value=&#8221;IN&#8221;\/&gt;India&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;country&#8221; value=&#8221;UK&#8221;\/&gt;United Kingdom&lt;br\/&gt;<br \/>\n&lt;h4&gt;List of Countries prechecked value&lt;\/h4&gt;<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;country&#8221; value=&#8221;US&#8221;\/&gt;United States of America&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;country&#8221; value=&#8221;GR&#8221;\/&gt;Germany&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;country&#8221; value=&#8221;IN&#8221; checked=&#8221;checked&#8221;\/&gt;India&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;country&#8221; value=&#8221;UK&#8221;\/&gt;United Kingdom&lt;br\/&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to create the radio buttons is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/4.-Radio-Buttons-Input-Control-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2599\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/4.-Radio-Buttons-Input-Control-Output.png\" alt=\"\" width=\"600\" height=\"463\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/4.-Radio-Buttons-Input-Control-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/4.-Radio-Buttons-Input-Control-Output-300x231.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/4.-Radio-Buttons-Input-Control-Output-768x592.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Select Menus<\/h2>\n<p>The Select Menus or Dropdown Boxes are Input Controls that are used to select a single option from the huge list of options.\u00a0The &lt;select&gt; tag is used to create Select Menus. This tag supports name as an attribute. The option to be selected is listed with &lt;option&gt; tag having value as the attribute. This &lt;option&gt; tag also has selected as an optional attribute. The HTML code given below\u00a0demonstrates the use of &lt;select&gt; tag with &lt;option&gt; tag to create Select or Dropdown controls:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating Select Menu Input Control for Web Page Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\n&lt;h4&gt;List of Countries&lt;\/h4&gt;<br \/>\n&lt;select name=&#8221;country&#8221;&gt;<br \/>\n&lt;option value=&#8221;US&#8221;&gt;United States of America&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;GR&#8221;&gt;Germany&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;IN&#8221;&gt;India&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;UK&#8221;&gt;United Kingdom&lt;\/option&gt;<br \/>\n&lt;\/select&gt;<br \/>\n&lt;h4&gt;List of Countries with preselected value&lt;\/h4&gt;<br \/>\n&lt;select name=&#8221;country&#8221;&gt;<br \/>\n&lt;option value=&#8221;US&#8221;&gt;United States of America&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;GR&#8221;&gt;Germany&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;IN&#8221; selected=&#8221;selected&#8221;&gt;India&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;UK&#8221;&gt;United Kingdom&lt;\/option&gt;<br \/>\n&lt;\/select&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to create select, dropdown and menu is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/5.-Select-Menu-Input-Control-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2601\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/5.-Select-Menu-Input-Control-Output.png\" alt=\"\" width=\"600\" height=\"463\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/5.-Select-Menu-Input-Control-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/5.-Select-Menu-Input-Control-Output-300x231.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/5.-Select-Menu-Input-Control-Output-768x592.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Listbox<\/h2>\n<p>The Listbox Input Control is same as Select Menus except that they are used to select multiple options from the huge list of options.\u00a0The &lt;select&gt; tag is used to create Listboxes with an attribute multiple. This tag supports name as an attribute. The option to be selected is listed with &lt;option&gt; tag having value as the attribute. This &lt;option&gt; tag also has selected and size as an optional attribute.\u00a0The HTML code given below\u00a0demonstrates the use of &lt;select&gt; tag with multiple attributes to create Listbox controls:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating Listbox Input Control for Web Page Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\n&lt;h4&gt;List of Countries&lt;\/h4&gt;<br \/>\n&lt;select name=&#8221;country&#8221; multiple=&#8221;multiple&#8221;&gt;<br \/>\n&lt;option value=&#8221;US&#8221;&gt;United States of America&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;GR&#8221;&gt;Germany&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;IN&#8221;&gt;India&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;UK&#8221;&gt;United Kingdom&lt;\/option&gt;<br \/>\n&lt;\/select&gt;<br \/>\n&lt;h4&gt;List of Countries with preselected value&lt;\/h4&gt;<br \/>\n&lt;select name=&#8221;country&#8221; multiple=&#8221;multiple&#8221;&gt;<br \/>\n&lt;option value=&#8221;US&#8221;&gt;United States of America&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;GR&#8221;&gt;Germany&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;IN&#8221; selected=&#8221;selected&#8221;&gt;India&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;UK&#8221;&gt;United Kingdom&lt;\/option&gt;<br \/>\n&lt;\/select&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to create list boxes is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/6.-List-box-Input-Control-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2603\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/6.-List-box-Input-Control-Output.png\" alt=\"\" width=\"600\" height=\"463\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/6.-List-box-Input-Control-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/6.-List-box-Input-Control-Output-300x231.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/6.-List-box-Input-Control-Output-768x592.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Submenus<\/h2>\n<p>The Select Menus can be divided into categories of submenus. To create submenus &lt;optgroup&gt; tag is used along with &lt;select&gt; tag. The rest of the attributes of the &lt;select&gt; tag remains same.\u00a0The HTML code given below\u00a0demonstrates the use of &lt;select&gt; tag with &lt;optgroup&gt; tag to create Submenu controls:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating Select Menu with Submenues Input Control for Web Page Form&lt;\/h3&gt;<br \/>\n&lt;h4&gt;Book your reservation&lt;\/h4&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\n&lt;select name=&#8221;reservation&#8221;&gt;<br \/>\n&lt;optgroup label=&#8221;Morning&#8221;&gt;<br \/>\n&lt;option value=&#8221;09:00&#8243;&gt;Breakfast 09:00 AM&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;10:00&#8243;&gt;Breakfast 10:00 AM&lt;\/option&gt;<br \/>\n&lt;\/optgroup&gt;<br \/>\n&lt;optgroup label=&#8221;Afternoon&#8221;&gt;<br \/>\n&lt;option value=&#8221;13:00&#8243;&gt;Lunch 01:00 PM&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;14:00&#8243;&gt;Lunch 02:00 PM&lt;\/option&gt;<br \/>\n&lt;\/optgroup&gt;<br \/>\n&lt;\/select&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to create submenus is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/7.-Select-Menu-Input-Control-with-submenus-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2605\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/7.-Select-Menu-Input-Control-with-submenus-Output.png\" alt=\"\" width=\"600\" height=\"463\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/7.-Select-Menu-Input-Control-with-submenus-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/7.-Select-Menu-Input-Control-with-submenus-Output-300x231.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/7.-Select-Menu-Input-Control-with-submenus-Output-768x592.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Text Area Input Control<\/h2>\n<p>The &lt;textarea&gt; tag is used to create TextAreas Input Controls. Apart from the name as the attribute, there are several optional attributes that can be used with the\u00a0&lt;textarea&gt; tag:<\/p>\n<p>cols &#8211; used to specify the width of the text area in characters<br \/>\nrows &#8211; used to specify the height of the text area<\/p>\n<p>The HTML code given below\u00a0demonstrates the use of &lt;textarea&gt; tag to create Text Area controls:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating TextArea Input Control for Web Page Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\nAddress: &lt;br\/&gt;<br \/>\n&lt;textarea name=&#8221;addr&#8221;&gt;&lt;\/textarea&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;&lt;br\/&gt;<br \/>\nAddress: &lt;br\/&gt;<br \/>\n&lt;textarea name=&#8221;addr&#8221; cols=&#8221;100&#8243; rows=&#8221;6&#8243;&gt;&lt;\/textarea&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;&lt;br\/&gt;<br \/>\nAddress: &lt;br\/&gt;<br \/>\n&lt;textarea name=&#8221;addr&#8221; cols=&#8221;100&#8243; rows=&#8221;6&#8243;&gt;<br \/>\nBuilding name<br \/>\nStreet Number<br \/>\nState<br \/>\n&lt;\/textarea&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to create text area is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/8.-TextArea-Input-Control-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2607\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/8.-TextArea-Input-Control-Output.png\" alt=\"\" width=\"600\" height=\"463\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/8.-TextArea-Input-Control-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/8.-TextArea-Input-Control-Output-300x231.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/8.-TextArea-Input-Control-Output-768x592.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Buttons Input Controls<\/h2>\n<p>The Buttons Input Controls are created using &lt;input&gt; tag or &lt;button&gt; tag.<\/p>\n<p>Creating Buttons through &lt;input&gt; tag:<br \/>\nThe &lt;input&gt; tag with the value of the type attribute as &#8220;submit&#8221;, &#8220;reset&#8221; or &#8220;button&#8221; is used to create a Submit Button, Reset Button or other Buttons respectively. Apart from the name as the attribute, value attribute is also used, which displays text on the button.\u00a0The HTML code given below\u00a0demonstrates the use of &lt;input&gt; tag with type attribute as &#8220;submit&#8221;, &#8220;reset&#8221; and &#8220;button&#8221; to create Submit, Reset and Button controls:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating Submit, Reset and Other Buttons Input Control with input tag for Web Page Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\nName: &lt;input type=&#8221;text&#8221; name=&#8221;sname&#8221; \/&gt; &lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;submit&#8221; name=&#8221;bt1&#8243; value=&#8221;Register&#8221; \/&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;reset&#8221; name=&#8221;bt1&#8243; value=&#8221;Clear&#8221; \/&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;button&#8221; name=&#8221;bt3&#8243; value=&#8221;Forgot Password&#8221; \/&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to create buttons using &lt;input&gt; tag is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/9.-Buttons-Input-Control-with-input-Tag-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2609\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/9.-Buttons-Input-Control-with-input-Tag-Output.png\" alt=\"\" width=\"600\" height=\"463\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/9.-Buttons-Input-Control-with-input-Tag-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/9.-Buttons-Input-Control-with-input-Tag-Output-300x231.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/9.-Buttons-Input-Control-with-input-Tag-Output-768x592.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p><strong>Creating Buttons through &lt;button&gt; tag:<\/strong><br \/>\nThe &lt;button&gt; tag with the value of the type attribute as &#8220;submit&#8221;, &#8220;reset&#8221; or &#8220;button&#8221; is used to create a Submit Button, Reset Button or other Buttons respectively. When using &lt;button&gt; tag its corresponding closing tag also needs to be used. The advantage of using &lt;button&gt; tag is that the images can also be made to function as a button.\u00a0The HTML code given below\u00a0demonstrates the use of &lt;button&gt; tag with type attribute as &#8220;submit&#8221;, &#8220;reset&#8221; and &#8220;button&#8221; to create Submit, Reset and Button controls:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating Submit, Reset and Other Buttons Input Control with button tag for Web Page Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\nName: &lt;input type=&#8221;text&#8221; name=&#8221;sname&#8221; \/&gt; &lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;button type=&#8221;submit&#8221; name=&#8221;bt1&#8243;&gt;Submit&lt;\/button&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;button type=&#8221;reset&#8221; name=&#8221;bt2&#8243;&gt;Reset&lt;\/button&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;button type=&#8221;button&#8221; name=&#8221;bt3&#8243;&gt;Forgot Password&lt;\/button&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;button type=&#8221;submit&#8221; name=&#8221;bt1&#8243;&gt;&lt;img src=&#8221;logo.jpg&#8221; width=&#8221;100&#8243; height=&#8221;50&#8243;\/&gt;&lt;\/button&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to create buttons using &lt;button&gt; tag is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/10.-Buttons-Input-Control-with-Button-Tag-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2611\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/10.-Buttons-Input-Control-with-Button-Tag-Output.png\" alt=\"\" width=\"600\" height=\"463\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/10.-Buttons-Input-Control-with-Button-Tag-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/10.-Buttons-Input-Control-with-Button-Tag-Output-300x231.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/10.-Buttons-Input-Control-with-Button-Tag-Output-768x592.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Keyboard Shortcut<\/h2>\n<p>The keyboard shortcuts can be created for any form of Input Controls. The &#8220;accesskey&#8221; attribute is used to create a keyboard shortcut for any of the form Input Control. Using the ALT+ &#8220;value of accesskey&#8221; on the keyboard focuses the Input Control to which the accesskey is applied. The HTML code given below demonstrates the use of keyboard shortcuts:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates keyboard shortcut for different Input Control of form for Web Page&lt;\/h3&gt;<br \/>\n&lt;h4&gt;Keyboard Shortcuts: Alt+N for Name Control, Alt+P for Password Control and Alt+S for Submit Control&lt;\/h4&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\nName: &lt;input type=&#8221;text&#8221; name=&#8221;sname&#8221; accesskey=&#8221;N&#8221; \/&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;&lt;br\/&gt;<br \/>\nPassword: &lt;input type=&#8221;password&#8221; name=&#8221;pwd&#8221; accesskey=&#8221;P&#8221; \/&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;submit&#8221; name=&#8221;bt1&#8243; value=&#8221;Register&#8221; accesskey=&#8221;S&#8221; \/&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to demonstrate the use of keyboard shortcuts attribute is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/11.-Keyboard-Shotcut-for-Input-Control-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2613\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/11.-Keyboard-Shotcut-for-Input-Control-Output.png\" alt=\"\" width=\"600\" height=\"463\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/11.-Keyboard-Shotcut-for-Input-Control-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/11.-Keyboard-Shotcut-for-Input-Control-Output-300x231.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/11.-Keyboard-Shotcut-for-Input-Control-Output-768x592.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Readonly Attribute<\/h2>\n<p>The readonly attribute can be applied to any of the form Input Controls. When the readonly attribute is applied the users cannot change the content of the Input Control. The HTML code given below demonstrates the use of readonly attribute:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates Readonly Attribute on Input Control of Web Page Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\nName: &lt;input type=&#8221;text&#8221; name=&#8221;sname&#8221; \/&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\nPassword: &lt;input type=&#8221;password&#8221; name=&#8221;pwd&#8221; value=&#8221;abcdef&#8221; readonly=&#8221;readonly&#8221; \/&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;submit&#8221; name=&#8221;bt1&#8243; value=&#8221;Register&#8221; accesskey=&#8221;S&#8221; \/&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to demonstrate the use of readonly attribute is shown below:Output:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/12.-Readonly-for-Input-Control-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2615\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/12.-Readonly-for-Input-Control-Output.png\" alt=\"\" width=\"600\" height=\"463\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/12.-Readonly-for-Input-Control-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/12.-Readonly-for-Input-Control-Output-300x231.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/12.-Readonly-for-Input-Control-Output-768x592.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Disabled Attribute<\/h2>\n<p>The disabled attribute can be applied to any of the form Input Controls. When the disabled attribute is applied the users cannot use the Input Control which is disabled. The HTML code given below demonstrates the use of disabled attribute:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates Disabled Attribute on Input Control of Web Page Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\nName: &lt;input type=&#8221;text&#8221; name=&#8221;sname&#8221; \/&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\nPassword: &lt;input type=&#8221;password&#8221; name=&#8221;pwd&#8221; value=&#8221;abcdef&#8221; disabled=&#8221;disabled&#8221; \/&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;submit&#8221; name=&#8221;bt1&#8243; value=&#8221;Register&#8221; accesskey=&#8221;S&#8221; \/&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the HTML code to demonstrate the use of the disabled attribute is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/13.-Disabled-for-Input-Control-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2617\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/13.-Disabled-for-Input-Control-Output.png\" alt=\"\" width=\"600\" height=\"463\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/13.-Disabled-for-Input-Control-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/13.-Disabled-for-Input-Control-Output-300x231.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/13.-Disabled-for-Input-Control-Output-768x592.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Complete Web Form<\/h2>\n<p>The HTML code given below demonstrate the use of all the &lt;input&gt; tag with different type attributes and &lt;select&gt; tag as well as &lt;textarea&gt; tag to create a complete HTML Web Form:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating HTML Form&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\nName: &lt;input type=&#8221;text&#8221; name=&#8221;sname&#8221; \/&gt; &lt;br\/&gt;&lt;br\/&gt;<br \/>\nPassword: &lt;input type=&#8221;password&#8221; name=&#8221;pwd&#8221; \/&gt; &lt;br\/&gt;&lt;br\/&gt;<br \/>\nVehicle Type:<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;veh&#8221; value=&#8221;BK&#8221;\/&gt;Bike<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;veh&#8221; value=&#8221;CA&#8221;\/&gt;Car<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;veh&#8221; value=&#8221;SU&#8221;\/&gt;SUV<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;veh&#8221; value=&#8221;CY&#8221;\/&gt;Cycle<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\nGender:<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;gen&#8221; value=&#8221;M&#8221;\/&gt;Male<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;gen&#8221; value=&#8221;F&#8221;\/&gt;Female<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\nCountries:<br \/>\n&lt;select name=&#8221;country&#8221;&gt;<br \/>\n&lt;option value=&#8221;US&#8221;&gt;United States of America&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;GR&#8221;&gt;Germany&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;IN&#8221;&gt;India&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;UK&#8221;&gt;United Kingdom&lt;\/option&gt;<br \/>\n&lt;\/select&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\nCompanies:&lt;br\/&gt;<br \/>\n&lt;select name=&#8221;company&#8221; multiple=&#8221;multiple&#8221;&gt;<br \/>\n&lt;option value=&#8221;AU&#8221;&gt;Audi&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;ME&#8221;&gt;Mercedes&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;VO&#8221;&gt;Volvo&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;TO&#8221;&gt;Toyota&lt;\/option&gt;<br \/>\n&lt;\/select&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\nAddress: &lt;br\/&gt;<br \/>\n&lt;textarea name=&#8221;addr&#8221;&gt;&lt;\/textarea&gt; &lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;submit&#8221; name=&#8221;bt1&#8243; value=&#8221;Register&#8221; \/&gt;<br \/>\n&lt;input type=&#8221;reset&#8221; name=&#8221;bt2&#8243; value=&#8221;Clear&#8221; \/&gt; &lt;br\/&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the above HTML code is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/14.-Web-Form-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2590\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/14.-Web-Form-Output.png\" alt=\"\" width=\"600\" height=\"570\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/14.-Web-Form-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/14.-Web-Form-Output-300x285.png 300w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/14.-Web-Form-Output-768x730.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h2>Grouping of Form Input Controls<\/h2>\n<p>The &lt;fieldset&gt; tag, along with &lt;legend&gt; tag is used to group related or set of form Input Controls. The purpose of this grouping is to elegantly design the form web page. The HTML code to demonstrate the use of &lt;fieldset&gt; with &lt;legend&gt; tag is given below:<\/p>\n<p>[html]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;HTML Forms&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h3&gt;Demonstrates creating HTML Form with Grouping&lt;\/h3&gt;<br \/>\n&lt;form name=&#8221;f1&#8243; method=&#8221;get&#8221; action=&#8221;&#8221; &gt;<br \/>\n&lt;fieldset&gt;<br \/>\n&lt;legend&gt;Personal Information&lt;\/legend&gt;<br \/>\nName: &lt;input type=&#8221;text&#8221; name=&#8221;sname&#8221; \/&gt; &lt;br\/&gt;&lt;br\/&gt;<br \/>\nPassword: &lt;input type=&#8221;password&#8221; name=&#8221;pwd&#8221; \/&gt; &lt;br\/&gt;&lt;br\/&gt;<br \/>\nGender:<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;gen&#8221; value=&#8221;M&#8221;\/&gt;Male<br \/>\n&lt;input type=&#8221;radio&#8221; name=&#8221;gen&#8221; value=&#8221;F&#8221;\/&gt;Female<br \/>\n&lt;\/fieldset&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;fieldset&gt;<br \/>\n&lt;legend&gt;Economic Data&lt;\/legend&gt;<br \/>\nVehicle Type:<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;veh&#8221; value=&#8221;BK&#8221;\/&gt;Bike<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;veh&#8221; value=&#8221;CA&#8221;\/&gt;Car<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;veh&#8221; value=&#8221;SU&#8221;\/&gt;SUV<br \/>\n&lt;input type=&#8221;checkbox&#8221; name=&#8221;veh&#8221; value=&#8221;CY&#8221;\/&gt;Cycle<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\nCountries:<br \/>\n&lt;select name=&#8221;country&#8221;&gt;<br \/>\n&lt;option value=&#8221;US&#8221;&gt;United States of America&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;GR&#8221;&gt;Germany&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;IN&#8221;&gt;India&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;UK&#8221;&gt;United Kingdom&lt;\/option&gt;<br \/>\n&lt;\/select&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\nCompanies:&lt;br\/&gt;<br \/>\n&lt;select name=&#8221;company&#8221; multiple=&#8221;multiple&#8221;&gt;<br \/>\n&lt;option value=&#8221;AU&#8221;&gt;Audi&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;ME&#8221;&gt;Mercedes&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;VO&#8221;&gt;Volvo&lt;\/option&gt;<br \/>\n&lt;option value=&#8221;TO&#8221;&gt;Toyota&lt;\/option&gt;<br \/>\n&lt;\/select&gt;<br \/>\n&lt;\/fieldset&gt;<br \/>\n&lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;fieldset&gt;<br \/>\n&lt;legend&gt;Residence Data&lt;\/legend&gt;<br \/>\nAddress: &lt;br\/&gt;<br \/>\n&lt;textarea name=&#8221;addr&#8221;&gt;&lt;\/textarea&gt; &lt;br\/&gt;&lt;br\/&gt;<br \/>\n&lt;input type=&#8221;submit&#8221; name=&#8221;bt1&#8243; value=&#8221;Register&#8221; \/&gt;<br \/>\n&lt;input type=&#8221;reset&#8221; name=&#8221;bt2&#8243; value=&#8221;Clear&#8221; \/&gt; &lt;br\/&gt;<br \/>\n&lt;\/fieldset&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p>The output of the above HTML code is shown below:<\/p>\n<p><a href=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/15.-Web-Form-with-Grouping-Output.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-2589\" src=\"http:\/\/softlect.in\/wp-content\/uploads\/HTMLForms\/15.-Web-Form-with-Grouping-Output.png\" alt=\"\" width=\"600\" height=\"708\" srcset=\"http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/15.-Web-Form-with-Grouping-Output.png 848w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/15.-Web-Form-with-Grouping-Output-254x300.png 254w, http:\/\/softlect.com\/wp-content\/uploads\/HTMLForms\/15.-Web-Form-with-Grouping-Output-768x906.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>In conclusion,\u00a0this post describes the use of different tags available in HTML to create forms to have interaction with the user and take input from the user.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The HTML Forms are an integral part of the web page. The basic purpose of the form is to collect information. The form is created using &lt;form&gt; tag. The &lt;form&gt;&hellip; <\/p>\n","protected":false},"author":1,"featured_media":2872,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[72],"tags":[],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/posts\/2452"}],"collection":[{"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/comments?post=2452"}],"version-history":[{"count":23,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/posts\/2452\/revisions"}],"predecessor-version":[{"id":3750,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/posts\/2452\/revisions\/3750"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/media\/2872"}],"wp:attachment":[{"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/media?parent=2452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/categories?post=2452"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/softlect.com\/index.php\/wp-json\/wp\/v2\/tags?post=2452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}