大佬教程收集整理的这篇文章主要介绍了Html5之基础-9 HTML表单、其他控件、其他常用标记,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
一、表单概述
表单的作用
(1) 表单用于显示、收集信息,并提交信息到服务器
(2) 表单有两个基本部分
- 实现数据交互的可见的界面元素,比如文本框或按钮
- 提交后的表单处理
(3) 页面元素
- 使用 <form> 元素创建表单
- 在 <form> 元素中添加其他表单可以包含的控件元素
如图:
表单元素 <form>
(1) 定义表单:使用成对的 <form></form>@L_618_4@
(2) 主要属性
- action: 定义表单被提交时发生的动作,通常包含服务方脚本的URL(比如:JSP/PHP)
- method: 指出表单数据提交的方式,取值为 get 或者 post
- encrype: 表单数据进行编码的方式
- name: 名称
表单控件
(1) 表单可以包含很多不同类型的表单控件
(2) 表单控件元素是包含在表单元素中具有可视化外观的 HTML 元素,用于访问者输入信息
(3) 表单控件元素有
- input元素: 文本输入控件、按钮、单选和复选按钮、选项框、文件选择框和隐藏控件等
- textarea元素
- SELEct和option元素
- 其他元素
二、<input> 元素
<input> 元素
(1) <input> 元素用于收集用户信息
(2) 该元素是一个单@L_618_4@,语法为:<input />
(3) 主要属性
- type: 根据不同的 type 属性值,可以创建各种类型的输入字段,比如文本框、复选框等
- value: 控件的数据
- name: 控件的名称
- disabled: 禁用控件
文本框与密码框
(1) 文本框
- <input type="text" />
(2) 密码框
- <input type="password" />
(3) 主要属性
- name: 名称
- value: 由访问者自由输入的任何文本
- maxlength: 限制输入的字符数
- readonlu: 设置文本控件只读
单选框和复选框
(1) 单选框
- <input type="redio" />
(2) 复选框
(3) 主要属性
- name: 设置名称,并用于分组,一组单选框或者复选框的名称必须相同
- value: 文本,当提交form时,如果选中了此单选按钮,那么value就被发送到服务器
按钮
(1) 提交按钮
- <input type="submit" />
- 传送表单数据给服务器或其它程序处理
(2) 重置按钮
- <input type="reset" />
(3) 普通按钮
- <input type="button" />
- 用于执行客户端脚本
(4) 主要属性
- name: 名称
- value: 按钮的标题文本
隐藏域和文本选择框
(1) 隐藏域
- <input type="hidden" />
- 在表单中包含不希望用户看见的信息
- value 属性: 值
(2) 文本选择框
- <input type="file" />
三、其他控件
<lable> 元素
(1) 语法: <label>文本</label>
(2) 主要属性
- for: 表示与该元素相联系的控件的ID值
(3) 作用
- 将文本与控件联系在一起后,单击文本,效果就同单击控件一样
选项框
(1) 两种:下拉选项框和滚动列表
(2) <SELEct> 创建选项框
- name: 选项框命名
- size: 大于1,则为滚动列表
- multiple: 设置多选
(3) <option> 选项
- value: 选项的值
- SELEcted: 预选中
<textarea> 元素
(1) 多行文本输入框
- <textarea>文本</textarea>
(2) 主要属性
- name: 名称
- rows: 指定文本区域的行数
- readonly: 只读
<textarea name="txTinfo" rows="4" cols="20"></textarea>
为控件分组
(1) <fieldset> 元素: 为控件分组
四、其他常用@L_618_4@
浮动框架<iframe>元素
- 在页面上使用 <iframe> 元素
- 设置 <iframe> 元素的 src 属性,指向其他的页面的 URL
(2) 语法
- 开始@L_618_4@: 必需
- 内容: 可以添加文本描述,当浏览器不支持<iframe>元素时,将显示该文本描述信息
- 结束@L_618_4@: 必需
(3) 主要属性
- src 浮动框架中的网页的url
- height 高度
- width 宽度
摘要与细节
(1) 网页上经常需要将部分信息进行展开或者收缩、
(2) <details> 元素用于定义细节
(3) <sumMary> 元素用来包含 <details> 元素的标题
(4) 目前只 Chrome 支持
(5) <details> 元素用于定义细节
- 可以在此元素里添加文本或者图像等元素
- 需要与 <sumMary> 元素配合使用
(6) <sumMary> 元素用来包含 <details> 元素的标题
- 必须包含在 <details> 元素中
- 作为 <details> 元素的第一个子元素
度量元素<meter>
(1) <meter> 元素用于定义度量衡
- 比如用于表示投票人数比例、磁盘的使用量或者统计比例等
- 常用于静态比例的显示(已知最大和最小值)
(2) 语法
- <meter>文本</meter>
(3) 主要属性
- max: 范围的最小值,默认为0
- min: 范围的最大值,默认为1
- value: 度量值,默认值为0
时间元素<time>
(1) <time> 元素用来定义公历的时间(24小时制)或日期
- 常用于对网页添加与时间相关的附加信息
(2) 语法
- <time>文本</time>
(3) 主要属性
- datetiR_650_11845@e 规定日期/时间,日期与时间之间用"T"文字分割
高亮文本显示<mark>元素
(1) <mark> 元素用于定义页面中带有记号的文本
- 常用于需要突出显示的文本
- 被 <mark> 元素包围的文本会显示额外的背景色
<h2>搜索"<mark>阿里巴巴</mark>" :</h2> <p><mark>阿里巴巴</mark>官方网站...</p> <p>独家曝光<mark>阿里巴巴</mark>上市最新动态...</p> <p><mark>阿里巴巴</mark>公司怎么样...</p>
以上是大佬教程为你收集整理的Html5之基础-9 HTML表单、其他控件、其他常用标记全部内容,希望文章能够帮你解决Html5之基础-9 HTML表单、其他控件、其他常用标记所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。