HTML Forms

In this HTML tutorial, you will learn all about the Form Tag in HTML. We will also discuss the different form input controls and form attributes.

What is the use of the Forms in HTML?

When we want to collect information from a user, HTML Forms are essential. For example, during the user registration process, you might want to collect information such as a user's name, email address, phone number, and so on. A form will collect information from web users and then send this to the back-end applications such as CGI or PHP script, and many others. Based on the established requirement logic inside the application, the back-end application will do the necessary processing on the provided data.  Text fields, text area fields, drop-down menus, radio buttons, checkboxes, and other form components are possible.

Which all are the Form tag attributes in HTML?

Attribute Description
accept-charset It is used to accept-charset parameter defines which character encodings will be utilised for form submission.
action When a form is submitted, the action property indicates where the form-data should be sent.
autocomplete The autocomplete property defines whether autocomplete should be enabled or disabled for a form. When autocomplete is enabled, the browser will automatically complete values based on previous values given by the user.
enctype The enctype parameter defines how the user entered form data should be encoded before being submitted to the server.
method The method property determines how form-data should be transmitted. Form data can be provided as URL variables by using the method value as "get" or as an HTTP post transfer by using the method value as "post".
name A form's name is specified through the name attribute. The name attribute is used to refer to items in a JavaScript or form data after a form has been submitted.
novalidate The novalidate is a boolean attribute. It is used to state whether the form-data which has been imputed by the user should not be verified when submitted if it is present.
rel The rel property is used to provide the relationship between the current document and the linked document.
target The target parameter specifies a name or a keyword that defines where the response obtained after submitting the form should be displayed.

Which all are the Form tag used in HTML?

Tags Description
<form> It is used to specify the HTML form. Every form element will be enclosed within this tag.
<input> It is used to specify type of input control.
<textarea> It is used to specify the input field with multiple lines
<label> It is used to specify the label of an input element.
<fieldset> It is used to organize the connected elements into a form.
<legend> It is used to specify a caption to the organised <fieldset> tag.
<select> It is used to specify a drop-down list.
<option> It is used to specify options in the drop-down list.
<optgroup> It is used to specify a collection of related alternatives in the option tag.
<button> It is used to specify buttons that can be clicked.
<datalist> It is used to define a set of pre-defined input control choices.
<keygen> It is used to specify a form key-pair generator field.
<output> It is used to specify the outcome of a computation.

<form> element in HTML

The <form> element in HTML is used to create a document area that accepts user input. It has a number of interactive features for sending data to a web server, such as an input field, a text area, a password field, and so on.


<form>  
//Form elements  
</form>  
 

<input> element in HTML

The <input> element in HTML is a basic form element. It is used to construct form fields that accept the input from the users. We may utilize multiple input fields to collect different information from the user. 

Example: HTML input field to accept the name


<form>  
  Name:
  <input type=“text”  name=“username”>
</form>  
 
HTML Form

<textarea> element in HTML

The <textarea> element in HTML is a basic form element. It is used to multi-line input from the users. The size of a <textarea> can be specified using the "rows" or "cols" attributes or using CSS. 

Example: HTML input field to accept the address


<form>  
  Address:<br>
  <textarea name=“address” cols=25 rows=5></textarea>
</form>  

 
HTML Form

<label> element in HTML

The < label > element in HTML is a basic form element. It is used to give the label to the form input controls.  

Example: HTML Label for text field


<form>  
  <label for="name">Name: </label>
  <input type="text" name="name" id="name">
</form>
 
HTML Form

Various types of Input Controls in HTML Forms

The type attribute in the input element is used to specify the various types of input controls in the HTML Forms.

type Description
text It is used to specify a single line input field.
password It is used to specify a single line password input field.
submit It is used to specify a form submit button.
reset It is used to specify a reset button.
radio It is used to specify a radio button it helps to select only one option.
checkbox It is used to specify a check box which helps to select multiple options.
button It is used to specify a clickable button.
file It is used to specify a file upload field.
image It is used to specify buttons with images as a background
color It is used to specify a color select field.
date It is used to specify a date selection field.
datetime-local It is used to specify a date and time selection field.
email It is used to specify an email input field.
month It is used to specify a month selection field.
number It is used to specify a numeric input field.
url It is used to specify a url input field.
week It is used to specify a week selection field.
search It is used to specify a search field.
tel It is used to specify a telephone number input field.

Input text field in HTML Form

A single-line input text field is defined with an <input> element of type "text". By default, the type of the input element will be the text itself.

Example: HTML input text field


<form>  
  <label for="name">Name: </label>
  <input type="text" name="name" id="name">
</form>
 
HTML Form

Password field in HTML Form

The <input> element of type "password" allows a user to safely enter a password in a website. The text supplied in the password field was transformed to "*" or "." so that it could not be seen by another user.

Example: HTML input password field


<form>  
  <label for="name">UserName: </label>
  <input type="text" name="name" id="name">
  <label for="password">Password: </label>
  <input type="password" name="password" id="password">
</form>  
 
HTML Form

Submit button in HTML Form

When the click event happens, the <input> element of type "submit" defines a submit button that sends the form to the server.

Example: HTML Submit button


<form>  
  <label for="name">UserName: </label>
  <input type="text" name="name" id="name">
  <label for="password">Password: </label>
  <input type="password" name="password" id="password"><br>
  <input type="submit">
</form>  
 
HTML Form

Reset button in HTML Form

The input type "reset" is likewise specified as a button, however, when the user makes a click event, it resets all inputted values by default.

Example: HTML Reset button


<form>  
  <label for="name">UserName: </label>
  <input type="text" name="name" id="name">
  <label for="password">Password: </label>
  <input type="password" name="password" id="password"><br>
  <input type="submit">
  <input type="reset">
</form>  
 
HTML Form

Radio button in HTML Form

The radio buttons are defined by the <input> type "radio," which allows the user to select one option from a group of related possibilities. At any one moment, just one radio button choice can be selected.

Example: HTML Radio button


<form>  
  Select Your Favourite Programming Language <br>
  <input type="radio" name="lang" value="python">Python <br>
  <input type="radio" name="lang" value="js">JavaScript <br>
  <input type="radio" name="lang" value="php">PHP <br>
  <input type="radio" name="lang" value="java">Java <br>
</form>  
 
HTML Form

Checkbox in HTML Form

The <input> type "checkbox" is represented as square boxes that may be selected or unchecked to choose selections from a list.

Example: HTML Checkbox


<form>  
  Select Your Favourite Programming Languages <br>
  <input type="checkbox" name="lang1" value="python">Python<br>  
  <input type="checkbox" name="lang2" value="js">JavaScript<br>  
  <input type="checkbox" name="lang3" value="php">PHP<br>  
  <input type="checkbox" name="lang4" value="java">Java<br>  
</form>  
 
HTML Form

Button in HTML Form

The input type "button" specifies a basic push button that may be configured to control a functional event such as the click event.

Example: HTML Button


<form>        <input type="button" value="I am a Button"  are learning HTML')">  
</form>

 
HTML Form

Date field in HTML Field

The <input> element of type "date" creates an input field that allows the user to enter the date in a certain format. The date can be entered using a text field or a date picker interface.

Example: HTML Date


<form>  
     <input type="date">  
</form>
 
HTML Form