HTML5中form表单基础内容补充
2017-04-01 17:16
525 查看
form表单中的属性:
action属性:用来指定表单数据要提交到哪里 method属性:指定网络请求的方式 默认方式就是get请求 (1):get请求 传递到服务端的数据以追加到url路径后的方式发送 规则:所有数据都在?之后,多个数据以&符号进行分割 get请求缺点:网络请求数据直接暴露在url里,敏感数据容易被窃取。 数据传输量小。 (2):post: 传递到服务器端的数据隐藏在请求体里,隐藏敏感数据 post优点:传输数据的隐秘性比较好 数据传输量基本上不存在上限。 input的类型 ---- name属性必须添加!!!!为了正常的提交数据到服务器。 text:单行文本 password:密码 输入的文本以隐藏的方式显示 radio:单选框 互斥的效果通过同名name来实现 value是提交数据的时候方便组成键值对 checkbox:多选框 file:附件 image:图片按钮 button:普通按钮 select:下拉列表 size:显示下拉个数的大小 multiple:下拉数据可以同时选多个 textarea:文本域 rows和cols定义文本域的大小
<form action="Test.html" method="get" id="jredu"><fieldset><legend>登录注册</legend><table><tr><td>会员名:</td><td><input type="text" name="name" tabindex="1" autocomplete="off"autofocus placeholder="请输入会员名" value="漂移的蜗牛[b]"></td><td>(可包含a-z,0-9和下划线)</td></tr><tr><td>密码:</td><td><input type="password" name="pwd" tabindex="2"></td><td>(至少包含留个字符)</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" src="../../img/qqzone.png"></td></tr><tr><td>普通按钮</td><td><input type="button" value="普通按钮"></td></tr><tr><td>普通按钮</td><td><button>普通按钮</button></td></tr><tr><td>爱好</td><td colspan="2"><select name="hobby1" id="hobby1" size="3" multiple><option value="1">篮球</option><option value="2">网球</option><option value="3">羽毛球</option><option value="4">乒乓球</option></select></td></tr><tr><td>协议</td><td colspan="2"><textarea cols="25" rows="5"></textarea></td></tr><tr><td><input type="submit"></td><td><input type="reset"></td></tr><tr><td>下拉列表:</td><td><input id="myCar" list="cars" /><datalist id="cars"><option value="BMW"><option value="Ford"><option value="Volvo"></datalist></td></tr></table></fieldset></form>
相关文章推荐
- HTML5中form表单基础内容
- 利用html5 formdata技术将表单整个元素提交给另一个页面,异步刷新当前页面内容
- 跟KingDZ学HTML5之十一 HTML5 Form 表单新元素
- HTML5研究之form表单
- HTML5 智能form表单新属性
- [php基础]PHP Form表单验证:PHP form validator使用说明
- Javascript基础form表单
- 非常好的HTML5 Form表单示例
- 玩转html5(三)---智能表单(form),使排版更加方便
- javascript 跨域POST 使用form表单 获取提交返回内容的方法
- 表单form内容提交,中文乱码解决
- 霸气侧漏的HTML5--之--强大的form表单
- 跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性
- html5 form表单,html5 教程
- Html5系列之:新Form表单
- html5 笔记6 新的form表单处理
- 跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性
- 黑马程序员--HTML基础之Form表单
- 非常好的HTML5 Form表单示例
- jQuery EasyUI API 中文文档 - 表单(form补充)