HTML Forms

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>

HTML Forms

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
Married
Single
Widow

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.

First Name:

Last Name:

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

Form submitted
First Name:

Last Name


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 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>
<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.

Employee Details: Name:

Email Id:

Employee Id:

Phone.No:


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.

+

Total =

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:-

  1. datetime: It allows the user to select a date and time with time zone.
  2. datetime-local: It allows the user to select a date and time without time zone.
  3. date: It allows the user to select a date.
  4. month: It allows the user to select a month and year.
  5. 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.

Tutorials for all brains!