Elements of a form Tag
Last Updated :
16 Aug, 2021
Forms are used to take input from the user. It can be used for registration, logging in on a website or to create your profile on a website, etc. The information that can be collected from a form can be of various types. The form data is handled by the backend. There are various form elements that we can use like text-fields, text-area, drop-down list, select, checkboxes, radio, etc.
The tag that we used to create this form is <form> tag and it has this syntax that we have to follow:
<form action="form-url" method="form-method">
// various the form elements
</form>
The following HTML elements can be used with the form element:
1. input: This is one of the most used form elements. It is used in several ways depending on what type of field we want to define.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">
input element
</h1>
<form style="text-align:center;">
<label for="fname">
FirstName
</label>
<input type="text"
id="fname"
name="fname">
</form>
</body>
</html>
|
Output:
2. label: It is used to define the label for the field that we have defined. It is useful when the user tries to focus on the input element. So we use the label element with the input element, as the ‘for’ attribute of the label element is equal to the ‘id’ attribute of the input element.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">
label element
</h1>
<form style="text-align:center;">
<label for="fname">
FirstName
</label>
<input type="text"
id="fname"
name="fname">
</form>
</body>
</html>
|
Output:
Here we can see how the label is defining the text field that we have created using the input element.
3. select: It is used to create a drop-down list. This allows users to select as many options as the user wants. The behavior of the attribute can be changed according to the situations while we are using this element to create a drop-down list.
Such attributes are:
- multiple: This attribute is used to let the user select one or multiple options. Depending on this particular attribute we can compare this with Radio buttons (this allows the user to select one option at a time) and the checkbox (this allows the user to select multiple options).
- size: This attribute is used to show the no of values that are present in the list. For example, in a list, there are more than 5 options available. Therefore if we want to make the options visible, then we can use the size attribute.
Example 1: Using the select element with no attributes
HTML
<!DOCTYPE html>
<html>
<body>
<form style="text-align:center;">
<h2 style="text-align:center;">
select what would you like to do
</h2>
<select>
<option>cars</option>
<option>Malls</option>
<option>center</option>
</select>
</form>
</body>
</html>
|
Output:
Example 2: Using the select element with multiple attributes
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="text-align:center;">
what is your favourite car
</h2>
<form style="text-align:center;">
<select id="cars"
name="cars"
multiple>
<option>sedan</option>
<option>tesla</option>
<option>Toyota</option>
<option>Audi</option>
</select>
</form>
</body>
</html>
|
Output:
Example 3: Using the size attribute in the select element
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="text-align:center;">
which car do you have?
</h2>
<form style="text-align:center;">
<select id="cars" name="cars"
size="3" multiple>
<option>sedan</option>
<option>tesla</option>
<option>Toyota</option>
<option>Audi</option>
</select>
</form>
</body>
</html>
|
Output:
4. textarea: This is used to create a multi-line text field. This is used mainly in a form, to collect reviews and comments. The size of the text area can be specified by the attributes like cols and rows. So the cols attribute is used to specify the width and the row attribute is used to specify the number of lines in the text area.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="text-align:center;">
textarea
</h2>
<form style="text-align:center;">
<textarea row="4" cols="50">
</textarea>
</form>
</body>
</html>
|
Output:
5. button: This is used to create a clickable button. It has one attribute that is the ‘type’ attribute. This attribute is used to specify the button that will be used on the page depending upon the situation. Different browsers may have a default styling of the button.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color:blue;">button</h2>
<button type="submit">submit</button>
</body>
</html>
|
Output:
6. fieldset and legend: These elements are generally used together. There use cases are as follows:
- fieldset: This is used to group data that are related to each other in a form.
- legend: It is used to define a caption for the fieldset element.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="text-align:center;">
FIELDSET AND LEGEND ELEMENTS
</h2>
<form style="color:red;">
<fieldset>
<legend>
the personal informations
</legend>
<label for ="name">name
</label>
<input type="text" id="name" name="name"
placeholder="enter your name"
required>
</fieldset>
</form>
</body>
</html>
|
Output:
7. datalist: This is used to create some pre-defined options in a list. When a user will input data, the user will get these options getting displayed that can be selected. The list attribute which is in the input element must refer to the id of the datalist element.
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="text-align:center;color:red;">
DATALIST ELEMENT
</h2>
<form style="text-align:center;">
<input list="games">
<datalist id="games">
<option value="cricket">
<option value="football">
<option value="basketball">
<option value="volleyball">
</datalist>
</form>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome 6.0 and above
- Internet Explorer 9.0 and above
- Mozilla 4.0 and above
- Opera 11.1 and above
- Safari 5.0 and above
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...