H5表单
1. HTML4 form表单复习
input 表单type属性值
- text 单行文本输入框
- password 密码框(maxlength = ''")
- radio 单项选择(checked="checked")
- checkbox 多项选择
- button 按钮
- submit 提交
- file 文件上传
- reset 重置
<body>
<form action="/" method='post'>
<!-- action="/"表单提交的地址 method = 'post' 为提交方式-->
<div>用户名：<input type="text" name="username"><!-- name作用：form表单像后台发送数据时，form表单是必须传的 -->
</div>
<div>密码：<input type="password" name="pwd" id="" maxlength="5"></div>
<!--maxlength最大值属性 -->
<div>性别：<input type="radio" name="sex" id="" value="0" checked>男 <input type="radio" name="sex" id="" value="1">女
</div>
<!-- value值是传给后台 。原生js上只要加了checked属性不管值是什么都是true，默认属性值是它本身，没加checked属性值才是false。但在vue中:checked = "false",因为checked属性前加了：所以此时false就不是普通字符串了，变成布尔值false-->
<div>爱好：<input type="checkbox" name="hobby" id="" value="youyong">游泳 <input type="checkbox" name="hobby" id=""
value="youyong">读书</div>
<div>文件：<input type="file" name="file" id=""></div>
<div>
<input type="button" value="按钮"> <!-- 没有默认事件，普通按钮 -->
<input type="submit" value="提交"> <!-- 有默认事件，一旦点击会触发form表单，向默认路径发送请求 -->
<input type="reset" value="重置">
<!--有默认事件内容全部清空 -->
<!-- 点按钮--》在控制台中查看->Network--》127.0.0.1--》点Header下拉就可以看到提交的数据字段名 字段值 -->
</div>
</form>
</body>
2. HTML5表单
input表单type属性值新增
2.1 emil
限制用户输入的必须是Email类型
<input type="email" name="" id="">
2.2 url
限制 用户输入必须为URL
<input type="url" name="" id="">
2.3 date
限制用户输入必须为日期对象
<input type="date" name="" id="">
2.4 datetime-local
显示完整日期
<input type="datetime-local" name="local" />
2.5 time
限制用户输入必须为日期类型
<input type="time" name="time" />
2.6 month
限制用户输入必须为月份类型
<input type="month" name="month" />
2.7 week
限制用户输入必须为周类型
<input type="week" name="week" />
2.8 number
限制用户输入必须为数字类型
注意：不支持
"number"类型的浏览器会改用标准的"text"输入框。
<input type="number" name="number" />
2.9 range
生成一个滑动条(值为偶数)
<input type="range" name="range" value="5" min="0" max="20" step="2" />
2.10 search
具有搜索意义的表单,
<input type="search" name="search" />
2.11 color
生成一个颜色选择表单
<input type="color" name="color" />
2.12 tel
显示电话号码
注意: 不会自动验证电话号码格式, 原因在与世界各地电话号码格式差异很大
<input type="tel" name="tel" />
<body>
<form action="/" method='post'>
<div>email控件：<input type="email" name="" id=""></div>
<!--有规则校验，不符合规则有提示 -->
<div>网站控件：<input type="url" name="" id=""></div>
<div>日期控件：<input type="date" name="" id=""></div>
<div>完整日期控件：<input type="datetime-local" name="" id=""></div>
<div>时间控件：<input type="time" name="" id=""></div>
<div>月份控件：<input type="month" name="" id=""></div>
<div>周控件：<input type="week" name="" id=""></div>
<div>数字控件：<input type="number" name="" id=""></div>
<div>滑动条控件：<input type="range" name="" id="" step="2" value="4"></div>
<div>搜索控件：<input type="search" name="" id=""></div>
<div>颜色控件：<input type="color" name="" id=""></div>
<div>手机号码：<input type="tel" name="" id=""></div>
<div>
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
</div>
</form>
</body
2. 表单验证
<body>
<form action="">
<input type="text" id="ipt">
</form>
<script>
ipt.oninput = function () { //input的oninput事件，只要输入内容就触发
console.log(11)
}
ipt.onchange = function () { //onchange事件，输入完了按回车或其他特殊的键最后才触发
console.log(222)
}
// 百度搜素时，联想关键字是oninput事件，最后的搜索结果是onchange事件
</script>
</body>
<body>
<form action="www.baidu.com">
<input type="image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""><!-- 图片按钮 -->
<input type="button" value="提交">
<input type="submit" value="提交">
<input type="submit" value="提交给超春" formaction="www.chnradintor.com">
<!--同一个form中，formaction可以将数据提交到不同的网址去 -->
</form>
</body>
<body>
<form action="aa" method="post">
<input type="text" name="username" id="" required> <!--一定要写name值，否则控制台Form Date中看不到。required表示必填，不写不能提交 -->
<input type="submit" value="提交">
</form>
</body>
表单方法Methods---select()
<body>
<form action="aa" method="post">
<input type="text" name="username" id="ff" required>
<input type="submit" value="提交">
</form>
<div id="bb">点击</div>
<script>
bb.onclick = function () {
ff.select() // 表单方法Methods---select()，当bb被点击时，form表单选中内容
let val = ff.value;
console.log(val);
}
</script>
</body>
<style>
/* input:enabled的css属性只要可以使用的input表单都采用 */
input:enabled {
color: red;
}
</style>
</head>
<body>
<form action="aa" method="post">
<input type="text" name="username" id="ff" required>
<input type="email" name="" id="">
<input type="submit" value="提交">
</form>
<div id="bb">点击</div>
</body>
<style>
input:disabled{/* 表单被禁用采用的样式 */
border-color:red;
}
input:required{ /* 表单必传采用的样式 */
border-color:blue;
}
</style>
</head>
<body>
<form action="aa" method="post">
<input type="text" name="username" disabled id="ff"><!-- 禁用 -->
<input type="email" name="" required id=""> <!-- 必传 -->
<input type="submit" value="提交">
</form>
<div id="bb">点击</div>
</body>
<style>
#add:checked~#aa {
/* input不显示只是页面上看不到，还能使用checked伪类选择器，进而作用到紧邻的兄弟选择器*/
background-color: pink;
}
#reduce:checked~#bb {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 利用单选按钮的伪类选择器:checked模拟轮播的点击按钮思路-->
<input type="radio" name="btn" id="add" style="display:none"> <!-- 此input不显示只是页面上看不到，还能使用checked -->
<label for="add">增加</label>
<div id="aa">aaaaa</div>
<input type="radio" name="btn" id="reduce" style="display: none;">
<label for="reduce">减少</label>
<div id="bb">bbbbb</div>
</body>
2.1 invalid事件
validity对象(valid查看验证是否通过)
input.addEventListener("invalid", function(){
console.log(this.validity)
}, false);
2.2 阻止默认验证
ev.preventDefault()
<body>
<form action="aa" method="post">
<input type="text" name="username" id="text" required>
<input type="submit" value="提交">
</form>
<script>
text.addEventListener('invalid', function (ev) { //不输入内容直接提交会触发
ev = ev || window.event;
console.log(ev)//事件对象
ev.preventDefault()//阻止默认事件，加上不再弹出"请输入内容"对话框
console.log(this.validity)//validity是验证对象
console.log(this.validity.valid)//没有输入内容，不符合验证必传，验证不通过值为false
if (!this.validity.valid) { //自定义的验证
alert('未输入内容,验证不通过')
}
}, false)
</script>
</body>
2.3 表单验证属性
- valueMissing : 输入值为空时为true
<body>
<form action="aa" method="post">
<input type="text" name="username" id="text" required>
<input type="submit" value="提交">
</form>
<script>
text.addEventListener('invalid', function (ev) { //不输入内容直接提交会触发
ev = ev || window.event;
console.log(this.validity.valueMissing)
}, false)
</script>
</body>
- typeMismatch : 控件值与预期类型不匹配为true
<form action="aa" method="post">
<input type="email" name="username" id="text" required>
<input type="submit" value="提交">
</form>
<script>
text.addEventListener('invalid', function (ev) {
ev = ev || window.event;
console.log(this.validity.typeMismatch) //输入的格式不符合就为true
}, false)
</script>
3.patternMismatch : 输入值不满足pattern正则为true
<body>
<form action="aa" method="post">
手机号码：<input type="text" id="text" pattern='/^1\d{10}$/'>
<input type="submit" value="提交">
</form>
<script>
text.addEventListener('invalid', function (ev) {
ev = ev || window.event;
console.log(this.validity.patternMismatch) //输入的格式不符合就为true
}, false)
</script>
</body>
4.customError 不符合自定义验证
<body>
<form>
<input type="text" name="username" id="text" placeholder="请输入用户名">
<input type="submit" value="提交">
</form>
<script>
text.oninput = function () {//输入内容触发这个事件
if (this.value == '张三') {//成功了添加自定义验证器
this.setCustomValidity('该用户已注册')
} else {
this.setCustomValidity('')
}
}
text.addEventListener('invalid', function (ev) {//监听invalid,触发事件处理函数，是张三就执行这里
ev = ev || window.event;
alert(this.validity.customError)
}, false)
</script>
</body>
5.setCustomValidity(); 自定义验证(是否输入了某些值)
