HTML Form Elements-HTML Tutorial-php.cn

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	</p> </td>	To define a multiline input area.

SL No.

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:

</li>

Example for a “” element with input and submit button:

Syntax:

 Your Name:

Copy after login

Codes:

    Your name:

Copy after login

Output:

HTML Form Elements

2. “” element

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

Syntax:

 Input name: 
 Input age:

Copy after login

Codes:

    Input name: 
 Input age:

Copy after login

Output:

HTML Form Elements

3. “” element

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

Syntax:

Copy after login

Codes:

Copy after login

Output:

HTML Form Elements

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:

Copy after login

Codes:

  Celebrity: Name: 
 Phone: 
 Age:

Copy after login

Output:

HTML Form Elements

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:

Codes:

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

Encryption:

Copy after login

Output:

HTML Form Elements

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:

...

Copy after login

Codes:

  Example of HTML label tag 
    Boy  Girl

Copy after login

Output:

HTML Form Elements

7. “” element

This element actually defines a caption for a

element. It’s kind of a supporting element for another element, a part of the group element.

Syntax:

 Celebrity: Name: 
 Phone: 
 Age:

Copy after login

Codes:

Example of HTML legend tag
           
            
             
            
           
           
            
             
            
           
  Celebrity: Name: 
 Phone: 
 Age:

Copy after login

Output:

HTML Form Elements

8. “” element

This element is a group-related element used for options in a drop-down list in an HTML form. It helps the users to handle a long list easily.

Syntax:

Copy after login

Codes:

Example of HTML legend tag

Copy after login

Output:

HTML Form Elements

9. “

This element is used to represent an option from a dropdown list under Copy after loginOutput:10. “” elementThis element is basically used to show the output of a calculation (e.g. in a scripted calculation).Syntax: ... Copy after loginCodes: Example of HTML output Tag

Copy after loginOutput:11. “” element

This element is used to make a selection from a list within a form.

Syntax:

Copy after login

Codes:

Example of HTML select Tag

Copy after login

Output:

HTML Form Elements

12. “

This element is used to define multi-line text inputs (e.g. for address).

Syntax:

 Put your Comment: Put here...

Copy after login

Codes:

   Example of HTML textarea Tag 
   Put your Comment: Put here...

Copy after login

Output:

HTML Form Elements

Conclusion

There are so many HTML form elements available; in this article, we have discussed some of the basic or native form elements. It helps us to create proper and functional HTML forms. The point to be noted is that most of the HTML form elements need a few attributes to be included along with them. Some of the elements depend on each other, which must be coded together. All the browsers may not display the elements which are already deprecated.

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