HTML form


May 02, 2021 14:31 HTML


Table of contents


HTML forms and inputs


HTML forms are used to collect different types of user input.


HTML form

Online instance

Create a text field
This example shows how to create a text field on an HTML page. Users can write text in a text field.

Create a password field
This example shows how to create a password domain for HTML.

(More instances can be found at the bottom of this page.)


HTML form

A form is an area that contains form elements.

Form elements are form elements that allow users to enter content in a form, such as text fields, drop-down lists, radio-buttons, check boxes, and so on.

The form uses the form label , slt;form , to set up:

<form>

.

input elements

.

</form>


HTML Form - Enter elements

In most cases, the form label used is the input label. The element is the most important form element.

The input type is defined by the type property. Most of the types of inputs that are often used are:


Text Fields

Text fields are set by the "text" label, which is used when a user wants to type letters, numbers, and so on into a form. You can create text input boxes in Programming Tests!

<form>

姓名: <input type="text" name="firstname"><br>

电话号码: <input type="text" name="lastname">

</form>


Try it out . . .

The browser appears as follows:

Name:


Phone number:

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


The password field

The password field is defined by the label slt;input type,"password":

<form>

密码: <input type="password" name="pwd">

</form>


Try it out . . .

The browser looks like this:

Password:

Note: Password field characters are not displayed clearly, but are replaced by asterisks or dots.


Radio Buttons

The label defines the form radio box option. Practice using the turn button in the programming test!

<form>

<input type="radio" name="sex" value="male">男<br>

<input type="radio" name="sex" value="female">女

</form>


Try it out . . .

The browser looks like this:

Man


Woman


Check box (Checkboxes)

The check box is defined. T he user needs to select one or more options from a given selection. Learn to use the check box in a live test!

<form>

<input type="checkbox" name="vehicle" value="Bike">我有自行车<br>

<input type="checkbox" name="vehicle" value="Car">我有小车

</form>


Try it out . . .

The browser looks like this:

I have a bike


I have a car


Submit Button

The submission button is defined.

When the user clicks the confirmation button, the contents of the form are transferred to another file. T he action properties of the form define the file name of the destination file. T his file, defined by the action properties, is usually processed in connection with the input data received. :

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>


Try it out . . .

Try it out . . .

The browser displays screenshots as follows:

HTML form


If you type a few letters into the text box and click the confirmation button, the input data is transferred to the html_form_action.php" page. The page will show the results of the input.


HTML form More instances

Radio buttons
This example shows how to create a turn button in HTML.

Check box (Checkboxes)
This example shows how to create check boxes in an HTML page. Users can select or uncheck the box.

A simple pull-down list
This example shows how to create a simple pull-down list box in an HTML page. The pull-down list box is an optional list.

Preselect the pull-down list
This example shows how to create a simple pull-down list with preselected values.

Textarea
This example shows how to create a text field (a multi-line text input control). U sers can write text in a text field. There is no limit to the number of words that can be written to characters.

Create a button
This example shows how to create a button. You can customize the text on the button.

HTML form The form instance

A form with a border
This example shows how to draw a box with a title around the data.

Form with input box and confirmation button
This example shows how to add a form to a page. This form contains two input boxes and a confirmation button.

A form with a check box
This form contains two check boxes and a confirmation button.

A form with a turntable button
This form contains two check boxes and a confirmation button.

Send an e-mail message from the form
This example shows how to send an e-mail message from a form.


HTML form labels

New : HTML5 new label

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签,一般为输入标题
<fieldset> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
New 指定一个预先定义的输入控件选项列表
New 定义了表单的密钥对生成器字段
New 定义一个计算结果