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