HTML表单

*发表于 2021-12-1 12:04:28* · 发表于 2021-12-1 12:04:28

<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action="//域名/html-tutorial/html-forms-action.cfm" method="post">
<label>Name:
<input name="姓名" maxlength="90">
</label>
<input type="提交" value="submit">
</form>
</body>
</html>

上面是一个 HTML 表单的例子。表单允许您向 HTML 文档添加交互性。在这个例子中，用户可以在表单中输入他们的名字。当他们提交表单时，会调用一个服务器端脚本来处理表单。

表单是使用<form>元素声明的。此元素对用户不可见，但用于封装属于表单的任何表单元素。

表单关联元素是可以与表单（即表单所有者）关联的元素。表单相关元素包括输入字段、复选框、单选按钮、提交按钮、文本区域等。

这是一个<textarea>元素的例子。这个元素允许用户输入多行文本（与<input>上面的元素相反，它只允许输入一行文本）。

<form action="//www.html.am/html-tutorial/html-forms-action.cfm" method="post">
<label>Comments:
<textarea name="comments" cols="50" rows="5" maxlength="200"></textarea>
</label>
<input type="submit" value="Submit">
</form>
下面是一个表单中更多与表单相关的元素的示例。这些包括我们可以用来对相关元素进行分组并为它们提供标题的<fieldset>和<legend>标签。我们还为元素type上的属性使用不同的值，<input>这会导致出现不同的控件类型。在本例中，我们向文本输入字段添加了复选框和单选按钮。

<form action="//www.html.am/html-tutorial/html-forms-action.cfm" method="post">
<label>Name:
<input type="text" name="name" value="" maxlength="90">
</label>
<fieldset>
<legend>Lunch</legend>
<label><input type="radio" name="lunch" value="pad-thai"> Pad Thai</label>
<label><input type="radio" name="lunch" value="tom-yum"> Tom Yum</label>
<label><input type="radio" name="lunch" value="green-curry"> Green Curry</label>
<label>Not Spicy<input type="range" min="1" max="10" step="1" value="5" name="spiciness">Very Spicy</label>
</fieldset>
<fieldset>
<legend>Extras</legend>
<label><input type="checkbox" value="rice" name="rice"> Rice</label>
<label><input type="checkbox" value="chilli" name="chilli"> Dried Chilli</label>
<label><input type="checkbox" value="cucumber" name="cucumber"> Cucumber</label>
</fieldset>
<input type="submit" value="Submit">
</form>
每个元素包括一个name属性。这可以在提交表单时由脚本使用。如果我们不为每个元素命名，脚本将不知道提交了哪些元素，更不用说它们的值是什么了。我们包含value属性以提供用户选择的值。

当您提交上述表单时，表单内容将提交到action属性下列出的 URL 。在这种情况下，我编写了一个脚本来获取表单元素并显示它们的值。因此，当您提交表单时，您将看到一个元素名称列表，后跟它们各自的值。

在复选框的情况下，您只会看到已被选中的元素名称/值。如果它没有被选中，它就不能用于脚本。这就是复选框的工作方式。无论是否已选择/完成，其他元素都会传递元素的名称。例如，如果您离开姓名如果字段为空，您在提交表单时仍会看到该元素名称，但不会在其旁边看到任何值。

表单验证
网络上的大多数表单都包含某种验证，以确保用户正确完成了表单。用户可能会犯错误，表单验证可以帮助提醒他们在填写表单时可能犯的任何错误。

表单验证也可以是一项重要的安全预防措施。如果没有良好的表单验证，黑客很容易通过将恶意数据提交到表单字段（特别是文本字段）来制造混乱。

HTML 允许一些基本的表单验证。它通过属性实现这一点。事实上，您可能已经注意到我们的姓名输入字段包括 maxlength="90". 这可确保用户不会在姓名场地。假设我们的访问者的姓名不会超过 90 个字符。但是，我们可以将此数字更改为我们认为合适的任何值。

不过，我们可以向我们的表单添加更多验证。例如，我们可以添加required属性以确保用户不会将该字段留空。

必填字段
在下面的例子中，我们已经添加required到两个姓名输入字段和单选按钮。现在，如果您尝试在未填写这些字段的情况下提交表单，浏览器应显示一条消息，要求您填写该字段。

所以继续点击提交无需填写任何字段，然后查看浏览器如何响应。不同浏览器的响应方式可能略有不同，但任何现代浏览器都应阻止您在完成所有必填字段之前提交表单。

<form action="//www.html.am/html-tutorial/html-forms-action.cfm" method="post">
<div>
<label for="name">Name:</label>
<input type="text" name="name" value="" maxlength="90" required>
</div>
<div>
<label for="color">Pick a color:</label>
<input type="radio" name="color" value="red" required> Red
<input type="radio" name="color" value="green" required> Green
<input type="radio" name="color" value="blue" required> Blue
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
还有其他 HTML 属性可以提供验证，例如type, range,pattern属性。

该type属性
该<input>字段的type属性可用于确保以正确的格式输入正确的数据类型。事实上，这就是我们在上面的一些例子中使用的。

以下是可与type属性一起使用的更多值。

<form action="//www.html.am/html-tutorial/html-forms-action.cfm" method="post">
<label>Email:
<input type="email" name="email">
</label>
<label>Phone:
<input type="tel" name="phone">
</label>
<label>Time:
<input type="time" name="time" min="7:00" max="23:00" step="900">
</label>
<label>Number:
<input type="number" name="number" min="10" max="150">
</label>
<label>Password:
<input type="password" name="password">
</label>
<label>Date:
<input type="date" name="date">
</label>
<label>Datetime Local:
<input type="datetime-local" name="datetime-local">
</label>
<label>Search:
<input type="search" name="search">
</label>
<label>URL:
<input type="url" name="URL">
</label>
<label>Range:
<input type="range" name="range" min="1" max="100" step="10">
</label>
<label>Color:
<input type="color" name="color">
</label>
<input type="submit" value="Submit">
</form>
<style scoped>
label {display:block;}
</style>
JavaScript 和服务器端验证
许多网站包括多层表单验证。您可以从 HTML 验证开始（如此处所示），但这只会带您到此为止。

您还可以包括 JavaScript 验证，这可以使您的验证更加具体。与 HTML 一样，JavaScript 可以在客户端运行（即在浏览器中，而不是在服务器上），因此验证通常非常快速且响应迅速。

一旦数据提交到服务器，您的表单处理程序脚本也应该验证数据。这称为服务器端验证（因为它在服务器上运行）。服务器端验证通常在整个表单完成并提交后运行。但是，也可以在提交表单之前（即在用户完成每个字段时）运行服务器端代码。这通常称为实时验证或即时验证。

服务器端验证可能比客户端慢一点，因为它需要将请求发送到服务器，然后返回给客户端/用户。但是，服务器端验证是抵御黑客的最佳防御，因为黑客有可能绕过您的表单（即绕过您的客户端验证），并直接调用表单处理程序脚本。例如，他们可以创建自己的表单，然后将其提交给您的表单处理程序。他们还可以创建一个包含与您匹配的字段名称和值的 URL，然后将该链接作为网络钓鱼电子邮件骗局的一部分发送。这就是良好的服务器端验证很重要的原因。

执行服务器端脚本和验证超出了本 HTML 教程的范围。但是，如果您有兴趣，请查看此表单以通过电子邮件发送脚本并向下滚动到“发送邮件”脚本（这就是所谓的发送邮件.php）。这是包含一些服务器端验证的表单处理程序脚本（用 PHP 编写）的示例。