Forms are used to collect the user input details and process it via servers.
Most of the websites use the login form to collect users information
For example – Login form, where the user provides their email id, phone number, and other contact information. This information is important for the website so that they can contact them in case they required.
So the given information is used for multiple purposes like to store user id, password, email address, Mobile number etc.
Some websites make sure that authentic users are able to sign in and access the services. And the users can change the password and other details in case if they require.
It provides various types of input fields like radio buttons, submits buttons, checkboxes, textarea and many more.
HTML Forms – Syntax: <form> form element here </form>
Note/warning/suggestion/improvement: In this HTML forms, you will see how to create HTML forms. But submit buttons will not work.
Submitting forms are done dynamically using the server. The programming languages used for submitting a form is related to server side programming like php, java, Python etc. You have to learn any of these Server side programming languages to understand how to submit forms.
<label> tag in HTML
This is optional tag in HTML form. It is simply the view or label name for the input tag.
<input> tag in HTML
This tag is where the user needs to send the input of the form.
Radio Button
It gives an option where we can select any one button out of many options.
For example, we can take if we want to mention our marital status in the given form we can select only one out of many options for example married, single and widow here we should select any one.
It defines a Single-line input field for text input.
Note: This is the basic HTML form field. But you can find some other fields based on your requirement and you have to provide additional security as well. You should use third-party products or regular expressions to validate the forms.
Example
<form>
First Name: <inputtype="text"name="firstname"><br><br>
Last Name: <inputtype="text"name="lastname"></form>
<!DOCTYPE html><html><body><h2>Example for Submit Button</h2><formaction="Form.php"method="post">
First Name:<br><inputtype="text"name="fname"><br>
Last Name<br><inputtype="text"name="lname"><br><br><inputtype="submit"></form></body></html>
Code to Link in action(Form.php)
<!DOCTYPE html><html><body><?phpecho "Thank you for providing details!";?></body></html>
Output
Example for Submit Button
Form submitted
Warning/InfoWhen the user clicks 'SUBMIT' button, it should call a PHP form page(Form.php) which is shown above. In this case, you will not be redirected to the Form.php page because we are not covering PHP tutorials here.
HTML Forms Checkbox
To select more than one option checkbox is used to check in HTML Forms.
Example
<form><h4>select the tutorials which you want to learn in Mainframe</h4><inputtype ="checkbox"name ="Cobol"value ="on"> Cobol
<inputtype ="checkbox"name ="JCL"value ="on"> JCL
<inputtype ="checkbox"name ="VSAM"value ="on"> VSAM
<inputtype ="checkbox"name ="DB2"value ="on"> DB2
<inputtype ="checkbox"name ="CICS"value ="on"> CICS
<inputtype ="checkbox"name ="IMS"value ="on"> IMS
</form>
The <textarea> tag is used to represent a multi-line plain-text editing control.
maxlength – maximum number of characters allowed in the text area. rows – The size of the textarea is defined using rows attribute in the form of width. cols – The size of the textarea is defined using cols attribute in the form of height.
Example
<!DOCTYPE html><html><body><h2>Example to give textarea in HTML</h2><form><textareamaxlength="100"rows="7"cols="50">Text here...</textarea></form></body></html>
Output
Example to give textarea in HTML
Fieldset element in HTML
Use <fieldset> element to form related data in group. The <fieldset> element caption is defined by the<legend> element.
Example - HTML form Page using Fieldset element
<!DOCTYPE html><html><body><h2>Fieldset element groups form data</h2><p>Use fieldset element to form related data in group.
The fieldset element caption is defined by the<b>Legend</b> element.
</p><formaction="Form.php"><fieldset><legend>Employee Details:</legend>
Name:<br><inputtype="text"name="Name"value=""><br>
Email Id:<br><inputtype="text"name="Email Id"value=""><br>
Employee Id:<br><inputtype="text"name="Employee Id"value=""><br>
Phone.No:<br><inputtype="text"name="Phone.No"value=""><br><br><inputtype="submit"value="submit"></fieldset></form></body></html>
Code to Link in action(Form.php)
<!DOCTYPE html><html><body><?phpecho "Thank you for providing details!";?></body></html></html>
Output
Fieldset element groups form data
Use fieldset element to form related-data in group.
The fieldset element caption is defined by the Legend element.
In HTML, document drop down list is defined using <select> element.
Example
<!DOCTYPE html><html><body><h3>In HTML select element defines drop-down list</h3><formaction="Form.php"><selectname="Mobiles"><optionvalue="SONY">SONY</option><optionvalue="APPLE">APPLE</option><optionvalue="HTC">HTC</option><optionvalue="NOKIA">NOKIA</option><optionvalue="SAMSUNG">SAMSUNG</option><optionvalue="MOTOROLA">MOTOROLA</option></select><br><br><inputtype="submit"></form></body></html>
Code to Link in action(Form.php)
<!DOCTYPE html><html><head><title>Form submitted </title></head><body><?phpecho "Thank you, your item is selected!";?></body></html>
Output
In HTML select element defines drop-down list
Select multiple options
Example
<!DOCTYPE html><html><body><h6>List of options is visible.</h6><p>ctrl+left click to select all</p><formaction='Form.php'><selectname='Mobiles'size='6'multiple><optionvalue='SONY'>SONY</option><optionvalue='APPLE'>APPLE</option><optionvalue='HTC'>HTC</option><optionvalue='NOKIA'>NOKIA</option><optionvalue='SAMSUNG'>SAMSUNG</option><optionvalue='MOTOROLA'>MOTOROLA</option></select><br><br><inputtype='submit'></form></body></html>
Code to link in action(form.php)
<!DOCTYPE html><html><head><title>Form submitted</title></head><body><h6>Thank you</h6><p>All items are selected</p></body></html>
Output
List of options is visible.
ctrl+left click to select all
Give visible value using size attribute
In the given list of options in the drop-down list, we can select only one at a time.
Example
<!DOCTYPE html><html><body><h2>List of options is visible.</h2><formaction='Form.php'><selectname='Mobiles'size='6'><optionvalue='SONY'>SONY</option><optionvalue='APPLE'>APPLE</option><optionvalue='HTC'>HTC</option><optionvalue='NOKIA'>NOKIA</option><optionvalue='SAMSUNG'>SAMSUNG</option><optionvalue='MOTOROLA'>MOTOROLA</option></select><br><br><inputtype='submit'></form></body></html>
Output
List of options is visible.
Form Elements of HTML5
<datalist> Tag
The pre-defined option is specified in drop-down list using <datalist> element.
Example
<!DOCTYPE html><html><body><h2>Example for datalist Element</h2><p>The pre-defined option is specified in drop down list using datalist element</p><form><inputlist="Footwear"name="Footwears"><datalistid="Footwear"><optionvalue="Casual Shoes"><optionvalue="Sports Shoes"><optionvalue="Formal Shoes"><optionvalue="Flip Flops"><optionvalue="Sandals"></datalist><inputtype="submit"></form></body></html>
Output
Example for datalist Element
The pre-defined option is specified in drop down list using datalist element
<output> Tag
The <output> element declares results of calculation.
Forms contain many important information like email id, phone number, and other contact information. This information is important for the website so that they can contact the user in case they required. So the given information is used for multiple purposes like to store user id, password, email address, Mobile number, etc. Syntax: <form> form element here </form>.
Button tag is used to create a clickable button like “submit” or “reset” in the HTML form. Syntax:- <button name=””button”” type=””button””>Click Here</button>.
The HTML 5<datalist>tag provides an autocomplete feature on the form element. The pre-defined option is specified in drop-down list using<datalist>element. Example,
The required attribute is used in HTML to make the field mandatory. Without giving input to that particular field we cannot submit the form, it will give a default HTML error. Syntax:-
The <fieldset>is a tag in HTML which draws a box around the related element and it is used to group related elements in a form. We use the <fieldset>element to form related data in the group. The <fieldset>element caption is defined by the <legend> element.
Here is one example to create a button which acts like a link in HTML.
<!DOCTYPEhtml><html><head><body><h4><u>ExampleofAButtonWhichActsLikeALink</u></h4><FORMACTION="[URL]"METHOD=GET><INPUTTYPE=submitVALUE="Link on button"></FORM></body></html>