Html 简明教程

HTML - Form Controls

用于在浏览器中通过用户交互创建控件的 HTML 表单元素被称为 form controls 。

HTML form elements that are used to create controls for the user interaction within the browser are termed as form controls.

它们允许用户输入信息以便进行服务器端处理。根据创建表单时使用的控件类型，与服务器交互的性质会发生变化。举例来说，单选按钮通常用于接受性别信息。我们之前在讨论中使用了几个常见的表单控件，现在我们将深入探索这些元素。

They enable users to enter information for the server side processing. The nature of interaction with the server can vary depending on the type of control used while creating the form. For example, radio buttons are typically used to accept gender information. We have used several common form controls in previous discussions, we will now dive into a more detailed exploration of these elements.

有不同类型的表单控件，我们可以使用 HTML 表单收集数据。

There are different types of form controls that we can use to collect data using HTML form.

Input Types

Description

<input type = "text">

Text input usually used to accept characters from user such as username, password, address.

<input type = "number">

The input type number used to accept number as input from user.

<input type = "checkbox">

Checkbox input is shown as a square box, that can be checked or unchecked based on user requirement.

<input type = "radio">

Radio input defines a radio button for selecting one of the many choices.

<select>

Select tag is used to create a dropdown list in a form.

<input type = "datetime-local">

The input type datetime defines a graphical interface to pick a month.

<input type = "date">

The input type date defines a graphical interface to pick a date.

<input type = "month">

The input type month defines a graphical interface to pick a month.

<input type = "week">

The input type week defines a graphical interface to pick a week.

<input type = "time">

The input type time defines a graphical interface to pick a time.

<input type = "range">

The input type range used to define a slider control for entering a number.

<input type = "email">

The input type email is used to define an input area that accepts email.

<input type = "url">

The input type url is used to define an input area that accepts url

Examples of HTML form Control

下面是一些用 HTML 中的表单控件元素来说明使用情况的示例。

Here are some examples that illustrate use of form control element in HTML.

Text input Control

文本输入控件进一步分为三个主要类别。

The text input controls are further divided into three main categories.

  1. Single-line text input controls

  2. Password input controls

  3. Multi-line text input controls

Single-line text input Control

单行文本输入控件用于仅需要一行用户输入的项，例如搜索框或姓名。它们使用 HTML <input> 标记创建。

The single-line text input control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

以下示例说明了如何获取单行文本输入。

The following example illustrates how to take a single-line text input.

<!DOCTYPE html>
<html>

<head>
   <title>Text Input Control</title>
</head>

<body>
   <form >
      First name:
      <input type = "text" name = "first_name" />
      <br><br>
      Last name:
      <input type = "text" name = "last_name" />
   </form>
</body>

</html>

Password input Control

密码输入控件也是单行文本输入控件，但它会在用户输入字符时对其进行屏蔽。它们也使用 HTML <input> 标记创建，但类型属性设置为 password 。

The password input control is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set to password.

在以下示例中，我们将演示如何获取用户的密码输入。

In the following example, we will demonstrate how to take password input from users.

<!DOCTYPE html>
<html>

<head>
   <title>Password Input Control</title>
</head>

<body>
   <form >
      User ID :
      <input type = "text" name = "user_id" />
      <br><br>
      Password:
      <input type = "password" name = "password" />
   </form>
</body>

</html>

Multiple-Line Text Input Control

当用户需要提供可能比单句更长的详细信息时，可以使用多行文本输入控件。使用 HTML <textarea> 标记创建多行输入控件。

The multiple line text input control is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

以下示例演示如何使用多行文本输入获取项目描述。

The following example demonstrates how to use multi-line text input to take item description.

<!DOCTYPE html>
<html>

<head>
   <title>Multiple-Line Input Control</title>
</head>

<body>
   <form>
      Description : <br />
      <textarea rows = "5"
                cols = "50"
                name = "description">
         Enter description here...
      </textarea>
   </form>
</body>

</html>

Checkbox input Control

Checkboxes 用于在需要选择多个选项时。它们也使用 HTML <input> 标记创建，但类型属性设置为 checkbox 。

Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox.

在此 HTML 代码中，我们使用两个复选框创建一个表单。

In this HTML code, we are creating a form with two checkboxes.

<!DOCTYPE html>
<html>

<head>
   <title>Checkbox Control</title>
</head>

<body>
   <form>
      <input type = "checkbox"
             name = "maths"
             value = "on">
      Maths
      <input type = "checkbox"
             name = "physics"
             value = "on">
      Physics
   </form>
</body>

</html>

Radio Button Control

当在许多选项中，只要求选择一个选项时，使用 Radio buttons 。它们也使用 HTML <input> 标记创建，但类型属性设置为 radio 。

Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio.

在此示例代码中，我们创建一个包含两个单选按钮的表单。

In this example code, we are creating a form with two radio buttons.

<!DOCTYPE html>
<html>

<head>
   <title>Radio Box Control</title>
</head>

<body>
   <form>
      <input type = "radio"
             name = "subject"
             value = "maths">
      Maths
      <input type = "radio"
             name = "subject"
             value = "physics">
      Physics
   </form>
</body>

</html>

Select Box Control

select box 提供在下拉列表形式中列出不同选项的功能，用户可以选择一个或多个选项。

A select box provides features to list down various options in the form of drop down list, from where a user can select one or more options.

以下 HTML 代码展示了如何创建一个带有下拉框的表单。

The following HTML code illustrates how to create a form with a drop down box.

<!DOCTYPE html>
<html>

<head>
   <title>Select Box Control</title>
</head>

<body>
   <form>
      <select name = "dropdown">
         <option value = "Maths" selected>
            Maths
         </option>
         <option value = "Physics">
            Physics
         </option>
         <option value = "Chemistry">
            Chemistry
         </option>
      </select>
   </form>
</body>

</html>

File Upload Box

如果我们想要允许用户上传文件到我们的网站，我们需要使用一个 file upload box ，它也被称为文件选择框。它也使用 <input> 元素创建，但类型属性设置为 file 。

If we want to allow a user to upload a file to our web site, we will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file.

在下面的示例中，我们将创建一个带有文件上传框的表单，它只接受图片。

In the following example, we will create a form with one file upload box that accepts only images.

<!DOCTYPE html>
<html>

<head>
   <title>File Upload Box</title>
</head>

<body>
   <form>
      <input type = "file"
             name = "fileupload"
             accept = "image/*" />
   </form>
</body>

</html>

Button Control

在 HTML 中有可以多种创建 clickable buttons 的方式。我们可以通过给 <input> 标记设置 button 类型属性来创建一个可点击的按钮。

There are various ways in HTML to create clickable buttons. We can create a clickable button using <input> tag by setting its type attribute to button.

在此 HTML 代码中，我们正在创建一个包含三种不同类型按钮的表单。

In this HTML code, we are creating a form with three different types of buttons.

<!DOCTYPE html>
<html>

<head>
   <title>File Upload Box</title>
</head>

<body>
   <form onsubmit="return false;" >
      <input type = "submit"
             name = "submit"
             value = "Submit" />
      <br><br>
      <input type = "reset"
             name = "reset"
             value = "Reset" />
      <br><br>
      <input type = "button"
             name = "ok"
             value = "OK" />
      <br><br>
      <button>Submit</button>
   </form>
</body>

</html>

Hidden Form Control

Hidden form controls 用于隐藏页面内的数据，稍后可以将其推送到服务器。这种控件隐藏在代码中，不会出现在实际页面中。例如，正在使用以下隐藏表单来保持第几页内容。当用户点击下一页时，隐藏控件的值将发送到 Web 服务器，并且在此处它将根据传入的当前页决定接下来显示第几页。

The Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which page will be displayed next based on the passed current page.

以下示例显示了隐藏控件的使用。

The following example shows the usage of hidden control.

<!DOCTYPE html>
<html>

<head>
   <title>File Upload Box</title>
</head>

<body>
   <form onsubmit="return false;">
      <p>This is page 10</p>
      <input type = "hidden"
             name = "pagename"
             value = "10" />
      <input type = "submit"
             name = "submit"
             value = "Submit" />
      <input type = "reset"
             name = "reset"
             value = "Reset" />
   </form>
</body>

</html>

Date and time Selector

在 HTML 中， datetime control 表示日期和时间（年、月、日、时、分、秒、几分之一秒），根据 ISO 8601 编码，时区设置为浏览器的本地时区。

In HTML, the datetime control represents date and time (year, month, day, hour, minute, second, fractions of a second) together encoded according to ISO 8601 with the time zone set to local timezone of browser.

<!DOCTYPE html>
<html>

<head>
   <title>Date and Time Picker</title>
</head>
;
<body>
   <form onsubmit="return false;">
      Date and Time:
      <input type="datetime-local" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

Date Selector

HTML date control 用于指定日期（年、月、日），根据 ISO 8601 编码。

The HTML date control is used to specify a date (year, month, day) encoded according to ISO 8601.

<!DOCTYPE html>
<html>

<head>
   <title>Date Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date:
      <input type="date" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

Month Selector

在 HTML 中， month control 用于显示一个日期，它只包含一个年和一个周号，根据 ISO 8601 编码。

In HTML, the month control is used to display a date consisting of only a year and a month encoded according to ISO 8601.

<!DOCTYPE html>
<html>

<head>
   <title>Month Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date:
      <input type="month" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

Week Selector

正如名称所示， week control 显示一个日期，它只包含一个年和一个周号，根据 ISO 8601 编码。

As the name suggests, the week control displays a date consisting of only a year and a week number encoded according to ISO 8601.

<!DOCTYPE html>
<html>

<head>
   <title>Week Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date:
      <input type="week" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

Time Selector

HTML time control 指定时间、分、秒、几分之一秒，根据 ISO 8601 编码。

The HTML time control specify the hours, minutes, seconds, and fractional seconds encoded according to ISO 8601.

<!DOCTYPE html>
<html>

<head>
   <title>Time Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date:
      <input type="time" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

Number Selector

number controls 只接受数值。step 属性指定精度，其默认值为 1。

The number controls accepts only numerical value. The step attribute specifies the precision and its default values is 1.

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Select Number:
      <input type = "number"
               min = "0"
               max = "10"
               step "1"
               value = "5"
               name = "newinput" />
      <input type = "submit"
               value = "submit" />
   </form>
</body>

</html>

Range Control

range 类型用于输入框，该输入框应该包含一个数字范围中的值。

The range type is used for input fields that should contain a value from a range of numbers.

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Select Range :
      <input type = "range"
             min = "0"
             max = "10"
             step "1"
             value = "5"
             name = "newinput" />
      <input type = "submit"
             value = "submit" />
   </form>
</body>

</html>

Email Control

email 控件只接受电子邮件值。这种类型用于应包含电子邮件地址的输入框。如果你尝试提交一个简单文本，它强制只输入 email@example.com 格式的电子邮件地址。

The email control accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Enter email :
      <input type = "email" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>

</html>

URL Control

HTML URL control 只接受 URL 值。这种类型用于应包含一个 URL 地址的输入框。如果你尝试提交一个简单文本，它强制只输入 http://www.example.com 格式或 http://example.com 格式的电子邮件地址。

The HTML URL control accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Enter URL:
      <input type = "url" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>

</html>