當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2024/8/1 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了技术胖--前端学习html5表单美化部分笔记小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、H5表單驗(yàn)證（form表單的美化）

1.1 基本表單驗(yàn)證特性介紹

灰色的提示是h5的哪個(gè)特性？

placeholder

有些移動(dòng)端HTML5 input date不支持placeholder問題

有的瀏覽器需要點(diǎn)擊兩次

新增的表單類型

email,Date,Range,Tel,search,color……

文本框中，輸入一次，下一次在輸入會(huì)自動(dòng)提示是哪個(gè)特性？

autocomplete

list和datalist

初始化頁面之后，如何讓input自動(dòng)獲得焦點(diǎn)？

autofocus

表單驗(yàn)證的新特性

html中如何設(shè)置表單元素必填？

required

html5表單驗(yàn)證如何使用正則表達(dá)式？

pattern

html5表單中設(shè)置了必填，提交表單的時(shí)候如何做到不驗(yàn)證？

novalidate或者formnovalidate

前一個(gè)是在form標(biāo)簽之后用的

后一個(gè)input submit的按鈕上面運(yùn)用的

場景：一個(gè)按鈕要驗(yàn)證，一個(gè)不用驗(yàn)證，不用驗(yàn)證的那個(gè)使用formnovalidate

1.2 代碼特性演示

在上傳文件中有file類型的話，需要加上multipart/form-data

lable后面為什么需要for?

實(shí)現(xiàn)點(diǎn)擊文字就可以選中單選的作用

<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><form action="1text.html" method="post" enctype="multipart/form-data" autocomplete="on"><input type="file"/><label for="">用戶名</label><input type="text" name="username" placeholder="請(qǐng)輸入用戶名" required /><lable for="">工號(hào)</lable><input type="text" name="gonghao" placeholder="請(qǐng)輸入工號(hào)" pattern="^\d{5}[imooc]$"/><input type="submit" value="不提交" formnovalidate=""><input type="submit" ><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約束驗(yàn)證API

html5的約束驗(yàn)證API

屬性含義

willValidate屬性	元素約束是否被符合，如果不符合返回false
Validity屬性	ValidityState對(duì)象，表示驗(yàn)證對(duì)象所屬狀態(tài)，驗(yàn)證是否成功
validationMessage屬性	用于描述元素相關(guān)的約束信息
checkValidity()方法	檢查元素是否滿足它的相關(guān)約束
setCustomValidity()方法	設(shè)置和預(yù)定義，修改信息

2.1 Validity屬性介紹以及演示

方式一：

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

方式二：

console.log(username.validity);

兩種方式輸出結(jié)果一樣的

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-h8c4ZISS-1661998975565)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831154446910.png)]

2.1.2 Q:document.getElementById(“id”)和某一個(gè)id是全等的嗎？

A:是的

但是不推薦直接使用id這種寫法，

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

原因二：后期維護(hù)麻煩，直接使用id容易與某個(gè)變量混淆

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Oz7qG0Hv-1661998975567)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831155034172.png)]

輸出結(jié)果含義

badInput	用戶提供了一個(gè)瀏覽器不能轉(zhuǎn)換的input
customError	與setCustomValidity()相對(duì)應(yīng)
patternMismatch	pattern 正則表達(dá)式是否驗(yàn)證通過
rangeOverflow	用于描述input框中數(shù)值的大小是否超過最大值
rangeUnderflow	用于描述input框中數(shù)值的大小是否超過最小值
stepMismatch	step與其對(duì)應(yīng)，未設(shè)置step的時(shí)候?yàn)閠rue
tooLong	maxlength 主要描述字段的長度，這兩個(gè)值恒為false
tooShort	minlength
typeMismatch	如果輸入的值不是對(duì)應(yīng)的type值，比如url,email……則typeMismatch就為true
valid	該屬性是否有value值
valueMissing	是否為必填項(xiàng)，若屬性為required,則valueMissing為true,如果有了value值，則會(huì)顯示為false

2.2 字段演示

2.2.1 移動(dòng)端不推薦使用

消除搜索框的那個(gè)叉號(hào)

2.2.2 如何控制輸入5位數(shù)？

使用javascript

2.2.3 如何保留兩位小數(shù)？

如果value為0.02，則提交到后臺(tái)的時(shí)候值為0。

在input標(biāo)簽中，加一個(gè)step=“0.01”

2.3 checkValidity()方法介紹和演示

如果元素沒有滿足它的任意約束，返回false,其他情況返回true

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

<label for="">用戶名</label> <input type="text" name="username" id="usernames" placeholder="請(qǐng)輸入用戶名" pattern="^\d{5}" required value="2"/> // 檢查郵箱格式是否正確 if(emails.checkValidity()){alert("這是一個(gè)郵箱的格式"); } else{alert("這不是一個(gè)郵箱"); } // 檢查用戶名是否符合要求 if(usernames.checkValidity()){alert("用戶名符合"); } else{alert("用戶名不符合"); }

2.4 setCustomValidity案例

用途

設(shè)置自定義驗(yàn)證內(nèi)容，用于即將實(shí)施與驗(yàn)證的約束來覆蓋預(yù)定義的信息

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ygjwSU1Y-1661998975568)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831193008346.png)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-sb6yrnSK-1661998975569)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831193041055.png)]

<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="請(qǐng)輸入代碼"><input type="submit" value="驗(yàn)證"></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("必須是四個(gè)數(shù)字！")}else{obj.setCustomValidity("11")}}}</script> </body>

三、html5自帶驗(yàn)證美化

要做出不一樣的表單驗(yàn)證，我們需要了解一些偽類和css選擇器

:required和:optional

:in-range和:out-of-range

:valid和:invalid

:read-only和:read-write

3.1 :required和:optional

居然連個(gè)空格都不可以有的

錯(cuò)誤寫法：select :optional

正確寫法：select:optional

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

案例代碼：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(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;}/* 為輸入框?yàn)榧由?選填)/(必填) */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>手機(jī)</lable><input type="url" ><lable>網(wǎng)址</lable><select name="#"><option value="1">非必選項(xiàng)一</option><option value="2">非必選項(xiàng)二</option><option value="3">非必選項(xiàng)三</option><option value="4">非必選項(xiàng)四</option></select><textarea name="#" cols="30" rows="10" placeholder="留言（必填）" required></textarea><input type="submit" value="提交表單"></form></div> </body> </html>

3.2 valid和invalid偽類美化表單案例

額外補(bǔ)充知識(shí)點(diǎn)：

? CSS的 ~（波浪選擇器）

效果展示：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-LQAFytNR-1661998975571)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831223135005.png)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-2Sz4Bn3q-1661998975571)(C:\Users\86134\AppData\Roaming\Typora\typora-user-images\image-20220831223155665.png)]

代碼：

3.3 html5表單美化綜合案例

三個(gè)事件

oninput事件

oninvalid事件

onchange事件

案例效果(小bug:提交的時(shí)候驗(yàn)證表單正確了，但是仍然沒有變成綠色)：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(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\學(xué)習(xí)資料\大三上學(xué)期\前端\前端路線學(xué)習(xí)\HTML學(xué)習(xí)\代碼演示（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">手機(jī)號(hào) </label><input name="UserName" id="UserName" type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" pattern="^1[0-9]{10}$" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('請(qǐng)輸入正確的手機(jī)號(hào)碼')" 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('請(qǐng)輸入正確的密碼')" onchange="checkpassword()" required></div><div class="onelist"><label for="Repassword">確認(rèn)密碼 </label><input name="Repassword" id="Repassword" type="password" placeholder="確認(rèn)密碼" onchange="checkpassword()" required></div><div class="onelist"><label for="Repassword">了解方式 </label><select name="know" required><option value="">==請(qǐng)選擇==</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 默認(rèn)氣泡修改演示

等我學(xué)完js回來再看看？？

哈哈哈我就是乏了

總結(jié)

以上是生活随笔為你收集整理的技术胖--前端学习html5表单美化部分笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Wireshark 使用教程
下一篇： Qt Qml 开发超高清 4K、8K 视