您的位置:首页 > Web前端 > HTML5

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: