HTML - 表单控件

上一页
下一页

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

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

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

输入类型 描述
<input type = "text"> 文本输入通常用于接受来自用户的字符，例如用户名、密码、地址。
<input type = "number"> 用于接受来自用户的 number 作为输入的输入类型 number。
<input type = "checkbox"> 复选框输入显示为一个方框，可以根据用户要求选中或取消选中该方框。
<input type = "radio"> 无线电输入定义一个单选按钮，用于从众多选项中选择一个。
<select> Select 标签用于在表单中创建下拉列表。
<input type = "datetime-local"> 输入类型 datetime 定义用于选择月份的图形界面。
<input type = "date"> 输入类型日期定义一个图形界面来选择日期。
<input type = "month"> 输入类型 month 定义一个图形界面来选择月份。
<input type = "week"> 输入类型周定义一个图形界面来选择一周。
<input type = "time"> 输入类型 time 定义一个图形界面来选择时间。
<input type = "range"> 用于定义用于输入数字的滑块控件的输入类型范围。
<input type = "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 属性设置为复选框。

在此 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 中，datetime 控件表示根据 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>
打印本页
上一页
下一页