Html 简明教程

HTML - Form Controls

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

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

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

Input Types

Description

<input type = "text">

文本输入通常用于接受用户的字符信息，例如用户名、密码、地址。

<input type = "number">

数字类型输入用于接受用户的数字输入。

<input type = "checkbox">

复选框输入显示为一个方框，可以根据用户需求进行选中或取消选中。

<input type = "radio">

单选框输入定义了一个单选按钮，用于在多个选项中选择一个。

<select>

选择标签用于在表单中创建一个下拉列表。

<input type = "datetime-local">

日期时间输入类型定义了一个用于选择月份的图形界面。

<input type = "date">

日期输入类型定义了一个用于选择日期的图形界面。

<input type = "month">

月份输入类型定义了一个用于选择月份的图形界面。

<input type = "week">

星期输入类型定义了一个用于选择星期几的图形界面。

<input type = "time">

时间输入类型定义了一个用于选择时间的图形界面。

<input type = "range">

范围输入类型用于定义一个滑块控件，用于输入一个数字。

<input type = "email">

电子邮件输入类型用于定义一个接受电子邮件的输入区域。

<input type = "url">

URL 输入类型用于定义一个接受 URL 的输入区域。

Examples of HTML form Control

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

Text input Control

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

  1. Single-line text input controls

  2. Password input controls

  3. Multi-line text input controls

Single-line text input Control

单行文本输入控件用于仅需要一行用户输入的项，例如搜索框或姓名。它们使用 HTML <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 。

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

<!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> 标记创建多行输入控件。

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

<!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 。

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

<!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 。

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

<!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 提供在下拉列表形式中列出不同选项的功能，用户可以选择一个或多个选项。

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

<!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 。

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

<!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 类型属性来创建一个可点击的按钮。

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

<!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 服务器，并且在此处它将根据传入的当前页决定接下来显示第几页。

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

<!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 编码，时区设置为浏览器的本地时区。

<!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 编码。

<!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 编码。

<!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 编码。

<!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 编码。

<!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。

<!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 类型用于输入框，该输入框应该包含一个数字范围中的值。

<!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 格式的电子邮件地址。

<!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 格式的电子邮件地址。

<!DOCTYPE html>
<html>

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

</html>