HTML网页设计:二、表单、表格
一、表单
表单的作用:用于搜集用户信息,常用在用户的登录注册界面。
<form method=“get或者post” action=“向何处发送表单数据”>
1、属性 :type 定义输入框的类型
- 文本框 type="text“
- 密码框 type=“password“
- 提交框 type=“ submit“ 和 <button>提交按钮</button> 一样
- 按钮框 type=“button“ 单纯的按钮
- 重置框 type=“reset”清空的效果
2、 属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
3、属性 name 必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器
4、属性 value初始值
5、属性src设置图片按钮的路径
6、按钮的区别:
普通按钮只是单纯的点击作用,提交按钮可以提交页面的内容,提交按钮有默认的value值。重置按钮起到清空内容的作用,图片按钮与提交按钮的作用一致,但是多了两个参数(为点击图片的位置)。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="https://ssl.zc.qq.com/v3/index-chs.html"><input type="text" placeholder="昵称"><br><input type="text" placeholder="密码"><br><input type="text" placeholder="手机号码"><br><input type="submit" value="立即注册"><input type="reset" value="重置"><input type="image" src="../img/08.png"></form>
</body>
</html>
二、表格
1、表格的相关属性:
宽度width、高度heigth、边框 border、边框颜色 bordercolor、背景颜色 bgcolor;
文字水平对齐 align=“left或right或center”、文字垂直对齐 valign=“top或middle或bottom";
cellspacing="单元格与单元格之间的间距“ 必须给table、cellpadding="单元格与内容之间的空隙" 必须给table;
合并单元格属性 colspan=“所要合并的单元格的列数”合并列;必须给td, rowspan=“所要合并单元格的行数”合并行; 必须给td,合并之后需要把多余的单元格删除。
2、表格相关的CSS属性
个数 | 用法 | 意义 | 说明 |
---|---|---|---|
1 | border-spacing:20px | 单元格间距 | 单元格间距(该属性必须给table添加) 表示单元格边框之间的距离, 不可取负值 |
2 | border-collapse:separate/collapse | 合并相邻单元格边框 | 合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值; collapse(边框合并) |
3 | empty-cells:show/hide | 无内容时单元格的设置 | 定义当单元格无内容时,是否显示该单元格的边框区域;show:显示 ;hide:隐藏; |
4 | table-layout:auto/fixed; | 是否固定单元格的宽度 | fixed:固定宽,没有定义时则宽度会平均分配,高度则会随内容变化 |
5 | caption-side:top/right/bottom/left | 表格标题位置 | left,right位置只有火狐识别,top,bottom IE7上版本支持,ie7以下版本不支持其它属性值,只识别top |
3、表格相关的HTML标签和属性
个数 | 用法 | 说明 | |
---|---|---|---|
1 | 表格标题 | <caption>标题内容</caption> | |
2 | 表格列分组 |
A、<colgroup span="数字"></colgroup> B、<col span="数字" /> C、如果用rules添加组分割线的话,列分组必须用colgroup |
A、col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组 B、span属性显示指定相邻几列组成一组,span属性值默认为1 |
3 | 表格行分组 |
A、<thead></thead> 表头 B、<tbody></tbody> 表体 C、<tfoot></tfoot> 表尾 |
|
4 | 添加组分隔线 | rules="groups/rows/cols/all/none" | 必须给table标签添加属性 |
4、例题
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>项目增补单</title><style>table,th,td {border-collapse: collapse;/* 合并相邻单元格边框 */}caption{font-size: 28px;margin-bottom: 10px;}div{width: 700px;margin: 0 auto;/* background-color: green; *//* text-align: center; */}span{margin-left: 0px;margin-right: 98px;}</style>
</head>
<body><table border="1px" align="center"><caption>项目增补单</caption><!-- <thead><tr align="center"><th colspan="11">项目增补单</th></tr></thead> --><tbody><tr align="center"><td width="60px">工单号</td><td width="60px"></td><td width="90px">车牌号</td><td colspan="2" width="90px"></td><td width="40px">车型</td><td width="60px"></td><td width="50px">技师</td><td width="60px"></td><td width="90px">检修时间</td><td width="120px"></td></tr><tr align="center"><td>序号</td><td colspan="3">维修项目及更换配件</td><td width="60px">单价</td><td>数量</td><td>小计</td><td>工时费</td><td>合计</td><td colspan="2">故障原因</td></tr><tr align="center"><td>1</td><td colspan="3"></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td></tr><tr align="center"><td>5</td><td colspan="3"></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td></tr><tr align="center"><td>6</td><td colspan="3"></td><td></td><td></td><td></td><td></td><td></td><td colspan="2"></td></tr><tr><td colspan="4">备件费用小计:</td><td colspan="5">工时费用小计:</td><td colspan="2">合计:</td></tr></tbody><tfoot></tfoot></table><div><span>班组长:</span><span>技术部:</span><span>服务顾问:</span><span>客户确认:</span></div>
</body></html>
HTML网页设计:二、表单、表格相关推荐
- html表单输入的文本框的值,网页设计关于表单输入框的技巧代码
虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧. 1.使用, 2018-04-14 网页表格表框制作技巧. ---------------- ...
- CSS网页设计教程:表单Button的Outl…
outline的使用,大家都喜欢在reset样式表中直接重置: * { outline: none; } Eric Meyers在他的CSS Reset是这样重置的: :focus { outline ...
- html5漂亮的登录与注册界面设计,漂亮的网页登陆/注册表单设计
漂亮的网页登陆/注册表单设计 7月 4, 2012 评论 Sponsor 网页设计中登陆和注册表单是非常常用的,而且使用率也非常高,一个表单的设计其实也不是简单的事情,你要考虑很多用户体验,有的喜欢把 ...
- antd 动态添加表单_ZooTeam 拍了拍你,来看看如何设计动态化表单
? 这是第 58篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队关注我们吧- 本文首发于政采云前端团队博客:ZooTeam 拍了拍你,来看看如何设计动态化表单 https://www.z ...
- 用HTML制作表单表格能学到什么,Html学习之十七(表格与表单学习--排行版制作)...
表格与表单01 table{ width: 300px; height: 40px; margin: 100px auto; border-collapse: collapse; } .th2{ fl ...
- html表单对于网页目地,html - 表单form
一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...
- 电子表单设计,表单打印,表单填写,数据发布,VC++,VB,源代码组件库
电子表单设计,表单打印,表单填写,数据发布,VC++,VB,源代码组件库 -- 为您提供即刻可以拿来使用的源码级电子表单解决方案! E-Form++可视化组件库企业版本电子表单解决方案在E-Form+ ...
- 前端_网页编程 Form表单与模板引擎(上)
目录 一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...
- 分步表单_表单设计-掌握表单设计方法(表单体验篇)
全篇阅读大概需要15min,对表单设计不熟悉的同学看完后肯定会有不少的收获~~~ 说到表单其实在生活中可以接触到各种各样的表单,比如:驾照申请表.体检表.银行开户需要填写的表等等,这些都是表单,主要目 ...
- 网页制作表单代码java_JSP动态网页入门:表单输入例子
我们将创建一个web页面,它有一个输入表单,用户可以输入一个股票代号以获得出当前股票价格(有20分钟延迟).如果输入有误,则显示错误提示页面. quote.jsp 首先,用以下代码创建quote.js ...
最新文章
- 一文回顾2018英特尔人工智能大会
- 谁在引领中国制造?中国智能制造发展解析
- 译 | .NET Core 3.0 对诊断的改进
- zemax评价函数编辑器_ZEMAX软件使用入门
- linux man使用方法 和centos安装中文man包
- PHP开源旅游网站程序,PHP开源旅游网站源码下载
- 再遇soundmix.dll,小试pe_xscan
- 计算机系统基础lab2(二进制炸弹实验)
- addEventListener兼容性问题
- STAR法则的理解及事例
- 数字化运营管控是如何提升管理透明及效率的!
- php----拷贝兔源代码分析dl函数和getdata函数
- 用python搭建一个服务器
- 身份证扫描器web开发_如何以Web开发人员的身份建立一个令人惊叹的投资组合网站
- DRL:强化学习-Q-Learning算法
- 插曲一下:很多程序员会遇到的脱发问题
- 【Unity技术积累】模拟FPS射击功能 射线检测
- 不仅仅是更小的成人大脑——通过新生儿大脑成像了解后期的神经发育情况
- Pytorch模型训练实用教程学习笔记:四、优化器与学习率调整
- (转)Bnd 工具使用
热门文章
- 主板jrgb是什么_问答:现在的PC主机中有哪些配件支持RGB灯效?
- SSM+MySQL实现软件管理系统(含源码、MySQL、文档,包运行)
- YOLOv5 完美实现中文标签显示
- docker安装gamit_gamit的安装步骤
- android 手机内存清理,教你彻底清理手机内存的最佳方法,只需一招
- MyBioSource p53 肿瘤抑制蛋白 (TP53),多克隆抗体
- C语言旅途之用for循环与break求最大素数(质数)
- 如何出版一本技术类书籍
- 图片中加入超链接html代码,html网页超链接代码 怎样用HTML代码在图片插入超链接...
- halo输入QQ号获取QQ头像和名称