HTML5——设计一个表单
post和get提交
get方式提交：提交后可以在url中看到我们填写的信息（账号，密码等），会不安全，但是高效，不能传输大文件
post方式提交：不能看到我们填写的信息，比较安全，也可以传输大文件
要素
-
文本框
-
单选框和多选框
-
按钮
-
文本域和文件域
-
搜索滑框和简单验证
-
初级验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单 action：表单提交的位置，可以是网页，也可以是一个请求处理地址 method：提交方式，有post，get两种 get方式提交：提交后可以在url中看到我们填写的信息（账号，密码等），会不安全，但是高效，不能传输大文件 post方式提交：不能看到我们填写的信息，比较安全，也可以传输大文件 --> <form action="媒体元素.html" method="get" > <!--账号框 表单的初级验证： placeholder 提示信息 required 非空判断 pattern：正则表达式验证 --> <p>账号：<input type="number" name="id" placeholder="请输入账号" required></p> <!--文本输入框：input type="text"，name="username"给输入框起名字 value:设置默认值 maxlength：最大字符长度 size：输入框的尺寸 readonly:只读 --> <p>名字：<input type="text" name="username" value="NASA" maxlength="5" size="30" readonly/> </p> <!--密码框 hidden:隐藏域，可以传递默认值 --> <p>密码：<input type="password" name="pwd" hidden value="123456"/></p> <!--单选框标签 input type="radio" value：单选框的值 name：组，name的值要相同才算在一个组，才能单选 checked:默认选择 --> <p>性别： <input type="radio" value="boy" name="sex" checked/>男 <input type="radio" value="girl" name="sex"/>女 </p> <!--多选框--> <p>爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby">敲代码 <input type="checkbox" value="playgame" name="hobby">打游戏 <input type="checkbox" value="chat" name="hobby">聊天 </p> <!--按钮 input type="button" 普通按钮 input type="image" 图片按钮 input type="submit" 提交按钮 input type="reset" 重置按钮 --> <p>按钮： <input type="button" value="点击升级" name="btn1"> <input type="button" value="点击强化" name="btn2"> <input type="button" value="点击升阶" name="btn3"> <!-- <input type="image" src="../resources\image\1.jpg" >--> </p> <!--下拉框select，列表框option selected：默认选择 --> <p>国籍： <select name="下拉选择" > <option value="chain" selected>中国</option> <option value="usa">美国</option> <option value="english">英国</option> <option value="Germany">德国</option> <option value="France">法国</option> </select> </p> <!--文本域textarea--> <p>用户反馈： <textarea name="textyu" cols="30" rows="10">文本内容</textarea> </p> <!--文件域--> <p> <input type="file" name="files" > <input type="button" value="点击上传" name="upload"> </p> <!--邮箱验证--> <p>邮箱验证： <input type="email" name="email" > </p> <!--自定义邮箱--> <p>正则表达式邮箱验证： <input type="email" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" > </p> <!--url验证--> <p>url验证： <input type="url" name="url" > </p> <!--数字验证--> <p>数字验证： <input type="number" name="number" max="100" min="10" step="5" > </p> <!--滑块--> <p>音量 <input type="range" name="voice" max="100" min="0" step="5"> </p> <!--搜索框--> <p>搜索 <input type="search" name="search" > </p> <!--提交和重置 disabled:禁用 --> <p> <input type="submit" disabled/> <input type="reset"/> </p> </form> </body> </html>
效果图
