HTML Form Elements

In Web Development Technologies (especially for the front-end), “HTML” is the basic or primary markup language that we use to display the web pages (the page which we see on a website). Sometimes, in an HTML page, along with the other content display, we need to take some user inputs as well (especially in dynamic web sites). And to take the user inputs in an HTML page, we need to use multiple form elements to create those forms properly, and with the help of those forms, we correctly take the user inputs and put those inputs (data) in our internal Databases at the back-end. Now, as we know that HTML codes are written under various tag elements (), so, basically, “HTML Form Elements” are those elements that are used inside a “

” tag, and these elements, along with other standard and unique attributes, give a form and structure as well, which let the users know what to do with the form and how to proceed in a structural manner.

Explain HTML Form Elements (including syntax and examples with output)

Since there are multiple HTML form elements to create a form & give the form a proper look in a structured way, below are some of them explained one by one.

SL No.	Tags	Meanings / Descriptions
1		To define a HTML form for user inputs
2		To define input control
3		To specify a list of pre-defined options
4		To define group related elements
5		To define a secure input
6		To define a label of input
7		To define a caption for fieldset
8		To define a group of similar options.
9		To define an option for the drop-down.
10		To define a  result
11		To define a list of the drop-down.
12		To define a multiline input area.

SL No.

Tags

Meanings / Descriptions

  1

To define a HTML form for user inputs

  2

To define input control

  3

To specify a list of pre-defined options

  4

To define group related elements

  5

To define a secure input

  6

To define a label of input

  7

To define a caption for fieldset

  8

  To define a group of similar options.  

  9

  To define an option for the drop-down.

  10

  To define a  result

  11

  To define a list of the drop-down.

  12

  To define a multiline input area.

Note: Most of the HTML tag elements discussed here are for HTML5, the latest HTML language version. The tag element is no longer supported in HTML5; it was actually used for the prior version of HTML.

Syntax and Example

Some syntaxes and examples of HTML Form Elements with outputs are discussed below:

1. “

” element

This element can contain many other elements as well including the below:

Example for a “

” element with input and submit button:

Syntax:

Your Name:

Codes:

Your name:

Output:

2. “” element

 This element is an inline element and belongs to the form-element group.

Syntax:

Input name:
Input age:

Codes:

Input name:
Input age:

Output:

       

3. “

It usually specifies a pre-defined list of inputs for element where users can choose any option from the pre-defined list.

Syntax:

<input list="fruits">
<datalist id="fruits">
<option value="Mango">
</option>
<option value="Apple">
</option>
<option value="Banana">
</option>
<option value="Pomegranate">
</option>
<option value="Pineapple">
</option></datalist>

Codes:

Output:

4. “

” element

This element is basically used to group related elements in forms and draws a box around similar elements.

Syntax:

Celebrity:

Name:
Phone:
Age:

Codes:

Celebrity:

Name:
Phone:
Age:

Output:

5. “” element

This element may be located outside the form, but it might still be a part of the form. Usually, this element is used to specify one or more forms. This element is newly used in the HTML5 version to generate an encryption key to pass encrypted data over a form in a website based on HTML.

Syntax:

<keygen form="form_id"></keygen>

Codes:

Username:

The below mentioned keygen field is outside of the form, but it's still a part of the above form.

Encryption:

Output:

6. “” element

This element basically gives a name for the input form to make the users understand what input data it should be. It acts as an indicator for users.

Syntax:

<label for="control id"> ... </label>

Codes:

<title>Example of HTML label tag</title>

Boy Girl

The above is the detailed content of HTML Form Elements. For more information, please follow other related articles on the PHP Chinese website!