HTML form

What is a form

The form is for collecting different types of user input, such as:

Website registration  

log in  

Post resume

Forum post

Replies S voting, etc.

HTML form

A form is an area that contains form elements. A web page may have multiple forms, but a form corresponds to a form area, and only form items of the current form area can be submitted.

Form elements allow users to type in forms, such as textarea, drop-down lists, radio-buttons, checkboxes, and more.

The form is set using the form tag <form>:

<form method="delivery method" action="server file address">

.input element


Action is used to configure where the form data is transferred, usually the address of a dynamic script, such as the address of a PHP file login.php  

Method can be GET or POST (if not set, the system defaults to GET, but in most cases we use POST, GET is submitted as a parameter, the user can directly see the submitted parameters, post is via HTTP post mechanism, will Each field in the form is placed in the HTML HEADER along with the content placed in the HTML HEADER. The user does not see the process.)

HTML form - input element
The form tag used in most cases is the input tag (<input>).

The input type is defined by the type attribute (type). The most common input types used are as follows:

Text field

The text field is set by the <input type="text"> tag, and the text field is used when the user wants to type letters, numbers, etc. into the form.


Password field

The password field is defined by the tag <input type="password">:

Note : Password field characters are not displayed in plain text, but instead are replaced with an asterisk or dot.

Radio button

<input type="radio"> tag defines form radio button options

Check box

<input type="checkbox"> A checkbox is defined. The user needs to select one or several options from several given choices.

Submit button

<input type="submit"> defines the submit button.

When the user clicks the confirmation button, the contents of the form are transferred to another file. The action attribute of the form defines the file name of the destination file. This file defined by the action attribute usually performs related processing on the received input data. :

If you type a few letters in the text box above and click the OK button, the input data will be sent to the "action.php" page as a post. This page will display the results of the input.

HTML form tag

Label      Description
<form>  Define a form for user input
<input>Define input fields
<textarea> Define a text field (a multi-line input control)
<label> The label defining the <input> element, typically the input title
<fieldset>   Defines a set of related form elements and includes them with a bounding box
<legend>   Defines the title of the <fieldset> element
<select>Defined a drop-down list of options
<optgroup> Define option groups
<option>  Define options in the drop-down list
<button>   Define a click button
<datalist>Specify a list of predefined input control options
<keygen>The key pair generator field that defines the form
 <output>Define a calculation result

To learn more about HTML form tags, please visit our HTML reference manual.

More examples

This example demonstrates how to create a simple drop-down list box in an HTML page. The drop-down list box is an optional list. A drop-down list with pre-selected values.

This example demonstrates how to create a text field (multi-line text input control). Users can write text in the text field. The number of words that can be written to characters is unlimited , as well as a button. You can customize the text on the button.

Form instance

This example demonstrates how to add a form to a page. This form contains an input box, a text field, a radio button, a check box, a drop-down list, and a confirmation button.

Male female

Click the "Submit" button and the form data will be sent to the form.php page as a post.


This example demonstrates how to send an email from a form.

Click the "Submit" button, the form data will be sent to the form.php page as a post. Click the "Reset" button to clear the content you entered.

Last Updated: 2018-07-06 12:32:44 By akshay


share_facebook share_twitter share_google_plus

Please Comment Here :