web day02 表格 表单及HTML常用的表单控件
一、 表格的标签及属性
table属性
Width、height 宽高(单位是像素或百分比)
align 对齐
border 外边框
bgcolor 背景色
background 背景图片
Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0
Cellpadding 单元格边距(表格边框与内容的距离) 一般情况写0tr属性:
Align 水平对齐
left/center/ right
valign 垂直对齐
Top(上)/middle(中)/bottom(下)
bgcolor 背景色td的基本属性
Width、height 宽高(单位是像素或%)
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
Colspan 水平合并 合并多列
rowspan 垂直合并 合并多行表头th标签
是特殊的单元格,文字会自动加粗、居中。它的用法是取代的位置即可
餐饮类型 | 主要菜系 | 价格 |
---|---|---|
中餐厅 | 生猛海鲜 | 1000元 |
表格主体tbody标签 T head 表格页眉(头部)只能出现一次 T body 表格主体可以出现多次 T foot 表格页脚(结尾)只能出现一次 以上三个标签结合使用,可将表格中的一行或几行合成一组 ….….….
二、 表单属性
- 表单的概念
表单在网页中主要负责数据采集功能,表单的标记是: - 表单的属性
- action属性:设置表单的提交地址(表单提交的url)指定表单提交后由服务器上的哪个处理程序进行处理
2 method属性:设置表单的提交方法, 属性值为get、post提交方式
3 name属性:设置表单的名称
4 target属性:设置表单的打开方式, 属性值可以是_blank、_self。_self在原窗口中打开,为默认值。_blank
在新窗口打开 - enctype:默认编码 或者指定二进制流 【附件的提交形式】
- method的值为get:它是通过URL来传递表单数据的,表单元素的数据在地址栏可见,而且有大小限制,传数据量小一般不大于2KB
method的值为post:它是通过请求正文传递表单数据的,URL不可见表单元素数据,比较安全,而且没有大小限制,但往往服务器会控制 - 输入标记
表单元素中输入标签是,常用属性有type(类型)、name(名称)、value(值)、checked(默认选中)
三、 HTML常用表单控件 - 文本框
文本框:主要用于输入单行文本内容。代码如下:
代码格式如下:
姓名:
效果如下:
账号: - 密码框
密码框:主要用于输入一些保密信息,代码格式如下:
代码格式如下:
密码:
效果如下:
密码:
分组:
用户登录
3. 单选框
单选框主要是让网页浏览者在一组选项里选择一个。
Name属性定义单选框的名称,单选框都是以组为单位使用的,在同一组中的选项必须使用同一名称【name=“gender”】。
代码格式如下:
性别:男
女
效果如下:
性别:男
女
- 复选框
复选框主要是让网页浏览者在一组选项里同时选择多个选项。
选中checked代码格式如下:【disabled="disabled"足球】
爱好:读书
听歌
阅读
效果如下:
兴趣爱好:足球
篮球球
音乐扩展:隐藏域:
图像域:
- 文件域
文件域主要是让网页浏览者上传文件。
代码格式如下:
上传文件:
效果如下:
- 提交按钮
提交按钮用来将输入的信息提交到服务器。Value属性定义按钮的显示文字。
代码格式如下:效果如下:
- 重置按钮
重置按钮用来重置表单中输入的信息。代码格式如下:
<input type="reset"value=“重置”/>
效果如下:
input重置按钮:input提交按钮:
input普通按钮:
提交按钮
重置按钮
普通按钮
- 图片域
图像域标记
代码格式如下: - 下拉列表
下拉菜单主要用于在有限的空间里设置多个选项。
下拉菜单选中状态给option添加 selected
代码格式如下:
… 居住城市(下拉菜单): 北京 上海 深圳 厦门
注:Select标记的multiple属性和size属性不要求掌握。
列表框(提供多选ctrl+多选):
苹果
橙子
香蕉
西瓜
柠檬
香梨
10. 文本域标记及属性
文本域主要用于输入较长的文本信息。
代码格式如下:
默认文字
效果:
Cols属性:定义文本域的宽度 (列)
rows属性:定义文本域的高度 (行)
四、 HTML5新增表单控件
- HTML5文本框及placeholder属性
当文本框处于未输入状态并且未获取光标焦点时,模糊显示输入提示文字。
代码格式如下:效果如下:
- HTML5文本框类型tel
提供专门用于输入电话号码的文本框。它并不限定只输入数字,因为很多的电话号码
还包括其他字符(如+ 、-、(、)等),如86-0536-8888888
代码格式如下: pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式 -->电话号码:
电话号码:
效果如下: - HTML5 文本框类型 url 网址
url类型的input 元素提供用于输入url地址这类特殊文本的文本框.当提交表单时,如果所输入的内容是url地址格式的文本,则会提交数据到服务器,如果不是url地址格式的文本,则不允许提交.
代码如下:
效果如下:
4. HTML Email邮件
Email类型的input元素是一种专门用于输入e-mail地址在文本输入框,在提交表单时,会自动验证输入框的值.如果不是一个有效的e-mail地址,则该输入框不允许提交该表单.
代码如下:
<input type="email"/>
效果如下: 5. HTML5文本框类型number 数字 max最大值 min最小值 step步长 Number类型的input 元素提供用于输入数值的文本框.我们还可以设定对所接受数字的限制,包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内,则会出现错误提示。 代码如下: step(步长)属性值倍数 max最大值 min最小值 效果如下: 6. HTML5文本框类型date Date类型的日期检出器用于选取日、月、年,即选择一个具体的日期,如2016年3月4日,选择后会以2016-03-04的形式显示 代码如下: 效果如下: 7. 视频和音频 您的浏览器不支持Video标签。 8. Your browser does not support this audio format.
web day02 表格 表单及HTML常用的表单控件相关推荐
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(6)--添加控件到Flight Delay表单
准备:打开之前创建的Flight Delay表单.也可以下载Flight Delay Post exercise 1.xsn.右击模板文件,选择设计. 本练习,继续创建Flight Delay表单.添 ...
- 【jeecg-boot项目开发crm】:day07JeecgBoot-零基础入门视频-05Online表单自定义按钮与JS增强Popup控件Online报表【p5】
Online表单自定义按钮与JS增强&Popup控件&Online报表[p5] Online表单自定义按钮与JS增强 JS增强的作用 实现一些复杂的页面效果:页面的动态计算,页面字段的 ...
- c语言转义字符表解析,C语言常用转义字符表
<C语言常用转义字符表>由会员分享,可在线阅读,更多相关<C语言常用转义字符表(4页珍藏版)>请在人人文库网上搜索. 1.精选文库 C语言常用转义字符表 转义字符 含义 ASC ...
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(4)--控件属性功能区...
当处理控件时,可以设置许多属性.然而,基于控件类型,你可以设置的特定属性也在变化.幸运的是,当你在表单选中控件时,属性选项卡是活动的.在这儿你几乎可以设置特定控件的所有(属性)选项. 下面是你使用控件 ...
- oracle查看表的命令,Oracle常用查看表结构命令
获取表: select table_name from user_tables; //当前用户的表 select table_name from all_tables; //所有用户的表 select ...
- mysql常用表名大全_MySQL常用系统表大全
MySQL5.7 默认的模式有:information_schema, 具有 61个表: m ysqL, 具有31个表: performance_schema,具有87个表; sys, 具有1个表, ...
- 黑客攻防技术宝典Web实战篇第2版—第5章 避开客户端控件
5.1 通过客户端传送数据 5.1.1 隐藏表单字段 1.通过对表单中的数据隐藏,暗中更改数值,造成恶意攻击. 5.1.2 HTTP cookie 1.HTTPcookie是通过客户端传送数据的另一种 ...
- 我常用的delphi 第三方控件
有网友问我常用的控件及功能.我先大概整理一下,以后会在文章里面碰到时再仔细介绍. Devexpress VCL 这个基本上覆盖了系统界面及数据库展示的方方面面,是做桌面系统必备的一套控件,目前的版本是 ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面...
http://www.cnblogs.com/wuhuacong/p/3669575.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
最新文章
- 离不开深度学习的自动驾驶
- Oracle 11g服务端的安装和配置
- raptor五个数排序流程图_经典算法系列之:选择排序
- 『 天池竞赛』O2O优惠券使用预测思路总结
- 连接linux工具Mtr,Linux常用网络工具:路由扫描之mtr
- retrun, 集合操作的转化思想,while()回到指定位置的巧妙应用
- 视图查询缓慢mysql_《高性能MySQL》读书笔记——第一章、MySQL架构与历史
- 原生Hadoop集群搭建过程记录
- 安装Oracle问题总结
- 智能家居如何让消费者心甘情愿地买单
- 《集体智慧编程》笔记(一)
- SilverLight基础介绍以及用C#语言创建一个silverlight项目
- matlab中3乘4魔方阵,小代码3 魔方矩阵
- 面试题大全2-技能提升-项目部分-运维
- 不愧是我,一晚上教会了女神倒排索引
- ath9k usb wifi 网卡驱动浅析
- mysql索引填充因子_处理索引碎片,填充因子(FILLFACTOR)
- java隋唐系列游戏下载,隋唐爭霸V2.11游戏
- windows资源管理器对文件右键未响应!电脑小白求救[哭唧唧]!!!
- Java课程设计-图书借阅管理系统
热门文章
- 在win10用cmd复制远程服务器上的文件
- 安装PROTEUS--各种常见问题的解决方法 win10
- pandas 数据比对
- java mkfifo_pipe/popen/mkfifo
- linux shell fifo使用,bash – 在shell脚本中使用mkfifo
- 基于生成式对话的实时聊天机器人:实现实时聊天机器人与智能交互
- N的阶乘的长度(不使用Stirling公式)
- mysql中int长度的意义
- Android 9.0 10.0 沉浸式状态栏导致导航栏状态栏灰色蒙层的解决方案
- 包装世界杂志包装世界杂志社包装世界编辑部2023年第2期目录