html 常用标签[4]-表单
来源:互联网 发布:健身行业数据 编辑:程序博客网 时间:2024/06/01 07:53
参考:HTML
表单用于让网站用户填写某些内容,完成之后可以提交到服务器端进行处理保
存,html 里面通过一系列的标签来表现出表单的基本界面
- 表单
1)标签定义供用户输入的 HTML 表单:
属性:
action:规定当提交表单时,向何处发送表单数据。
name:给表单命名
target:_blank 等其他值,这是最常用的,其他几乎不用!
method:提交方式,post 或 get 值
2)标签定义表单的输入界面
通过 type 属性来展示不同的输入界面,通过 value 改变默认值
1.普通文本框:
2.密码框:
3.文件上传
4.隐藏的 input
5.普通按钮
6.单选
通过相同的 name 属性来实现单选
7.复选框
8.提交
9.重置
属性 checked,可用值:checked
一般用于选择输入界面(单选复选),实现默认选择
属性 disabled,可用值:disabled
几乎所有的输入界面都可以使用该属性
属性 name
自己给 input 输入界面起的名字
属性 readonly,可用值 readyonly
使输入界面为只读状态
属性 size,值为数字
设置输入框长度
属性 value
该属性值就是这个 input 最终提交到页面的数据,可以通过该属性设置默认值
3)textarea 标签,定义多行输入框
双标签,默认值直接写在标签之间。
属性:cols,值为数字
属性:rows,值为数字
也可以使用上面所说的:disabled,name,readonly 属性
4)label 标签,提升用户体验
标签的 for 属性与相关 input 的 id 属性相同
5)select 标签,配合 option 标签来实现下拉菜单
可用属性:disabled,name,multiple
6)option 标签
可用属性:disabled,selected,value
7)optgroup 标签
把相关的选项组合在一起
属性 label:给选项组命名
属性 disabled:经用该选项组
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>表单</title></head><body><h1>会员注册</h1><form action="http://www.baidu.com" name="form1" target="_blank" method="post">姓名:<input type="text" value="小王" size="100" /><br />密码:<input type="password" disabled="disabled" size="100" /><br />头像:<input type="file" /><br /><input type="hidden" /><input type="button" value="点我" /><br />性别:<input type="radio" id="boy" name="sex" checked="checked" /><label for="boy">男</label> <input name="sex" id="girl" type="radio" /><label for="girl">女</label><br />您的爱好:<input type="checkbox" />篮球<input type="checkbox" checked="checked" />羽毛球<input type="checkbox" />乒乓球<br />自我介绍:<textarea cols="20" rows="12">我是一名学生</textarea><br /><br /><select name="city"> <optgroup label="江苏"> <option value="无锡">无锡</option> <option value="盐城">盐城</option> <option value="南京">南京</option> <option value="苏州">苏州</option> </optgroup> <optgroup label="山东" disabled="disabled"> <option value="青岛">青岛</option> <option value="淄博">淄博</option> </optgroup></select><br /><br /><br /><br /><input type="submit" value="确认提交" /><input type="reset" /></form></body></html>
阅读全文
0 0
- html 常用标签[4]-表单
- html常用标签:表单
- html中常用的标签-表单标签
- html标记语言的常用标签,表单
- HTML常用标签(表单)(四)
- HTML学习9:常用标签之表单标签
- HTML学习5:常用标签之表单标签
- JAVAWEB-表单标签及常用标签(HTML)
- HTML标签-表单标签
- html常用标签4
- HTML常用标签(一)——表单控件&列表
- 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单
- HTML中的表单标签
- HTML基本标签--表单
- HTML 表单标签
- 五、Html表单标签
- html 表单数据标签
- HTML-表单标签(*****)
- 分析Android 搜狗输入法在微信和QQ中发送图片和表情
- 先序遍历用于优化树形分组背包问题
- 微信应用开发总结
- 验证表单
- 数组去重
- html 常用标签[4]-表单
- jquery实现注册表单验证
- 网易2018校园招聘编程题真题-[编程题] 相反数
- 第一次在CSDN上写文章,以TensorFlow的使用教程开始
- 使用Idea新建Spring Boot项目
- touxiang
- 异常基础篇_对throws和throw的理解,自定义异常
- MyBatis传入参数为集合 list 数组 map写法
- 实验2.4 运用静态链表实现对数据的基本操作