您现在的位置： 万盛学电脑网 >> 电脑基础 >> 电脑基本常识 >> 正文
让你的表单升级到CSS3和HTML5客户端验证
作者：佚名 责任编辑：admin 更新时间：2022-06-22
今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术HTML5和css3来创建，并且可以通过HTML5进行客户端验证。
第一步：策划表单功能
首先，我们得为我们的表单策划一下该有什么功能，用什么形式表现。在这个示例中，我们就制作一个比较简单的留言表单。需要的功能如下：
名称
电子邮件
网站地址
提交按钮
我们都希望用户能够填写正确的信息再提交，要实现这一点，我们可以使用HTML5客户端验证新技术。那怎么样使用这个功能呢？在这里简单的使用服务器验证，不做进一步的深入了解。
第二步：策划表单形式
在我心中，憧憬着一个美丽而简约的提交表单。虽然现在很丑，但是他不是野鸡是凤凰。
就像上图显示的，包含下面几个部分：
表格标题（Required fields）
表格标签
表格输入（Placeholder text）
表单提示
提交按钮
现在我们已经确定好了表单的形式，就开始创建HTML结构代码。
第三步：创建HTML结构代码
根据上面确定的形式来创建最基本的HTML代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Contact Form</title>
<link rel="stylesheet" media="screen" href="styles.css" rel="external nofollow" >
</head>
<body>
</body>
</html>
在这里页面还是空白的。这只是一个网页最基本的代码。
第四步：HTML表单
开始在页面中创建表单。
<form class="contact_form" action="" method="post">
</form>
第五步：HTML表单元素
为了更好的理解和维持表单的形式，我们将一步一步的添加表单里面的元素。
那最先开始的是创建表单表头和第一个输入框：
- 上一个电脑基础： 怎样解决wordpress中英文垃圾评论？
- 下一个电脑基础： 静态Html如何更新点击
