HTML 表单元素(上)
来源:互联网 发布:义乌美工培训班多少钱 编辑:程序博客网 时间:2024/06/06 01:13
- 表单元素总汇
- 表单元素解析
一、表单元素总汇
在HTML5的表单中,提供了各种可供用户输入的表单控件。
二、表单元素解析
1、< form > 定义表单
<form> 用户名:<input name="user01"> <button>提交</button></form>
解释:< form > 元素主要是定义本身是一组表单。
①、action
<form action="http://www.baidu.com"> 用户名:<input name="user02"> <button>提交</button></form>
②、method
<form method="GET" action="http://www.baidu.com"> 用户名:<input name="user03"> <button>提交</button></form>
③、丧失自动提示功能autocomplete
<form autocomplete="off"> 用户名:<input name="user04"> <button>提交</button></form>
④、target使用_blank新建目标
<form target="_blank"> 用户名:<input name="user05"> <button>提交</button></form>
⑤、表单form
<form id="register06" action="http://www.baidu.com" target="_blank"> 用户名:<input name="user06"> <button>提交</button></form>电子邮箱:<input name="email06" form="register06">
2、< input > 表示用户输入数据
<form action="http://www.baidu.com" target="_blank"> 电话:<input name="tel01"></form>
解释:< input > 元素默认情况下会出现一个单行文本框,有五个属性。
①、聚焦光标
<form action="http://www.baidu.com" target="_blank"> 电话:<input name="tel02" autofocus></form>
②、禁用inout
<form action="http://www.baidu.com" target="_blank"> 电话:<input name="tel03" disabled></form>
③、禁止自动完成
<form> 电话:<input name="tel04" autocomplete="off"> <button>提交</button></form>
④、输入框默认值
<form> 电话:<input name="tel05" value="xiaoye"> <button>提交</button></form>
3、< label > 添加说明标签
<form action="http://www.baidu.com" target="_blank"> <label for="user07">用户名: <input id="user07" name="user"> </label> <label>电子邮件:<input name="email08"></label></form>
解释:< label > 元素可以关联input让用户体验更好。且更加容易设置CSS样式。
4、< fieldset > 对表单进行编组
<form> <fieldset>....</fieldset></form>
解释:< fieldset > 元素可以将一些表单元素组织在一起,形成一个整体。
5、< legend > 添加分组说明标签
<form> <fieldset> <legend>注册表单</legend> </fieldset></form>
解释:< legend > 元素给分组加上一个标题。
6、< button > 添加按钮
<button type="submit">按钮</button>
解释:< button > 元素添加一个按钮,type属性有如下几个值
<form method="get" action="http://www.baidu.com" target="_blank"> <fieldset> <legend>注册分组</legend> <label>用户名:<input name="user"></label> <br> <label>电子邮箱:<input name="email"></label> </fieldset> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">按钮</button></form>
对于type属性为submit时,按钮还会提供额外的属性。
阅读全文
0 0
- HTML 表单元素(上)
- HTML 表单元素(中)
- HTML 表单元素(下)
- HTML笔记(HTML元素-表单)
- Html表单和表单元素
- html (jsp )表单元素总结
- html 5 表单元素(下)
- html创建表单元素
- Html表单元素
- html中的表单元素
- HTML的表单元素
- HTML表单元素
- HTML表单元素
- HTML 5 表单元素
- html表单元素
- HTML中的表单元素
- html表单元素
- html的表单元素
- 虚拟机网路连接问题
- 互联网的时代 我们应该怎么做?
- Qt自定义控件的创建与初步使用(二)之图片上绘制文字、箭头、曲线
- 欢迎使用CSDN-markdown编辑器
- JAVA面试易错题目总结(一)
- HTML 表单元素(上)
- 利用 Virtualbox 进行 Ironic 环境的搭建和测试
- 在pl/sql developer中如何创建 database link及使用详解
- Ubuntu16.04:Python3+Nginx+Django+mysql+git配置,sublime text
- vsftpd配置文件详解
- Maven的核心笔记(3)常用命令、坐标和仓库
- 《零秒思考》书评
- UML序列图总结(Loop、Opt、Par和Alt)
- 随机采样方法整理与讲解(MCMC、Gibbs Sampling等)