css实现表单验证_通过CSS3和HTML5验证使表单保持最新状态

最新推荐文章于 2024-11-05 18:18:48 发布

daique1908

最新推荐文章于 2024-11-05 18:18:48 发布

阅读量1.2k

点赞数 1

文章标签： html css java python web

这篇教程介绍了如何使用CSS和HTML5创建一个功能齐全的表单验证，包括概念化表单功能，创建HTML结构，使用HTML5属性进行客户端验证，以及通过CSS3增加交互性。通过步骤讲解，读者将学会如何创建一个带有占位符、提示和验证的联系表单，确保用户正确输入信息。

摘要由CSDN通过智能技术生成

css实现表单验证

让我们看一下如何创建一个功能形式的客户端验证用户数据。完成之后，我们将介绍如何使用CSS（包括一些CSS3）对其进行修饰！

在开始之前，您可能需要考虑为下一个项目使用我们的HTML5模板或CSS主题之一，也就是说，如果您需要快速，专业的解决方案。或者，您可以从Envato Studio的专家那里获得帮助。

否则，该开始逐步教程了。

步骤1：概念化功能

首先，我们要概念化表单的外观以及其功能。对于此示例，让我们创建一个简单的联系表单，该表单要求用户提供以下信息：

名称
电子邮件
网站
信息

我们要确保用户正确输入信息。为此，我们将使用HTML5的新客户端验证技术。没有HTML5功能的用户呢？您可以简单地使用服务器端验证，但这将超出本文的范围。

步骤2：概念化表格

让我们通过创建一个粗糙的模型来了解我们希望表单的外观。

如您所见，以下元素构成了我们的表单：

表单标题必填字段通知
表格标签
表单输入占位符文本
表单字段提示
提交按钮

现在我们已经指定了组成表单的元素，我们可以创建HTML标记。

步骤3：HTML入门代码

让我们从创建的表单概念创建基本HTML标记。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5 Contact Form</title>
	<link rel="stylesheet" media="screen" href="styles.css" >
</head>
<body>
</body>
</html>

到目前为止，我们HTML文件在浏览器中仍将显示为空白。这只是HTML5页面的入门代码。

步骤4：HTML表单

让我们创建HTML表单（由于本教程将不涉及服务器端验证，因此现在将action方法保留为空白）：

<form class="contact_form" action="" method="post" name="contact_form">
</form>

步骤5：HTML表单元素

为了使表单内容保持井井有条，我们将表单元素（ label ， input等）包装在列表中。因此，让我们从创建表单标题和第一个输入元素开始：

<ul>
    <li>
         <h2>Contact Us</h2>
         <span class="required_notification">* Denotes Required Field</span>
    </li>
    <li>
        <label for="name">Name:</label>
        <input type="text" name="name" />
    </li>
</ul>

表格提示

从我们的模型中可以看出，我们将为“电子邮件”和“网站”字段提供格式化提示。因此，我们将在必要时在input字段下添加提示，并为它们提供一个类，以便稍后进行样式设置。

<li>
	<label for="email">Email:</label>
	<input type="text" name="email" />
	<span class="form_hint">Proper format "name@something.com"</span>
</li>

剩余的`Input`元素

让我们继续创建剩余的表单元素，记住将每个部分包装在列表项中。

<li>
	<label for="website">Website:</label>
	<input type="text" name="website" />
	<span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li>
	<label for="message">Message:</label>
	<textarea name="message"