HTML Forms
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.
Marital Status
Example
<form> <input type="radio" name="status" value="Married" checked> Married<br> <input type="radio" name="status" value="Single"> Single<br> <input type="radio" name="status" value="Widow"> Widow </form>
Text Input
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: <input type="text" name="firstname">
<br>
<br>
Last Name: <input type="text" name="lastname">
</form> Submit Button
The submit button submits the form.
Example - HTML form Page
<!DOCTYPE html> <html> <body> <h2>Example for Submit Button</h2> <form action="Form.php" method="post"> First Name:<br> <input type="text" name="fname"> <br> Last Name<br> <input type="text" name="lname"> <br><br> <input type="submit"> </form> </body> </html>
Code to Link in action(Form.php)
<!DOCTYPE html> <html> <body> <?php echo "Thank you for providing details!"; ?> </body> </html>
Output
Example for Submit Button
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>
<input type ="checkbox" name ="Cobol" value ="on"> Cobol
<input type ="checkbox" name ="JCL" value ="on"> JCL
<input type ="checkbox" name ="VSAM" value ="on"> VSAM
<input type ="checkbox" name ="DB2" value ="on"> DB2
<input type ="checkbox" name ="CICS" value ="on"> CICS
<input type ="checkbox" name ="IMS" value ="on"> IMS
</form> Textarea in HTML
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 height.
cols – The size of the textarea is defined using cols attribute in the form of width.
Example
<!DOCTYPE html> <html> <body> <h2>Example to give textarea in HTML</h2> <form> <textarea maxlength="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> <form action="Form.php"> <fieldset> <legend>Employee Details:</legend> Name:<br><input type="text" name="Name" value=""><br> Email Id:<br><input type="text" name="Email Id" value=""><br> Employee Id:<br><input type="text" name="Employee Id" value=""><br> Phone.No:<br><input type="text" name="Phone.No" value=""><br><br> <input type="submit" value="submit"> </fieldset> </form> </body> </html>
Code to Link in action(Form.php)
<!DOCTYPE html> <html> <body> <?php echo "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.
HTML <button> element
Using tag <button>, we can create various clickable buttons like submit, reset, cancel, ok and many more.
Example
<button type="button" onclick="document.write('Form submitted')">Submit</button>
<button type="button" onclick="document.write('Selected')">Ok</button>
<button type="button" onclick="document.write('Form Reset is done ')">Reset</button>
<button type="button" onclick="document.write('Cancelled')">Cancel</button> HTML <select> 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> <form action="Form.php"> <select name="Mobiles"> <option value="SONY">SONY</option> <option value="APPLE">APPLE</option> <option value="HTC">HTC</option> <option value="NOKIA">NOKIA</option> <option value="SAMSUNG">SAMSUNG</option> <option value="MOTOROLA">MOTOROLA</option> </select> <br><br> <input type="submit"> </form> </body> </html>
Code to Link in action(Form.php)
<!DOCTYPE html> <html> <head> <title>Form submitted </title> </head> <body> <?php echo "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> <form action='Form.php'> <select name='Mobiles' size='6' multiple> <option value='SONY'>SONY</option> <option value='APPLE'>APPLE</option> <option value='HTC'>HTC</option> <option value='NOKIA'>NOKIA</option> <option value='SAMSUNG'>SAMSUNG</option> <option value='MOTOROLA'>MOTOROLA</option> </select> <br><br> <input type='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> <form action='Form.php'> <select name='Mobiles' size='6'> <option value='SONY'>SONY</option> <option value='APPLE'>APPLE</option> <option value='HTC'>HTC</option> <option value='NOKIA'>NOKIA</option> <option value='SAMSUNG'>SAMSUNG</option> <option value='MOTOROLA'>MOTOROLA</option> </select> <br><br> <input type='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> <input list="Footwear" name="Footwears"> <datalist id="Footwear"> <option value="Casual Shoes"> <option value="Sports Shoes"> <option value="Formal Shoes"> <option value="Flip Flops"> <option value="Sandals"> </datalist> <input type="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.
Example
<form oninput ="totalresult.value = parseInt(M1.value)+parseInt(M2.value)">
<input type ="range" name ="M1" value ="0" /> +
<input type ="number" name ="M2" value ="1000" />
<br><br>
Total = <output name ="totalresult"></output>
</form> Interview Question & Answer
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>.
Five new input types provided by HTML5 for forms are:-
- datetime: It allows the user to select a date and time with time zone.
- datetime-local: It allows the user to select a date and time without time zone.
- date: It allows the user to select a date.
- month: It allows the user to select a month and year.
- email: It is used for an e-mail address.
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,
<!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> <input list="Footwear" name="Footwears"> <datalist id="Footwear"> <option value="Casual Shoes"> <option value="Sports Shoes"> <option value="Formal Shoes"> <option value="Flip Flops"> <option value="Sandals"> </datalist> <input type="submit"> </form> </body> </html>
The new input types for form validation are month, date, datetime, datetime-local, week, color, email, tel, time, url, range, search, number .
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:-
<input type="name" name ="user_name" required />
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.
<!DOCTYPE html> <html> <head> <body> <h4><u> Example of A Button Which Acts Like A Link</u></h4> <FORM ACTION="[URL]" METHOD=GET> <INPUT TYPE=submit VALUE="Link on button"> </FORM> </body> </html>
Enctype attribute is encoding type for forms. It does not code any character. It is used while uploading files to the server.