1、表單語法
method: 規定如何發送表單資料常用值：get post
在實際網頁開發中通常采用post方式提交表單資料
action: 表示向何處發送表單資料
<form method="post" action="result.html">
<p>名字：<input name="name" type="text" > </p>
<p>密碼：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/提交"/>
<input type="reset" name="Reset" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/重填"/>
</p>
</form>
2、13個表單元素
1、文本框
<!--type="text" name：文本框名稱(必填) value：文本框初始值 size：文本框長度 maxlength：文本框可輸入最多字符 --> <input type="text" name="userName" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/用戶名" size="30" maxlength="20"/>
2、密碼框
向密碼框中輸入字符時，顯示的效果，密碼字符以黑色實心的圓點來顯示，
<!--type="password" name：密碼框名稱(必填) size：密碼框長度 --> <input type="password" name="pass" size="20"/>
3、單選按鈕
同一組單選按鈕，name屬性值必須相同，才能在選中單選按鈕時達到互斥
<!--type="radio" name：單選框名稱(必填)，一組的名稱需要相同 checked：單選按鈕選中狀態 value：單選框的值 --> <input name="gen" type="radio" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/男" checked />男 <input name="gen" type="radio" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/女" />女
4、復選框
同一組復選框，根據需要可設定name屬性值相同
<!--type="checkbox" name：復選框名稱(必填)，一組的名稱需要相同 checked：復選按鈕選中狀態 value：復選框的值 --> <input type="checkbox" name="interest" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/sports"/>運動 <input type="checkbox" name="interest" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/talk" checked />聊天 <input type="checkbox" name="interest" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/play"/>玩游戲
5、下拉串列框
希望在頁面加載時有默認選中的選中項，則必須使用selected屬性，如果沒有默認選中項則第一個選項 默認被選中
<!--select:下拉串列框--> <!--option：選項--> <select name="串列名稱" size="行數"> <option value="https://www.cnblogs.com/wyh518/archive/2022/11/06/選項的值" selected="selected">…</option > <option value="https://www.cnblogs.com/wyh518/archive/2022/11/06/選項的值">…</option > </select>
6、按鈕
<!--重置按鈕--> <input type="reset" name="butReset" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/reset按鈕"> <!--提交按鈕--> <input type="submit" name="butSubmit" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/submit按鈕"> <!--普通按鈕--> <input type="button" name="butButton" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/button按鈕"/> <!--圖片按鈕--> <input type="image" src="https://img.uj5u.com/2022/11/07/329084070757311.gif" />
7、多行文本域
textarea：多行文本域 cols：顯示的列數 rows：顯示的行數 <textarea name="showText" cols="x" rows="y">文本內容 </textarea>
8、檔案域
在表單中使用檔案域時，必須設定表單的“enctype”編碼屬性為“multipart/form-data”，表示將表單資料 分為多部分提交，
enctype：表單編碼屬性 <form action="" method="post" enctype="multipart/form-data"> <p> <!--type="file" 檔案域--> <input type="file" name="files" /> <input type="submit" name="upload" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/上傳" /> </p> </form>
9、郵箱
會自動驗證Email地址格式是否正確
郵箱:<input type="email" name="email"/>
10、網址
會自動驗證Email地址格式是否正確
請輸入你的網址:<input type="url" name="userUrl"/>
11、數字
min：最小值 max：最大值 step：步長 請輸入數字:<input type="number" name="num" min="0" max="100" step="10"/>
12、滑塊
type值為range即為滑塊，
請輸入數字:<input type="range" name="range1" min="0" max="10" step="2"/>
13、搜索框
type值為search即為搜索框，
請輸入搜索的關鍵詞:<input type="search" name="sousuo"/>
3、表單的高級應用
在某些注冊頁面或本圖片中訂單資訊頁面，必須同意一些條款按鈕才能使用等等
- 隱藏域
在瀏覽器中看不到隱藏域，但是在提交表單時可以看到隱藏域的內容被提交至服務器
<input type="hidden" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/666" name="userid">
- 只讀、禁用
W3C HTML5標準中，規定對于布爾型別的屬性，屬性值可以省略
只讀和禁用不能單寫readonly或disabled，必須寫readonly＝”readonly”和disabled=“disabled” <input name="name" type="text" value="https://www.cnblogs.com/wyh518/archive/2022/11/06/張三" readonly> <input type="submit" disabled value="https://www.cnblogs.com/wyh518/archive/2022/11/06/保存" >
- 表單元素的標注
增強滑鼠的可用性
自動將焦點轉移到與該標注相關的表單元素上
<!--它的for屬性對應的id與表單元素id一致--> <label for="id">標注的文本</label> <input type="radio" name="gender" id="male"/>
4、表單的初級驗證
如果用戶填寫的表單內容不進行驗證就發給服務器，那么服務器發現填寫的不合法，或是沒有填寫，就 會回傳回應給用戶，用戶重新填寫再提交，如此多次持續直到用戶輸入正確，它們之間的通信是通過網 絡進行的，如果網路很差，那么注冊一個賬號就得花很長時間，對用戶來說是非常煩的，對服務器來說 也增加了其作業壓力，
要是有惡意的用戶向服務器發送病毒或是有害于服務器安全的程式就更危險了，
表單驗證的好處：
- 減輕服務器的壓力，
- 保證資料的可行性和安全性，
在客戶端就對表單進行驗證是非常有必要的
表單初級驗證的方法
- placeholder
提示語默認顯示，當文本框中輸入內容時提示語消失
<input type="search" name="sousuo" placeholder="請輸入要搜索的關鍵字"/>
- required
規定文本框填寫內容不能為空，否則不允許用戶提交表單
<input type="text" name="username" required/>
- pattern
用戶輸入的內容必須符合正則運算式所指的規則，否則就不能提交表單
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
5、小結
本文來自博客園，作者：腹白，轉載請注明原文鏈接：https://www.cnblogs.com/wyh518/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/528092.html
標籤：其他
上一篇：串列、表格與媒體元素
下一篇：vue匯出word檔案