表格

table的属性

border 边框若border="1",有边框；
cellspacing 单元格与单元格之间的距离若cellspacing="0",单元格与单元格无距离，即单元框之间无缝隙；
cellspacing 内容与单元格四周的距离
bordercolor 边框颜色
bgcolor 背景颜色
align 水平对齐方式 align="left",左对齐； align="center",居中对齐； align="right",右对齐；
valign 垂直对齐方式 valign="top",上对齐； valign="bottom",下对齐; valign="middle", 居中对齐； valign="baseline", 与基线对齐
rules 规定哪个部分可见 rules="none",无边框；rows,位于行之间的线条可见；cols,位于列之间的线条可见； all,位于行和列之间的线条可见

表格的合并

1、左右合并单元格，即合并列，使用colspan；

2、上下合并单元格，即合并行，使用cowspan;

表单

什么是表单？

采集用户输入的数据，把数据提交给服务器

表单有什么组成？

表单是由表单标签、表单域以及表单按钮组成。

表单标签包含处理表单数据所用程序的URL以及数据提交到服务器的方法。
表单域包含了文本框、密码框、隐藏域、多行文本框、复选框等。
表单按钮包括提交按钮、复位按钮和一般按钮；

表单标签＜form＞＜/form＞

action表示行为、动作，以及数据提交的路径

mothod表示方法、方式以及数据提交的方式

表单域对象 表单域包含了文本框、多行文本框、密码框等，用于采集用户输入或选择的数据

input 标签

该标签可以在表单中定义单行文本框、单选按钮、复选框等表单元素。其基本语法如下：

<input name=" " type=" " />

input 标签常用的属性如下所示：

其中type属性的各常用类型如下图所示：

示例代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="0" cellspacing="0"><tr><td><img src="data:images/baidu.png" alt="百度" width="50"></td><td><small>用户名密码登录</small><br></td></tr></table><form action=""><input type="text" name="username" placeholder="手机/邮箱/用户名"><br><input type="password" name="userpassword" placeholder="密码"><br><br><input type="submit" value="登录" style="width:10.625rem;color:white;background-color: blue;"></form><a href="#"><small>忘记密码?</small></a><br><br><a href="#">扫码登录</a>&emsp;| <a href="#"><img src="data:images/qq.jpg" alt="qq" width="10"></a><a href="#"><img src="data:images/wechat.jpg" alt="weixin" width="10"></a>&emsp;<a href="#">立即注册</a></body>
</html>

运行结果如下：

输入类型：radio

<input type="radio">定义单选按钮

name属性确保只能同时选中一个。若不设置name或者name不相同，那么起不到单选的作用。

单选按钮允许用户在有限数量的选项中任选其中之一：

<form><input type="radio" name="ball" value="football" checked>足球   <!-- checked属性用于定义一开始选中哪个按钮 --><br /><input type="radio" name="ball" value="basketball">篮球</form>

运行结果：

输入类型：checkbox

复选框允许从一个选项列表中选择多个选项。在input标记中设置type属性值为checkbox。在定义选项时，要注意如果name值一样的话，用户所有选项会组合为一个数据进行提交。

<form>选择球类<br /><br /><input type="checkbox" name="checkball" value="football" />足球<br /><input type="checkbox" name=" checkball " value="basketball" />篮球<br /><input type="checkbox" name=" checkball " value="pingpang" />乒乓球<br /><input type="checkbox" name=" checkball " value="volleyball" />排球<br /></form>

运行结果如下：

表格的属性、表格的合并及表单相关推荐

CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
method属性值为get提交表单信息，为什么在地址栏不会显示呢。
method属性值为get提交表单信息,为什么在地址栏不会显示呢. <!DOCTYPE html> <html lang="en"> <head> ...
vb整合多个excel表格到一张_VB合并工作表下载
VB合并工作表最新版是一款功能强大且界面简洁美观的excel表格合并工具,VB合并工作表最新版操作简便且易上手可以运行稳定,能够为大家解决合成打开卡顿等问题,实现多薄多表合并,VB合并工作 ...
itextpdf添加表格元素_使用iText填充pdf表单
最近项目中用到了下载pdf回单的功能.需要把内容动态的填入pdf并打印,觉得这个功能挺实用的,所以决定用博客记录一下方便以后使用. 一.首先我们需要安装Adoble Acrobat XI Pro,因为 ...
html语言中表格由什么组成,HTML中一个表单由什么组成
在HTML中,一个完整的表单通常由表单元素(也称为表单控件).提示信息和表单域3个部分构成.表单元素包含了具体的表单功能项,如单行文本输入框.密码输入框.复选框.提交按钮.重置按钮等:表单域相当于一个 ...
html表单的常用属性有哪些,html/form表单常用属性认识
1.form表单常用属性练习 .form1 { margin: auto; height: 900px; width: 500px; text-align: center; line-height: ...
html表格添加选项代码,使用实例演示表单中的选项卡功能在里面添加table id=bootstrap-table/table后不显示表格...
.time-input{ display: inline; } .add-right{ float: right; font-size: 20px; border: 1px solid #111111 ...
表格练习（工商银行电子汇款单）表单练习（用户注册）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UT ...
零基础前端笔记（2）html，表格，列表，标签，文本域，表单域
XHTML可扩展超文本标记语言(2) (1)创建表格 (2)表格属性表头单元格标签th 表格标题caption 小说排行榜 (3)合并单元格 (4)划分表格结构 (5)列表标签无序列表有序列表 ...

表格的属性、表格的合并及表单

表格

table的属性

表格的合并

表单

什么是表单？

表单有什么组成？

表单标签＜form＞＜/form＞

表格的属性、表格的合并及表单相关推荐

最新文章

热门文章

表格的属性、表格的合并及表单

表格

table的属性

表格的合并

表单

什么是表单？

表单有什么组成？

表单标签 ＜form＞＜/form＞

表格的属性、表格的合并及表单相关推荐

最新文章

热门文章

表单标签＜form＞＜/form＞