HTML5表单详解

工务發表於 2020-4-12 17:27:00

<h2>input</h2>
1、type = “file”时，form标签要添加 enctype = "multipart/form-data"
 
2、含有required时，但是form有novalidate，那么required不会生效
3、含有required时，submit提交按钮含有formnovalidate属性，那么reuired不会生效
 
4、含有autofocus时，刷新页面时自动聚焦到该文本框上
5、含有autocomplete时，会记住之前提交的记录，利与快速填写
6、含有pattern属性时，要符合pattern的正则表达式才能提交。如 pattern = "$"，以abc任意一个字母结尾
 
7、lable中的for，对应input的id值。当鼠标点击lable标签时，焦点就会在对应的input里面。（最佳搭配还是与radio、checkbox）
<div class="cnblogs_code">
<pre><input type="text" name="" id="text" /><label for="text">一个label，配文本框</label></pre>
</div>
 
8、限制输入框最大长度：maxlength = "3"，限制输入框最小长度：minlength = "2"（效果不明显）。明显效果用：
<div class="cnblogs_code">
<pre><input type="number" id="bb" oninput="sub(this,5)" />  </pre>
</div>
 
<div class="cnblogs_code">
<pre>function sub(obj,length){
if(obj.value.length>length){
 obj.value = obj.value.substr(0,length);
}
}</pre>
</div>
 
9、去除 type="search" 的默认小叉，
<div class="cnblogs_code">
<pre>input ::webkit-search-cancel-button{
-webkit-appearance:none; //去除默认小叉
//若有需要可以自定义自己的小叉图标，如：
 width:15px;
height:15px;
background-color:red;
}</pre>
</div>
 
 
10、type="number"时，保留两位小数用，step="0.01"。（若不设置，提交时自动去除小数点后的数）
11、type="number"时，点击右边的上下键，一次跳5，step="5"。（若不设置，默认跳1）
 
12、去除type="number"的上下键，用：
<div class="cnblogs_code">
<pre>input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}</pre>
</div>
 
<h2>HTML5约束验证API（validity）</h2>
//每一个input都有与之对应的validity对象，如：
<div class="cnblogs_code">
<pre><input type="text" id="tt" required /></pre>
</div>
 
<div class="cnblogs_code">
<pre>console.log(tt.validity); //有id名的可以直接用id名使用，但兼容性没那么好</pre>
</div>
 
 
//打印出来的validity，如下：
<img src="https://img2020.cnblogs.com/blog/1680452/202004/1680452-20200412093039935-110562912.png">
 
//只要input设置了某些属性，与之对应的validity方法就会为true
 
<h2>HTML5约束验证API（checkValidity）</h2>
//每个input都有checkValidity，只是检查规则随着type的不同而不同
//检查某类型是否符合规则，符合返回true，不符合返回false
<div class="cnblogs_code">
<pre><input type="email" id="emails" /></pre>
</div>
<div class="cnblogs_code">
<pre>if(emails.checkValidity()){
console.log("符合规则");
}else{
console.log("不符合规则");
}</pre>
</div>
 
 
<h2>HTML5约束验证API（setCustomvalidity）</h2>
//主要是更改input的required的提示信息，如：
<div class="cnblogs_code">
<pre><form>
<input type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" required oninput="tishi(this)" />
<input type="submit" />
</form></pre>
</div>
<div class="cnblogs_code">
<pre>function tishi(obj){
if(obj.validity.valueMissing){
 obj.setCustomValidity("这里不能为空空空。。。");
}else if(obj.validity.patternMismatch){
 obj.setCustomValidity("必须符合邮箱规则则则。。。");
}else{
 obj.setCustomValidity("");
}
}</pre>
</div>
 
<h2>HTML5自带验证美化</h2>
<h3>:required（选择必填项）</h3>
<div class="cnblogs_code">
<pre>input:reqrired{ 
border-right:3px solid red;
}</pre>
</div>
 
<h3>:optional（选择选填项）</h3>
<div class="cnblogs_code">
<pre>textarea:optional{ 
border-right:3px solid grey;
}</pre>
</div>
 
<h3>去除默认的输入状态边框</h3>
<div class="cnblogs_code">
<pre>input:focus{
outline:none;
}</pre>
</div>
 
<h3>自定义输入状态边框</h3>
<div class="cnblogs_code">
<pre>input:required:focus{ 
box-shadow: 0 0 3px 1px red;
}</pre>
</div>
 
<div class="cnblogs_code">
<pre>input:optional:focus{ 
box-shadow: 0 0 3px 1px grey;
}</pre>
</div>
<h3>:valid（符合输入规则）</h3>
<div class="cnblogs_code">
<pre><form>
<input type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" required />
<label></label>
<input type="submit" />
</form></pre>
</div>
 
<div class="cnblogs_code">
<pre>/* 符合input的xx类型的规则时， */
input:valid~label::after{ /*获取同父级下面的lable*/
content: "ok符合规则";
}</pre>
</div>
 
<h3>:invalid（不符合输入规则）</h3>
<div class="cnblogs_code">
<pre><form>
<input type="email" required />
<label></label>
<input type="submit" />
</form></pre>
</div>
 
<div class="cnblogs_code">
<pre>/* 不符合input的xx类型的规则时， */
input:invalid~label::after{ /*获取同父级下面的lable*/
content: "暂时不符合规则";
}</pre>
</div>
<h3>修改setCustomValidity的默认气泡</h3>
......
  
来源：https://www.cnblogs.com/jayden-qiu/p/12682916.html

頁: [1]

琼殿技术论坛's Archiver

HTML5表单详解