- A+
所属分类：Web前端
<!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="狂神好帅"：默认初始值 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="boy" name="sex"/> 隐藏域：文本隐藏域,但表单提交后值仍然存在 type：hidden <input type="hidden" value="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="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="选项的值">下拉选择值</option> <option value="选项的值">下拉选择值</option> <option value="选项的值" selected>下拉选择值</option> <option value="选项的值">下拉选择值</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-zd]+(.[a-zd]+)*@([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>
