An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. .


Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.

HTML Form Structure

The HTML <form> tag defines a form that is used to collect user input. All the form elements should be written inside <form> and </form> tags.

Syntax:

<form>
. . . .
Form Elements..
. . . .
</form>

HTML Form Tags

Let’s see the list of HTML 5 form tags.

TagDescription
<form>It defines an HTML form to enter inputs by the used side.
<input>It defines an input control.
<textarea>It defines a multi-line input control.
<label>It defines a label for an input element.
<fieldset>It groups the related element in a form.
<legend>It defines a caption for a <fieldset> element.
<select>It defines a drop-down list.
<optgroup>It defines a group of related options in a drop-down list.
<option>It defines an option in a drop-down list.
<button>It defines a clickable button.

HTML Forms Element

 Codelivly

The ‘Input’ Element

The most important form element is the <input> element. The <input> element can be displayed in several ways, depending on the type attribute.

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Form Input Attribute </title>
</head>
<body>
<h2>Text Input</h2>
<form>
First name:
<input type=”text” name=”firstname”>
Last name:
<input type=”text” name=”lastname”>
</form>
</body>
</html>

Output

First name:  Last name: 

Note : The default width of a text input field is 20 characters.

The ‘Select’ Element

The <select> element defines a drop-down list. It mostly used when you have to show numbers of items.

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Form Select Attribute </title>
</head>
<body>
<form action=”action-page.php”>
<select name=”Cars”>
<option value=”Audi”> Audi </option>
<option value=”Mercedes”> Mercedes </option>
<option value=”Lamborghini”> Lamborghini </option>
</select>
<input type=”submit”>
</form>
</body>
</html>

Output

 

Note : The action attribute defines the action to be performed when the form is submitted. You should add the destination where the form is submitted.
  • The <option> element defines different options that can be selected.
  • By default, the first item in the drop-down list is selected.
  • To define a pre-selected option, add the selected attribute to the option:<option value="abc" selected>.

The ‘Textarea’ Element

The <textarea> element defines a multi-line input field.

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Form Textarea Attribute </title>
</head>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form action=”action-page.php”>
<textarea name=”message” rows=”5″ cols=”60″> This is a simple Example of Textarea. </textarea>
<br>
<input type=”submit”>
</form>
</body>
</html>

Output



The ‘Button’ Element

The <button> element defines a clickable button.

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Form Button Attribute </title>
</head>
<body>
<button type=”button” onclick=”alert(‘Hello World..!’)”>Click Me!</button>
</body>
</html>

Output


The ‘Method’ Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data. The GET is the default method when you submitting your form data.

Syntax
<form action=”action-page.php” method=”get”>
<form action=”action-page.php” method=”post”>

Difference between GET and POST

PointsGET METHODPOST METHOD
Data PassLimited amount of data can be sent because data is sent in header.Large amount of data can be sent because data is sent in body.
SecurityGet request is not secured because data is data sent is part of the URL, and this data saved in browser history and server logs in plaintext.Post request is secured because data is not exposed in URL bar and parameters are not stored in browser history or in web server logs.
BookmarkedRequest can be bookmarked and cached.Request can not be bookmarked and cached.
UsabilityGET method should not be suitable when you are sending sensitive data like user id or Passwords.POST is good for when you are sending sensitive data because your data are sended in encrypted form.
Data LengthData length restricted, usually to 2048 characters.No restrictions on the amount of data that can be sent.
HackedEasier to hack.More difficult to hack.

The ‘Name’ Attribute

The name attribute specifies the name of <input> element. It is a good practice to use this attribute, and also good for SEO purpose.

ExampleTry this code »

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Form Name Attribute </title>
</head>
<body>
<form action=”action-page.php”>
First name:
<input type=”text” value=”John”>
Last name:
<input type=”text” name=”lastname” value=”Snow”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>

Output

First name:  Last name:  

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form and the <legend> element defines a caption for the <fieldset> element.


<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Form Fieldset and Legend Attributes </title>
</head>
<body>
<form action=”action-page.php”>
<fieldset>
<legend>Personal information:</legend>
First name:
<input type=”text” name=”firstname” value=”John”>
Last name:
<input type=”text” name=”lastname” value=”Snow”>
<input type=”submit” value=”Submit”>
</fieldset>
</form>
</body>
</html>

Output

Personal information:First name:  Last name:  

Leave a Comment

Your email address will not be published.