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?

Which all are the Form tag used in HTML?

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

<form>  
  Name:
  <input type=“text”  name=“username”>
</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. 

<form>  
  Address:<br>
  <textarea name=“address” cols=25 rows=5></textarea>
</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.  

<form>  
  <label for="name">Name: </label>
  <input type="text" name="name" id="name">
</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.

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.

<form>  
  <label for="name">Name: </label>
  <input type="text" name="name" id="name">
</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.

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

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.

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

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.

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

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.

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

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.

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

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.

<form>        <input type="button" value="I am a Button"  are learning 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.

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