HTML - 表单控件

上一页
下一页

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

它们使用户能够输入信息以供服务器端处理。与服务器交互的性质可能会因创建表单时使用的控件类型而异。例如，单选按钮通常用于接受性别信息。我们在之前的讨论中使用了几个常见的表单控件，现在我们将深入探讨这些元素的更多细节。

我们可以使用多种类型的表单控件来使用 HTML 表单收集数据。

输入类型 描述
<input type = "text"> 文本输入通常用于接受用户的字符，例如用户名、密码、地址。
<input type = "number"> 输入类型数字用于接受用户输入的数字。
<input type = "checkbox"> 复选框输入显示为一个方框，可以根据用户需求选中或取消选中。
<input type = "radio"> 单选按钮输入定义一个单选按钮，用于从多个选项中选择一个。
<select> Select 标签用于在表单中创建下拉列表。
<input type = "datetime-local"> 输入类型 datetime 定义了一个图形界面来选择一个月。
<input type = "date"> 输入类型 date 定义了一个图形界面来选择一个日期。
<input type = "month"> 输入类型 month 定义了一个图形界面来选择一个月。
<input type = "week"> 输入类型 week 定义了一个图形界面来选择一周。
<input type = "time"> 输入类型 time 定义了一个图形界面来选择一个时间。
<input type = "range"> 输入类型 range 用于定义一个滑块控件以输入数字。
<input type = "email"> 输入类型 email 用于定义一个接受电子邮件的输入区域。
<input type = "url"> 输入类型 url 用于定义一个接受 url 的输入区域。

HTML 表单控件示例

以下是一些说明如何在 HTML 中使用表单控件元素的示例。

文本输入控件

文本输入控件进一步分为三大类。

  • 单行文本输入控件
  • 密码输入控件
  • 多行文本输入控件

单行文本输入控件

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

密码输入控件

密码输入控件也是单行文本输入，但它会在用户输入后立即将字符屏蔽。它们也使用 HTML <input> 标签创建，但 type 属性设置为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>

多行文本输入控件

当用户需要提供超过一个句子的详细信息时，使用多行文本输入控件。多行输入控件是使用 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>

复选框输入控件

复选框用于需要选择多个选项时。它们也使用 HTML <input> 标签创建，但 type 属性设置为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>

单选按钮控件

单选按钮用于在多个选项中，只需要选择一个选项时。它们也使用 HTML <input> 标签创建，但 type 属性设置为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>

选择框控件

选择框 提供了以下拉列表的形式列出各种选项的功能，用户可以从中选择一个或多个选项。

以下 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>

文件上传框

如果我们希望允许用户将文件上传到我们的网站，则需要使用文件上传框，也称为文件选择框。这也是使用<input>元素创建的，但 type 属性设置为file。

在以下示例中，我们将创建一个包含一个文件上传框的表单，该框仅接受图像。

<!DOCTYPE html>
<html>

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

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

</html>

按钮控件

在 HTML 中有各种方法可以创建可点击按钮。我们可以通过将 <input> 标签的 type 属性设置为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>

隐藏表单控件

隐藏表单控件用于隐藏页面内部的数据，这些数据稍后可以推送到服务器。此控件隐藏在代码中，不会显示在实际页面上。例如，以下隐藏表单用于保留当前页码。当用户点击下一页时，隐藏控件的值将发送到 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>

日期和时间选择器

在 HTML 中，日期时间控件表示日期和时间（年、月、日、时、分、秒、秒的小数部分）一起根据 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>

日期选择器

HTML 日期控件用于指定根据 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>

月份选择器

在 HTML 中，月份控件用于显示仅包含年份和月份的日期，根据 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>

星期选择器

顾名思义，星期控件显示仅包含年份和星期数的日期，根据 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>

时间选择器

HTML 时间控件指定小时、分钟、秒和小数秒，根据 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>

数字选择器

数字控件仅接受数值。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>

范围控件

范围类型用于应该包含一定范围数字值的输入字段。

<!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@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控件

HTML URL控件仅接受URL值。此类型用于应该包含URL地址的输入字段。如果您尝试提交纯文本，它会强制您以http://www.example.com格式或http://example.com格式输入URL地址。

<!DOCTYPE html>
<html>

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

</html>
打印页面
上一页
下一页
广告

© . All rights reserved.