cvmachine.com - 申博开户网

查找: 您的方位主页 > 网络频道 > 阅览资讯:怎样运用Html5和CSS3表单验证功用?

怎样运用Html5和CSS3表单验证功用?

2017-09-04 15:39:12 来历:www.cvmachine.com 【

怎样运用Html5和CSS3表单验证功用?

客户端验证是网页客户端程序最常用的功用之一,咱们之前运用了各式各样的js库来进行表单的验证。HTML5其实早已为咱们供给了表单验证的功用。至于为啥没有流行起来估量是兼容性的问题还有便是款式太丑恶了吧。

下面咱们将来一步一步发明一个HTML5和CSS3的表单验证,只运用HTML和CSS。

完结后的如下:

怎样运用Html5和CSS3表单验证功用?

第一步:收拾验证字段和类型

首要咱们需求如下几个字段:

  • 名字(full name)
  • 电话号码(phone number)
  • 邮箱地址(email address)
  • 网址(website)

在用户输入一些信息后,咱们需求校验用户的信息是否正确,防止过错数据和欺骗性的数据传递到服务器。

在HTML5的新规范中,input输入框供给了多种输入类型比方:tel、email、number、range、color等,这些类型在桌面客户端中一般表现不是很显着,假如在移动端键盘上面表现的会更显着。比方number在移动端键盘会主动切换为纯数字,email键盘会主动切换带有@的键盘。

第二步:确认表单款式

咱们还需求确认表单终究的款式风格,一般这个作业来至于设计师。这儿我在dribbble上面找了一个表单的款式作为这次的demo风格。

怎样运用Html5和CSS3表单验证功用?

第三步:模板代码

运用规范的HTML5声明代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>HTML5 Form Validation</title>
</head>
<body>
</body>
</html>

第四步:创立表单

创立一个根本的form表单元素,这儿咱们不提交任何数据仅仅一个演示,所以form不会进行提交。

<form action="" onsubmit="return false">
</form>

第五步:创立表单元素

表单元素一共有如下元素组成:

  • ul
  • li
  • label
  • input
  • span

ul和li元素用于排版布局,用于切割表单元素和布局。label用于表单的字段提示文字。input用于用户输入数据。span用于运用emoji提示用户字段是否填写正确。

<ul>
  <li>
   <label for="name">FULL NAME</label>
   <input type="text" id="name" name="
  name" placeholder="请输入名字"/>
   <span class="icon-name"></span>
  </li>
</ul>

form表单html代码完结代码如下:

怎样运用Html5和CSS3表单验证功用?

第六步:添加款式

完结form元素的编写,紧着着完善一下它的款式,让它看起来更美一些。

body {
 display: flex;
}
form {
 padding: 0 10%;
 width: 100%;
 margin: auto;
}
ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
}
li {
 position: relative;
 margin-bottom: 20px;
}
label {
 color: #333;
 display: block;
 font-size: 12px;
}
input {
 width: 100%;
 outline: none;
 border: none;
 padding: 0.5em 0;
 font-size: 14px;
 color: black;
 position: relative;
 border-bottom: 1px solid #d4d4d4;
}
input:-moz-placeholder {
 color: #d4d4d4;
}
input::-webkit-input-placeholder {
 color: #d4d4d4;
}
li span {
 display: block;
 position: absolute;
 right: 0;
 top: 10px;
 font-size: 28px;
}
button {
 cursor: pointer;
 border: 1px solid #999;
 border-radius: 4px;
 padding: 10px 20px;
 margin-top: 10px;
 background: #fff;
}

css代码完结代码如下:

怎样运用Html5和CSS3表单验证功用?

第七步:添加EMOJI提示

在每个form表单结构中,咱们现已添加了一个span标签,比方name字段中咱们添加了一个<span class="icon-name"></span>标签。现在给他加上款式用于显现校验字段的状况。

li span {
 display: block;
 position: absolute;
 right: 0;
 top: 10px;
 font-size: 28px;
}
/*默许的是一个浅笑的表情*/
li span::before {
 content: '😐';
}
/*咱们也可依据类名界说一些其他的表情*/
.icon-name::before {
 content: '😐';
}
.icon-phone::before {
 content: '📞';
}
.icon-email::before {
 content: '📨';
}
.icon-website::before {
 content: '🌐';
}

添加emoji提示款式如下

怎样运用Html5和CSS3表单验证功用?

第八步::invalid和:valid伪类

:valid伪类会匹配满意校验规矩的表单元素,:invalid伪类会匹配不满意规矩的表单元素。

依据这两个规矩咱们能够修正满意和不满意规矩对应的emoji表情。

/*不满意规矩增款式*/
input:focus:invalid {
 border-bottom: 1px solid red;
}
input:focus:invalid + span::before {
 content: '😟';
}
/*满意规矩款式*/
input:valid,
input:focus:valid {
 border-bottom: 1px solid #11b51d;
}
input:focus:valid + span::before,
input:valid + span::before {
 content: '😀';
}

完结代码如下

怎样运用Html5和CSS3表单验证功用?

总结:

HTML5供给了css钩子为表单元素,也供给了一些js的接口跟进一步具体的操控表单的校验和过错提示。假如需求更个性化的校验和提示方法能够运用js接口。


本文地址:http://www.cvmachine.com/a/question/91959.html
Tags: HTML5 css3 表单
修改:申博开户网
188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 m88 help
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部