HTML5 表单
2019-05-13 08:25
836 查看
HTML5 表单
1、表单作用
收集用户的信息并提交给服务器
2、表单的要素
form元素:收集用户的信息
表单控件:可以与用户进行数据交互的可视化组件
form元素 <form></form>
属性 | 取值 | 说明 |
action | 地址值 | 提交给服务器处理程序的地址,默认提交本页 |
method | get | 向服务器要数据,显式提交,大小不超过2KB,默认值 |
post | 提交给服务器处理,隐式提交,无数据大小限制 | |
enctype | application/x-www-form-unlencoded | 允许所有的文本数据提交给服务器,默认值 |
multipart/form-data | 允许将文件提交给服务器 | |
text/plain | 允许将普通字符提交给服务器,特殊字符不行 |
表单控件
只有放在<form>中才能提交服务器
1、文本框 和 密码框
文本框:<input type=‘text’>
密码框:<input type=‘password’>
属性 | 取值 | 说明 |
name | 字符串 | 为控件起名,在服务器上使用 |
value | 字符串 | 控件上所显示的值 |
maxlength | 数值 | 限制输入的最大字符数 |
placeholder | 字符串 | 提示的占位符 |
2、按钮
1、提交按钮 <input type=‘submit’>
2、重置按钮 <input type=‘reset’>
3、普通按钮 <input type=‘button’>
属性 | 值 | 说明 |
---|---|---|
value | 字符串 | 设置按钮上的文字 |
3、单选按钮 和 复选框
1、单选按钮 <input type=‘radio’>
2、复选框 <input type=‘checkbox’>
属性 | 值 | 说明 |
---|---|---|
name | 字符串 | 定义名称,并分组 |
value | 字符串 | 定义控件的值 |
checked | – | 设置预选中,该属性无值 |
4、隐藏域 和 文件选择框
1、隐藏域:提交给服务器但不显示给用户 <input type=‘hidden’>
属性 | 值 | 说明 |
---|---|---|
name | 字符串 | 定义名称 |
value | 字符串 | 定义控件的值 |
2、文件选择框 <input type=‘file’ method=‘post’ enctype=‘multipart/form-data’>
属性 | 值 | 说明 |
---|---|---|
name | 字符串 | 定义名称 |
注意:文本选择框的表单method值一定为post,且enctype值为multipart/form-data
5、多行文本域
多行文本域: <textarea> </textarea>
属性 | 值 | 说明 |
---|---|---|
name | 字符串 | 定义名称 |
cols | 数值 | 指定文本域的列数(文本框宽度) |
rows | 数值 | 指定文本域的行数(文本框高度) |
6、下拉选项框
1、下拉选项框:<select> </select>
2、选项标记:<option> </option>
标签 | 属性 | 值 | 说明 |
---|---|---|---|
<select> </select> | name | 字符串 | 定义名称 |
<option> </option> | value | 字符串 | 提交服务器的内容 |
<form action="login" method="post" enctype="multipart/form-data"> <p> <!-- 文本框 --> 用户名称 <input type="text" name="uname" maxlength="12" placeholder="请输入用户名"> </p> <p> <!-- 密码框 --> 用户密码 <input type="password" name="upwd" placeholder="请输入密码"> </p> <p> <!-- 按钮 --> <input type="submit"> <input type="reset"> <input type="button" value="返回"> </p> <p> <!-- 单选按钮 --> 性别: <input type="radio" name="sex" value="m">男 <input type="radio" name="sex" value="w">女 <input type="radio" name="sex" value="x" checked>保密 </p> <p> <!-- 复选框 --> 爱好: <input type="checkbox" name="hobby" checked>游泳 <input type="checkbox" name="hobby">看书 <input type="checkbox" name="hobby">旅游 </p> <p> <!-- 隐藏域 --> <input type="hidden" name="uid" value="123456789"> </p> <p> <!-- 文本选择框 --> 上传头像: <input type="file" name="hphoto"> </p> <p> <!-- 多行文本域 --> <textarea name="info" cols="30" rows="10"></textarea> </p> <p> <!-- 下拉选项框 --> 选择城市 <select name="city" > <option value="BJ">北京</option> <option value="TJ">天津</option> <option value="SH">上海</option> <option value="CQ">重庆</option> </select> </p> </form>
相关文章推荐
- html5表单标签
- 分针网——每日分享:HTML5新增标签 + 智能表单
- HTML5 表单新元素支持特性对比列表
- HTML5表单新特征简介与举例
- 学习:从零玩转HTML5前端+跨平台开发(表单标签-非input标签(掌握))
- 在表单提交中用到的html5新标签
- HTML5表单及其验证
- 文本框 12种炫酷HTML5 SVG和CSS3表单浮动标签特效
- HTML5_01之表单新特性
- HTML5项目笔记2:离线系统表单设计
- HTML5 学习总结(二)——HTML5新增属性与表单元素
- html5新增的语义标签和表单验证功能
- HTML5之表单新增类型介绍
- jQuery html5Validate基于HTML5表单验证插件
- HTML5表单信息验证工作原理
- html5表单新增实用属性
- html5表单
- html5Web表单2.0,其实,真的是比较是有趣的哦
- 跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性
- 捣鼓HTML5之表单