HTML forms and input

HTML forms are used to collect input from users.

An HTML form represents an area in a document that contains interactive controls and sends information collected from the user to a web server.

HTML forms usually contain various elements such as input fields, check boxes, radio buttons, drop-down lists, etc.

The following is an example of a simple HTML form:

• <form>The element is used to create a form, actionthe attribute defines the target URL for submitting form data, and methodthe attribute defines the HTTP method for submitting data (here “post” is used).
• <label>The element is used to add labels to form elements to improve accessibility.
• <input>The element is one of the most commonly used form elements. It can create text input boxes, password boxes, radio buttons, check boxes, etc. typeAttributes define the type of input boxes, idattributes are used to associate <label>elements, and nameattributes are used to identify form fields.
• <select>The element is used to create a drop-down list, while <option>the element is used to define the options in a drop-down list.

Examples

<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

Try it yourself »

Online Instance

Examples

The following example creates a form with two input boxes:

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Try it yourself »

Examples

The following example creates a form that contains a normal input box and a password input box:

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

Try it yourself »

HTML forms

A form is an area that contains form elements.

Form elements allow users to enter content in the form, such as text areas (textarea), drop-down lists (select), radio buttons (radio-buttons), check boxes (checkbox), etc.

We can use the <form> tag to create a form:

Examples

<form>
.
input element
.
</form>

HTML Form – Input Elements

The form tag used in most cases is the input tag <input> .

The input type is defined by the type attribute.

Next we introduce several commonly used input types.

Text Fields

The text field is set through the <input type=”text”> tag. When the user wants to type letters, numbers, etc. in the form, the text field is used.

Examples

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

The browser displays the following:

Note: The form itself is not visible. Also, in most browsers, the default width of the text field is 20 characters.

Password field

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

Examples

<form>
Password: <input type="password" name="pwd">
</form>

The browser display effect is as follows:

Note: The characters in the password field will not be displayed in plain text, but will be replaced 
by asterisks * or dots .

Radio Buttons

The <input type=”radio”> tag defines the radio button options for the form:

Examples

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

The browser display effect is as follows:

Checkboxes

<input type=”checkbox”> defines a check box.

A checkbox can select one or more options:

Examples

<form>
<input type="checkbox" name="vehicle[]" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle[]" value="Car">我喜欢小汽车
</form>

The browser display effect is as follows:

Submit button

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

When the user clicks the OK button, the form’s contents are sent to the server. The action attribute of the form defines the file name on the server.

The action attribute will process the received user input data:

Examples

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

The browser display effect is as follows:

If you type a few letters in the text box above and click the confirm button, the input data will be sent to the html_form_action.php file, and the page will display the input results.

The above example has a method attribute, which is used to define the submission method of the form data. It can be the following values:

• post : refers to the HTTP POST method. The form data will be included in the form body and then sent to the server. It is used to submit sensitive data such as username and password.
• get : The default value, which refers to the HTTP GET method. The form data will be appended to the URL of the action attribute, with ? as a separator. It is generally used for non-sensitive information, such as paging. For example: https://www.runoob.com/?page=1, where page=1 is the data submitted by the get method.

Examples

<!-- The following form uses a GET request to send data to the current URL. The method defaults to GET. -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- The following form uses a POST request to send data to the current URL. -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- The form uses fieldset, legend, and label tags -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>

More examples

Radio buttons
This example demonstrates how to create radio buttons in HTML.

Checkboxes
This example demonstrates how to create checkboxes in an HTML page. The user can select or deselect the checkboxes.

simple drop-down
list box in an HTML page. A drop-down list box is a list of selectable items.一个可选列表。

drop -down list with pre-selected values
This example demonstrates how to create a simple drop -down list with pre-selected values.

(a multi-line text input control). Users can enter text in the text area. There is no limit to the number of characters that can be entered.

Creating a Button
This example demonstrates how to create a button. You can customize the text on the button.

Form Example

a box with a title around data
This example demonstrates how to draw a box with a title around data.

This form contains two input fields and a confirm button
This example demonstrates how to add a form to a page. This form contains two input fields and a confirm button 

Form with checkboxes
This form contains two checkboxes and a confirm button.

Form with radio button
This form contains two radio buttons and a confirm button.

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

HTML form tags

New : HTML5 New Tags