技术胖--前端学习html5表单美化部分笔记

一、H5表单验证（form表单的美化）

1.1 基本表单验证特性介绍

灰色的提示是h5的哪个特性？

placeholder

有些移动端HTML5 input date不支持placeholder问题
```
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date"/>
```
有的浏览器需要点击两次
新增的表单类型

email,Date,Range,Tel,search,color……
文本框中，输入一次，下一次在输入会自动提示是哪个特性？

autocomplete
list和datalist
初始化页面之后，如何让input自动获得焦点？

autofocus

表单验证的新特性

html中如何设置表单元素必填？

required
html5表单验证如何使用正则表达式？

pattern
html5表单中设置了必填，提交表单的时候如何做到不验证？

novalidate或者formnovalidate

前一个是在form标签之后用的

后一个input submit的按钮上面运用的

场景：一个按钮要验证，一个不用验证，不用验证的那个使用formnovalidate

1.2 代码特性演示

在上传文件中有file类型的话，需要加上multipart/form-data

<form action="" method="post" enctype="multipart/form-data"><input type="file"/>
</form>

lable后面为什么需要for?

实现点击文字就可以选中单选的作用

<!-- label -->
<label for="man"> 男</label>
<input type="radio" name="sex" id="man">
<label for="girl"> 女</label>
<input type="radio" name="sex" id="girl">

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- novalidate就会在表单提交的时候不验证！ --><!-- autocomplete="on"表示自动填充开启 --><form action="1text.html" method="post"  enctype="multipart/form-data" autocomplete="on"><input type="file"/><!-- 用户名 --><label for="">用户名</label><input type="text" name="username" placeholder="请输入用户名" required /><!-- 工号 --><lable for="">工号</lable><input type="text" name="gonghao" placeholder="请输入工号" pattern="^\d{5}[imooc]$"/><!-- 提交 --><input type="submit" value="不提交" formnovalidate=""><input type="submit" ><!-- datalist --><input type="text" list="tips"><datalist id="tips"><option value="list1"></option><option value="list2"></option><option value="list3"></option><option value="list4"></option></datalist></form>
</body>
</html>

二、html5约束验证API

html5的约束验证API

属性	含义
willValidate属性	元素约束是否被符合，如果不符合返回false
Validity属性	ValidityState对象，表示验证对象所属状态，验证是否成功
validationMessage属性	用于描述元素相关的约束信息
checkValidity()方法	检查元素是否满足它的相关约束
setCustomValidity()方法	设置和预定义，修改信息

2.1 Validity属性介绍以及演示

<form action="1text.html" method="post"  enctype="multipart/form-data" autocomplete="on"><!-- 用户名 --><label for="">用户名</label><input type="text" name="username"  id="username" placeholder="请输入用户名" required />
</form>

方式一：

var usernames=document.getElementById("username");
console.log(usernames.validity);

方式二：

console.log(username.validity);

两种方式输出结果一样的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8c4ZISS-1661998975565)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831154446910.png)]

2.1.2 Q:document.getElementById(“id”)和某一个id是全等的吗？

A:是的

但是不推荐直接使用id这种写法，

原因一：H5的新特性，浏览器的兼容性不是很好

原因二：后期维护麻烦，直接使用id容易与某个变量混淆

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oz7qG0Hv-1661998975567)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831155034172.png)]

输出结果	含义
badInput	用户提供了一个浏览器不能转换的`input`
customError	与`setCustomValidity()`相对应
patternMismatch	pattern 正则表达式是否验证通过
rangeOverflow	用于描述input框中数值的大小是否超过最大值
rangeUnderflow	用于描述input框中数值的大小是否超过最小值
stepMismatch	step与其对应，未设置step的时候为true
tooLong	`maxlength` 主要描述字段的长度，这两个值恒为`false`
tooShort	`minlength`
typeMismatch	如果输入的值不是对应的type值，比如url,email……则`typeMismatch`就为`true`
valid	该属性是否有`value`值
valueMissing	是否为必填项，若属性为required,则valueMissing为true,如果有了value值，则会显示为false

2.2 字段演示

2.2.1 移动端不推荐使用

消除搜索框的那个叉号

<style>input [type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;height: 15px;width: 15px;background-color: aquamarine;}
</style>

<script>// 不推荐使用// console.log(document.getElementById("username")===username);console.log(username.validity);
</script>

2.2.2 如何控制输入5位数？

使用javascript

<script>// 不推荐使用// console.log(document.getElementById("usernames")===usernames);console.log(usernames.validity);console.log(numbers.validity);function checkLength(obj,length){if(obj.value>length){obj.value=obj.value.substr(0,length);}}
</script>

2.2.3 如何保留两位小数？

如果value为0.02，则提交到后台的时候值为0。

在input标签中，加一个step=“0.01”

2.3 checkValidity()方法介绍和演示

如果元素没有满足它的任意约束，返回false,其他情况返回true

使用required，需要满足pattern和value的要求

<!-- 用户名 -->
<label for="">用户名</label>
<input type="text" name="username"  id="usernames" placeholder="请输入用户名"  pattern="^\d{5}" required value="2"/>

// 检查邮箱格式是否正确
if(emails.checkValidity()){alert("这是一个邮箱的格式");
}
else{alert("这不是一个邮箱");
}
// 检查用户名是否符合要求
if(usernames.checkValidity()){alert("用户名符合");
}
else{alert("用户名不符合");
}

2.4 setCustomValidity案例

用途

设置自定义验证内容，用于即将实施与验证的约束来覆盖预定义的信息


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygjwSU1Y-1661998975568)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831193008346.png)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sb6yrnSK-1661998975569)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831193041055.png)]

<!--css部分-->
<style>input[type="text"]{border:1px solid #ccc ;width: 150px;height: 30px; border-radius: 5px;}input[type="submit"]{background-color: #eee; border:1px solid #ddd;width: 60px;height: 33px;border-radius: 5px;}</style><body><form name="test" action="" method="post"><input type="text" required pattern="^\d{4}$" oninput="checkit(this)" placeholder="请输入代码"><input type="submit" value="验证"></form><script type="text/javascript">function checkit(obj){console.log(obj.validity);var it=obj.validity;if(true===it.valueMissing){obj.setCustomValidity("不能为空！");}else{if(true===it.patternMismatch){obj.setCustomValidity("必须是四个数字！")}else{obj.setCustomValidity("11")}}}</script>
</body>

三、html5自带验证美化

要做出不一样的表单验证，我们需要了解一些伪类和css选择器

:required和:optional

:in-range和:out-of-range

:valid和:invalid

:read-only和:read-write

3.1 :required和:optional

居然连个空格都不可以有的

错误写法：select :optional

正确写法：select:optional

input:required,textarea:required{border-right: 3px solid #aa0088;}input:optional,select :optional{border-right: 3px solid #999;}

案例代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N2FvyaJG-1661998975570)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831214835899.png)]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container{ max-width: 400px;margin: 20px auto;}input,select,textarea{width: 240px;margin: 10px 0;border: 1px solid #999;padding: .5em 1em;}lable{color: #999;margin-left: 10px;}input:required,textarea:required{border-right: 3px solid #aa0088;}input:optional,select:optional{border-right: 3px solid #999;}/* 为输入框为加上(选填)/(必填) */input:optional +lable::after{content:"(选填)";}input:required +label::after{ content:"(必填)";}/* 修改选中边框 */input:focus,select:focus,textarea:focus{outline:0;}input:required:focus{ box-shadow: 0 0 3px 1px #aa0088;}input:optional:focus,select:optional:focus{ box-shadow: 0 0 3px 1px #999;}/* 修改提交按钮样式 */input[type="submit"]{ background-color: #cc00aa;border: 2px ;padding: 10px 0;color: #fff;}input[type="submit"]:hover{ background-color: #aa0088;}</style>
</head>
<body><div class="container"><form action="#"><input type="name" required><lable>名称</lable><input type="email" required><lable>邮箱</lable><input type="tel" ><lable>手机</lable><input type="url" ><lable>网址</lable><select name="#"><option value="1">非必选项一</option><option value="2">非必选项二</option><option value="3">非必选项三</option><option value="4">非必选项四</option></select><textarea name="#" cols="30" rows="10" placeholder="留言（必填）" required></textarea><input type="submit" value="提交表单"></form></div>
</body>
</html>

3.2 valid和invalid伪类美化表单案例

额外补充知识点：

CSS的 ~（波浪选择器）

效果展示：


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LQAFytNR-1661998975571)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831223135005.png)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Sz4Bn3q-1661998975571)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831223155665.png)]

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container{ margin: 100px;position:relative;}input{ border:1px solid #999;outline: 0;width:140px;height: 30px;    line-height: 30px;text-indent: 36px;transition: all .3s;border-radius: 4px;}span.title{ position: absolute;line-height: 30px;height: 30px;left: 2px;top: 2px;transition: all .3s;}input:focus,input:hover{ text-indent: 2px;}input:focus +span.title,input:hover +span.title{ transform: translateX(-120%);}input:valid ~label::after{ content:"你输入的邮箱正确！";}input:invalid ~label::after{ content:"你输入的邮箱错误!";}input:valid{ border:1px solid green;}input:invalid{ border: 1px solid red;}</style>
</head>
<body><div class="container"><input type="email" id="mail" required placeholder="请输入邮箱"><span class="title">邮箱</span><label for="mail"></label></div>
</body>
</html>

3.3 html5表单美化综合案例

三个事件

oninput事件
oninvalid事件
onchange事件

案例效果(小bug:提交的时候验证表单正确了，但是仍然没有变成绿色)：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V8UJy2sX-1661998975572)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220901000303684.png)]

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.onelist{ margin: 10px 0 5px 12px;}.onelist label{ width: 80px;display: inline-block;}.onelist input,.onelist select { height: 25px;line-height: 25px;width: 220px;border-radius: 3px;border: 1px solid #e2e2e2;}.onelist input[type="submit"]{ width: 150px;height: 30px;line-height: 30px;}input:required,select:required{ background:url(D:\QQdownload\学习资料\大三上学期\前端\前端路线学习\HTML学习\代码演示（h5）\3.1首页.png) no-repeat 90% center;}input:required:valid,select:required:valid{ background:url(3.1首页.png) no-repeat 90% center;box-shadow: 0 0 5px green;border-color: green;}input:focus:invalid,select:focus:invalid{ background:url(\3.1首页.png) no-repeat 90% center;box-shadow: 0 0 5px red;border-color: red;}</style>
</head>
<body><form action="myform" method="post"><div class="onelist"><label for="UserName">手机号 </label><input name="UserName" id="UserName" type="text" placeholder="请输入手机号码" pattern="^1[0-9]{10}$" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确的手机号码')" required></div><div class="onelist"><label for="Password">密码 </label><input name="Password" id="Password" type="password" placeholder="6~20位" pattern="^[a-zA-Z0-9]\w{5,19}$" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确的密码')" onchange="checkpassword()"  required></div><div class="onelist"><label for="Repassword">确认密码 </label><input name="Repassword" id="Repassword" type="password" placeholder="确认密码" onchange="checkpassword()" required></div><div class="onelist"><label for="Repassword">了解方式 </label><select name="know" required><option value="">==请选择==</option><option value="1">搜索引擎</option><option value="2">朋友圈</option><option value="3">朋友推广</option><option value="4">广告投放</option></select></div><div class="onelist"><input type="submit"value="提交"></div></form><script type="text/javascript">function checkpassword(){var pass1=document.getElementById("Password"),pass2=document.getElementById("Repassword");if(pass1.value!=pass2.value){pass2.setCustomValidity("两次密码输入不一致");}else{pass2.setCustomValidity("致");}}</script>
</body>
</html>

3.4 默认气泡修改演示

等我学完js回来再看看？？

哈哈哈我就是乏了