<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單的初級驗證</title> </head> <body> <h1>注冊</h1> <!-- 表單： action：表單提交的位置,可以是網站,也可以是一個請求處理地址 method：get/post 表單的兩種提交方式,為確保資料安全常用 post 方式提交 get 方式提交：我們可以在 url 中看到我們提交的資訊,不安全,高效 post 方式提交：比較安全,可傳輸大檔案 --> <form action="1.我的第一個網頁.html" method="get"> <!-- 文本輸入框： type：text value="https://www.cnblogs.com/ming2/archive/2021/02/06/狂神好帥"：默認初始值 maxlength="8"：最長能寫幾個字符 size="30"：文本框長度 placeholder：提示資訊 required：判空 <input type="text" name="username"> --> <p>名字：<input type="text" name="username" placeholder="請輸入用戶名" required/> </p> <!-- 密碼框： type：password placeholder：提示資訊 required：判空 <input type="password" name="pwd"> --> <p>密碼：<input type="password" name="pwd" placeholder="請輸入密碼" required/> </p> <!-- 單選框標簽： type：radio value：單選框的值 name：表示組 checked：默認選中 <input type="radio" value="https://www.cnblogs.com/ming2/archive/2021/02/06/boy" name="sex"/> 隱藏域：文本隱藏域,但表單提交后值仍然存在 type：hidden <input type="hidden" value="https://www.cnblogs.com/ming2/archive/2021/02/06/boy" name="sex"/> --> <p>性別： <input type="hidden" value="boy" name="sex"/> <input type="radio" value="boy" name="sex" checked/>男 <input type="radio" value="girl" name="sex"/>女 </p> <!-- 多選框標簽： type：checkbox checked：默認選中 disabled：禁用屬性 <input type="checkbox" value="https://www.cnblogs.com/ming2/archive/2021/02/06/sleep" name="hobby"/> --> <p>愛好： <input type="checkbox" value="sleep" name="hobby"/>睡覺 <input type="checkbox" value="code" name="hobby" checked/>敲代碼 <input type="checkbox" value="chat" name="hobby"/>聊天 <input type="checkbox" value="game" name="hobby" disabled/>游戲 </p> <!-- 按鈕： input type="button" 普通按鈕 input type="image" 影像按鈕 input type="submit" 提交按鈕 input type="reset" 重置按鈕 more... --> <p>普通按鈕： <input type="button" name="btn1" value="點擊按鈕"/> </p> <p>影像按鈕： <input type="image" src="../resources/image/1.jpg" name="btn1" width="50px" height="50px"/> </p> <!-- 下拉框_下拉框： selected：默認選中 <select name="串列名稱"> <option value="https://www.cnblogs.com/ming2/archive/2021/02/06/選項的值">下拉選擇值</option> <option value="https://www.cnblogs.com/ming2/archive/2021/02/06/選項的值">下拉選擇值</option> <option value="https://www.cnblogs.com/ming2/archive/2021/02/06/選項的值" selected>下拉選擇值</option> <option value="https://www.cnblogs.com/ming2/archive/2021/02/06/選項的值">下拉選擇值</option> </select> --> <p>國家： <select name="country"> <option value="china">中國</option> <option value="us">美國</option> <option value="switzerland" selected>瑞士</option> <option value="india">印度</option> </select> </p> <!-- 文本域： cols="50"：50列 rows="10"：10行 <textarea name="textarea" cols="50" rows="10">文本內容</textarea> --> <p>反饋： <textarea name="textarea" cols="50" rows="10">請輸入文本內容...</textarea> </p> <!-- 檔案域： type：file <input type="file" name="files"/> --> <p>上傳檔案： <input type="file" name="files"/> <input type="button" value="上傳" name="upload"/> </p> <!-- 郵件驗證： type：email required：判空 <input type="email" name="email"/> --> <p>郵箱： <input type="email" name="email" required/> </p> <!-- URL： type：url <input type="url" name="url"/> --> <p>URL： <input type="url" name="url"/> </p> <!-- 數字： type：number max：最大值 min：最小值 step：步長 <input type="number" name="num" max="100" min="0" step="10"/> --> <p>商品數量： <input type="number" name="num" max="100" min="0" step="1"/> </p> <!-- 滑塊： type：range max：最大值 min：最小值 step：步長 <input type="range" name="voice" max="100" min="0" step="2"/> --> <p>音量： <input type="range" name="voice" max="100" min="0" step="2"/> </p> <!-- 搜索框： type：search <input type="search" name="search"/> --> <p>搜索： <input type="search" name="search"/> </p> <!-- 增強滑鼠可用性： 點擊左側文字,游標可跳轉到指定 id 所在的標簽內 for：指向需跳轉的標簽 id --> <p>增強滑鼠可用性： <label for="mark">你點我試試</label> <input type="text" id="mark"> </p> <!-- 自定義郵箱： pattern：正則運算式 常用正則運算式：https://www.jb51.net/tools/regexsc.htm --> <p>自定義郵箱： <input type="text" name="mail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"> </p> <p> <input type="submit" value="提交表單"/> <input type="reset" value="清空表單"/> </p> </form> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/257341.html
標籤：其他