<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <!--form表单可以和table一起使用 --> <form action="tex.html"method="get" id="fo"> <!--action属性: 用来指定表单数据提交的位置--> <!--method属性:指定网络请求方式 (默认方式为get请求) 1.get请求:传递到服务端的数据以追加到url路径后的方式发送 规则:所有数据都在?之后,多个数据以&符号进行分割 缺点:①.网络请求数据直接暴露在url里,敏感数据容易被窃取 ②.传输数据量小 2. post : 传递到服务器端的数据隐藏在请求体里,隐藏敏感数据 优点:①传输数据隐秘性比较好 ②数据传输量基本不存在上限--> <!--input 输入属性 ---------- name属性必须添加 type="text" 单行输入文本框 type="password" 密码 使输入的文本用特殊符号代替 是别人无法看到 type="submit" 提交表单按钮 默认名称submit type="radio" 单选框 想要在一组数据中选择将相应数据name值输入相同(互斥效果通过同名name来实现) value是提交数据时方便组成键值对 type="checkbox" 多选框 type="rest" 重置按钮 默认rest value命名键值 type="file" 文件上传 上传附件 type="image" 图形提交按钮 src=""加入图片路径 type="button" 普通按钮 type="select" 下拉选择 <select> <option></option> </select> multiple多选属性 size 一次性显示个数 type="textarea" cols列数 rows行数 定义文本区域大小 --> <!--fieldset 外框 给表单加个框 用legend 给框左上加文字--> <!--tabindex 给input定义 用tab键 跳跃时的顺序 --> <fieldset> <legend>登录注册</legend> <table> <tr> <td>会员名:</td> <td> <input type="text" name="name"tabindex="1"autocomplete="off" autofocus="autofocus" required placeholder="请输入你的账号" value=" 飘逸的蜗牛"readonly> </td> <!--autocomplete="off" 自动补全取消 自动补全默认存在--> <!--autofocus="autofocus" 自动获取光标--> <!--required 必填字段--> <!-- placeholder="" 提示文字--> <!--readonly 只能读取不能修改--> <td>(可包含a~z,0~9和下划线)</td> </tr> <tr> <td>密 码:</td> <td><input type="password"name="pwd"tabindex="3"></td> <td>(至少包含六个字符)</td> </tr> <tr> <td>密 码:</td> <td><input type="password"name="pwd"tabindex="2"></td> <td>(至少包含六个字符)</td> </tr> <tr> <td colspan="3" align="center"><input type="submit"value="登录"></td> </tr> <tr> <td>性别</td> <td> <input type="radio"name="sex"value="boy">男 <input type="radio"name="sex"value="girl">女 <input type="radio"name="sex"value="secret">保密 </td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox"name="hobby"value="basketball">篮球 <input type="checkbox"name="hobby"value="football">足球 <input type="checkbox"name="hobby"value="pingpang">乒乓球 </td> </tr> <tr> <td>附件</td> <td><input type="file"name="file"></td> </tr> <tr> <td>图片按钮</td> <td><input type="image"name="image"src="../zuoye0319/11.jpg"width="20px"height="20px"></td> </tr> <tr> <td>普通按钮</td> <td><input type="button"name="button"value="普通按钮"></td> <td> <button> 普通按钮 </button> </td> </tr> <tr> <td>爱好</td> <td colspan="2"> <select name="hobby1"id="hobby1"multiple size="2"> <option value="1">网球</option> <option value="2">篮球</option> <option value="3">乒乓</option> <option value="41">足球</option> </select> </td> </tr> <tr> <td>协议</td> <td colspan="2"> <textarea cols="25"rows="5"> 666666666 老铁稳 </textarea> </td> </tr> <tr> <td><input type="submit"value="提交"></td> <td><input type="reset"value="撤销"></td> </tr> </table> </fieldset> </form> <input type="text"name="nick"form="fo"> </body> </html>
h5表单的标题和属性
最新推荐文章于 2022-09-28 19:36:22 发布