HTML 表单

发表于 更新于 分类于 ， Waline： 本文字数： 12k 阅读时长 ≈ 11 分钟

HTML表单是什么

HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以自己拦截它并使用它。

form元素

所有HTML表单都以一个<form>元素开始：

1
2
<form action="/my-handling-form-page" method="post">
</form>

这个元素正式定义了一个表单。就像<div>元素或<p>元素，它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但至少要设置action属性和method属性，这被认为是最佳实践。

  • action 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。.
  • method 属性定义了发送数据的HTTP方法(它可以是“get”或“post”).

文本输入域

文本输入域 <input> 是最基本的表单小部件

单行文本域

使用<input>元素创建一个单行文本域，该元素的type属性值被设置为text （同样的，如果你不提供type属性，text 是默认值）。如果你指定的type属性的值在浏览器中是未知的（比如你指定 type=”date”，但是浏览器不支持原生日期选择器），属性值text就是是备用值。

如下所示:

1
<input type="text">  <input>

E-mail 地址域

该类型的域通过设置type属性值为email来实现。

1
<input type="email" id="email" name="email" multiple>

当使用 type时， 用户需要在域中输入有效的电子邮件地址；任何其他内容都会导致浏览器在提交表单时显示错误。注意，这是客户端错误验证，由浏览器执行：

multiple可以让用户将多个电子邮件地址输入，相同的输入(以逗号分隔)。在一些设备上(特别是在移动设备上)，可能会出现一个不同的虚拟键盘，更适合输入电子邮件地址

密码域

通过type 属性的password值设置该类型域：

1
<input type="password" id="pwd" name="pwd" value="default">

如下所示:

它不会为输入的文本添加任何特殊的约束，但是它会模糊输入到字段中的值(例如，用点或小行星)，这样它就不能被其他人读取。
请记住，这只是一个用户界面特性;**除非你安全地提交你的表单，否则它会以明文发送**，这不利于安全——恶意的一方可能会截获你的数据，窃取你的密码、信用卡信息，或者你提交的其他任何东西。保护用户不受此影响的最佳方式是在安全连接上托管任何涉及表单的页面(例如:https://……地址)，使得数据在发送之前就已加密。
现代浏览器认识到在不安全的连接上发送表单数据所带来的安全影响，并且已经实现了警告，以阻止用户使用不安全的表单。

搜索域

通过使用 type属性的 search 值设置该类型域：

1
<input type="search" id="search" name="search">
`文本域和搜索域之间的主要区别是浏览器的样式`——通常，搜索字段以圆角和/或给定一个“x”来清除输入的值。然而，还有另外一个值得注意的特性:它们的值可以自动保存到同一站点上的多个页面上自动完成。 ### 电话号码域 通过 type属性的 tel 值设置该类型域： 
1
<input type="tel" id="tel" name="tel" value="123456789">

由于世界范围内各种各样的电话号码格式，这种类型的字段不会对用户输入的值执行任何限制(包括字母，等等)。这主要是语义上的差异，尽管在一些设备上(特别是在移动设备上)，可能会出现一个不同的虚拟键盘，更适合输入电话号码。

URL 域

通过type属性的url 值设置该类型域：

1
<input type="url" id="url" name="url">
它为字段添加了特殊的验证约束，`如果输入无效的url，浏览器就会报告错误`。 **注意**：URL格式良好，但并不一定意味着它引用了一个实际存在的位置。 ## 多行文本域 多行文本域专指使用 ` textarea和常规的单行文本字段之间的主要区别是，允许用户输入包含硬换行符(即`按回车`)的文本。 在大多数浏览器中，文本区域在右下角有一个拖放操作，允许用户调整它的大小。这种调整能力可以通过使用CSS设置文本区域的resize性质为 none 来关闭。 `