HTML Form Elements

In this tutorial, I will be showing you all the HTML form elements you need to know and the major attributes that are mostly used with them.

FORM

<form> - This tag is the container that houses other form elements. It takes the following major attributes:

action - used to send user data to the server page (URL).
method - used to specify the HTTP method when submitting user data. The two types of form methods are: GET and POST
enctype - used to set how form data should be encoded; mostly used when there is an image or file to be submitted.

LABEL

<label> - This form element is use to label any other form element. It takes the following major attributes:

for - used to specify which element the label belongs to.
id - same function as the for attribute.

INPUT

<input> - This is an input form element that is used to collect user data depending on the type. It takes the following major attributes:

type - used to specify the type of data to be collected.
name - used to specify the name of the input element. Also, very useful when referencing.
value - used to set the value of the input element (this is what will be submitted).

TRY IT OUT YOURSELF

TEXTAREA

<textarea> - This is multi-line form element that is used to collect user data. It is mostly used for message box. It takes the following major attributes:

rows - used to set the number of rows (lines) to be seen.
cols - used to set the number of columns (width) to be seen.
name - used to specify the name of the element. Also, very useful when referencing.

TRY IT OUT YOURSELF

SELECT

<select> - This form element is used to create a dropdown-list of options to be selected. It is used together with the <option> tag. It takes the following major attributes:

id - used to set a unique identification of the element.
name - used to specify the name of the element. Also, very useful when referencing.

TRY IT OUT YOURSELF

OPTION

<option> - This is used to create options in the dropdown-list of the <select> element. It takes the following major attributes:

value - used to set a value of the option (this is what will be submitted).
selected - this attribute is used to pre-select an option. (this option appears first when your page loads up)
disable - this attribute is used to disable an option (this option can't be selected).

TRY IT OUT YOURSELF

BUTTON

<option> - The button tag is to used for submission of data to the specified URL on the action attribute in the <form> tag. It takes the following major attributes:

type - used to specify the type of input element.
name - used to specify the name of the input element. Also, very useful when referencing.
value - used to set the value of the element.

FIELDSET

<fieldset> - This form element tag is used to group related form elements together. It is used together with the <legend> which defines the caption for the fieldset.

TRY IT OUT YOURSELF

LEGEND

<legend> - Used to define the caption for the <fieldset> element.

TRY IT OUT YOURSELF

DATALIST

<datalist> - Used to set pre-defined options for the <input> element.

list attribute must be added to the <input> tag.
id attribute is used in the <datalist> tag
This values of the list and id attributes must be the same.
Datalist options are defined using the <option> tag.

TRY IT OUT YOURSELF

OPTGROUP

<optgroup> - Used to group related dropdown-list inside the <select> element.

label is used as the major attribute to set the caption for each group.

TRY IT OUT YOURSELF

TAGS	DESCRIPTION
<form>	Container that houses other form elements.
<label>	Used to label any other form element.
<input>	Input form element that is used to collect user data depending on the type.
<textarea>	This is multi-line form element that is used to collect user data.
<select>	Used to create a dropdown-list of options to be selected.
<option>	To create options in the dropdown-list of the <select> element
<button>	For submission of data to the specified URL on the action attribute in the <form> tag
<fieldset>	Used to group related form elements together
<legend>	Used to define the caption for the <fieldset> element.
<datalist>	Used to set pre-defined options for the <input> element.
<optgroup>	Used to group related dropdown-list inside the <select> element.

TIP:

Not all form elements must be used to create form, just choose the ones you can work with and master them very well.

HTML

BASIC

INTERMEDIATE

ADVANCE

HTML Form Elements

FORM

LABEL

INPUT

TEXTAREA

SELECT

OPTION

BUTTON

FIELDSET

LEGEND

DATALIST

OPTGROUP

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT