首页 > 其他分享 >第三章 表格布局与表单交互

第三章 表格布局与表单交互

时间:2024-09-25 11:23:11浏览次数:10  
标签:第三章 表格 标记 边框 按钮 表单 属性

3.1 表格概述

3.1.1表格的结构

表格是由行和列组成的二维表,而每行又由一个或多个单元格组成,用于放置数据或其他内容

3.1.2 表格的基本语法

<table></table>//表格说明

<caption></caption>//表格标题标记

<th></th>//表格表头标记

 <tr></tr>//行

<td></td>//列

<table border="5"cellspacing="5px">
			<caption>23软件1班名单</caption>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>女</td>
			</tr>
			
		</table>

3.2 表格属性设置

3.2.1表格边框属性

边框属性说明边框属性说明
border表示表格边框粗细bordercolorlight表示表格亮边框颜色
bordercolor表示表格边框颜色bordercolordark表示表格暗边框颜色

3.2.2宽度和高度属性

通过设置width属性和height,属性可以设置表格的宽度和高度。

(1)width。其单位可以是长度单位或百分比,用于定义表格的宽度。

(2)height。其单位可以是长度单位或百分比,用于定义表格的高度。

3.2.3背景颜色和背景图象属性

设置表格的 bgcolor属性可以改变表格的背景颜色,设置表格的background属性可以为表格增添背景图像效果,使表格更加美观。

(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色

(2)background。设置背景图像,图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时,背景图像会部分或完全覆盖背景颜色

3.2.4边框样式属性

frame属性值说明rules属性值说明
above上边框all所有内部边框
below下边框none不显示内部边框
hsides上下边框rows行边框
vsides左右边框cols列边框
lhs左边框groups介于行列间边框
rhs右边框border上下,左右边框
void不显示边框

3.2.5单元格间距,单元格边距属性

设置表格标记中的 cellspacing属性可以改变表格单元格之间的间隔,使网页中的表格内容稍微松散一些。

1.cellspacing。值的单位为像素或百分比,默认值为2px。

2.celpadding。值的单位为像素或百分比

3.2.6表格水平对齐属性

通过设置align属性,设置表格对齐方式。

有三种方式:left,center,right

3.2.7 设置表格的(tr)标记行的属性

属性值说明属性说明
align行内容水平对齐bordercolor行的边框颜色
valign行内容垂直对齐bordercolorlight行的亮边框颜色
bgcolor行的背景颜色bordercolordark行的暗边框颜色

3.2.8格单元格跨行、跨列属性

1.单元格跨行:rowspan

语法:<td rowspan="行数"></td>

2. 单元格跨列:colspan

语法:<td colspan="列数"></td>

3.3 表单

3.3.1 表单标记

语法:<form name="" method="" action="" enctype=""></from>

<form name="form1" method="post"
		action=""enctype="text/plain"
		>
		用户名:<input type="text" name="user"/>	
		用户类型:<input type="text" name="usetype" value="普通用户"readonly />
		密码:<input type="password" name="password"/>

3.3.2 定义域和域标题

利用fieldset标记可以在网页上定义域,在表单中使用域可以将表单的相关元素进行分组,fieldset标记将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 fieldset 标记内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果或者可创建一个子表单来处理这些元素。legend 标记为 fieldset 标记定义域标题。

语法:
<form>
<fieldset>
<legend alig="left | center | right">域标题内容</legend>
</fieldset>
</form>

3.3.3 表单信息输入

1.单行文本输入框

设置input 标记的 type属性值为text,可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据,但是输人的数据只能单行显示,不能换行。

语法:<input name =" " type= " text" maxlength=" " size=" " value="" readonly/>

2.密码输入框

设置input 标记的type 属性值为password,可以实现向表单中插入一个密码输入框。

语法:<input name =" " type= " password" maxlength = " " size = " " />

3 .复选框

设置 iput 标记的 type属性值为 checkbox,可以实现向表单中插人一个复选框,用户利用复选框在网页上设置多项选择。

语法:
<input name = " "type =" checkbox" value=" " checked/>

4. 单选按钮

设置 input 标记的 type 属性值为 radio,可以实现向表单中插入一个单选按钮,用户可利用单选按钮在网页上为某一选择设置多个单选项。

语法:
<input name = " " type = " radio" value= " " checked/>

5. 图像按钮

可以实现向表单中插人一个图像按钮,用户设置 input 标记的 type 属性值为 image,利用图像按钮在网页中插入一张图像,通过src属性加载图像。

语法:<input name="" type="image" src=" " width=" " height=" "/>

6. 提交按钮

设置 input 标记的 type 属性值为 submit,可以实现向表单中插入一个提交按钮,提交按钮用于将表单的信息提交至服务器进行处理。

语法:
<input name=" " type=" submit" value=" 提交"/>

7. 重置按钮

设置 input标记的 type属性值为reset,可以实现向表单中插人一个重置按钮,重置按钢用于将表单中所有的输入信息清空,然后让用户可以重新填写。

语法:
<input name = " " type = " reset" value = " "/>

8 .普通按钮

设置input 标记的type属性值为 button,可以实现向表单中插人一个普通按钮。普通按钮在网页设计中非常有用,如果不通过表单提交按钮来处理事件,则可以给普通按钮绑定事件代码来实现所需的功能。

语法:
<input name=" " type=" button" value =" " onclick =" "/>

9. 文件选择框

设置 input 标记的type 属性值为file,可以实现向表单中插入一个文件选择框。

语法:
<input name=" " type = " fle" value=" "/>

10 .隐藏框

设置 input 标记的type 属性值为 hidden,可以实现向表单中插入一个隐藏框,用户表单时,隐藏框的信息也会一起提交到服务器,但隐藏框在网页中是不可见的。

语法:
<input name = " " type = " hidden" value = " "/>

3.3.4多行文本输入框

请输入你的宝贵意见
		<textarea name="info"rows="4"cols="50"></textarea>

3.3.5下拉列表框

请选择职业:
		<select>
			<option value="s1">前端</option>
			<option value="s2">后端</option>
			<option value="s3">运维</option>
		</select>

标签:第三章,表格,标记,边框,按钮,表单,属性
From: https://blog.csdn.net/2402_87184057/article/details/142367866

相关文章

  • 第3章 表格布局与表单交互
    3.1表格概述    表格是网页中的一个重要容器元素,可包含文字和图像。表格使网页结构紧凑整齐,使网页内容的显示一目了然。表格除了用来显示数据外,还用于搭建网页的结构。几乎所有HTML页面都或多或少地采用了表格。表格以简洁明了和高效快捷的方式将图片、文本、数据和......
  • 第3章 表格布局与表单交互
    3.1表格概述3.1.1表格的结构3.1.2表格的基本语法<!DOCTYPEhtml><html>   <head>      <metacharset="utf-8"/>      <title></title>   </head>   <body>   <tablealign="center"frame=&qu......
  • 多校园信息付费发布顶置自定义表单小程序开源版开发
    多校园信息付费发布顶置自定义表单小程序开源版开发为校园管理和互动提供了强大的支持,包括用户端和运营后台两大部分。用户端允许学生和教职工方便地访问各种功能模块,而运营后台则使管理员能够高效地管理和配置系统。产品支持自定义模块和表单,允许根据需求创建各种功能,例如表白墙、......
  • 第三章 表格布局与表单交互
    3.1表格概述:表格是网页中的一个重要容器元素,可包含文字和图像。表格使网页结构紧凑整齐,使网页内容的显示一目了然。表格除了用来显示数据外,还用于搭建网页的结构。几乎所有HTML页面都或多或少地采用了表格。表格以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素......
  • UIOTOS示例:自定义弹窗输出表单数据 | 前端低代码 前端零代码 web组态 无代码 amis gov
    目标对话框作为容器组件,可以隐藏掉默认的窗体头和脚,完全由内嵌页自定义,参见对话框自定义外观。并且也能获取弹窗纯表单数据,如下所示: 步骤内嵌页1.新建略。2.拖放组件拖放三个输入框,标识分别施志伟id、name、phone;两个按钮标识分别设置为cancel和ok 主页面1.新......
  • 快速循环切换Excel表格数据筛选器
    工作表中数据如下图所示。现在需要添加按钮,实现C列的循环筛选,如下图所示。如果当前表格未启用筛选功能,则首次筛选值为KB-L。示例代码如下。SubCycleFilter()DimaCrit,iAsLong,oTabAsListObject,iColAsLongDimsCritAsStringConstKEYS="......
  • 好用的js表格组件tabulator使用
    偶然中看到了这个功能强大的表格组件,不仅支持分页、过滤、排序、树形表格等常见的功能,且支持分组显示、表格内编辑、统计计算、读本地文件、拖拽表格改变行列顺序、下载、像在excel文件中操作一样的编辑等多种功能。常用配置项及表格实例化查看代码<linkhref="../plugins/tab......
  • c++实现链表单双环链表
    数据结构链表1.链表实质上是一个结构体,包含数据域和指针域,这两个实际上都是一个变量而已,只不过数据域存放的是节点的数据,指针域存放的是下一个节点的地址2.我们新建一个链表节点的时候通常采取的语句类似于NumList*head=(NumList*)malloc(sizeof(NumList)),要注意,......
  • 第3章 表格布局与表单交互
    3.1表格概述在HTML中,表格是用来展示数据的一种有效方式,特别是当数据是结构化的,比如行和列的形式时。表格由 <table> 标签定义,并通过一系列的行 <tr>、单元格 <td>(tabledata)以及表头 <th>(tableheader)来构建。3.1.1表格的结构一个基本的 HTML表格由以下几个部分......
  • JavaWeb -Servlet对表单数据的处理 例:登录系统
    一、创建html文件并添加框架内容<tr></tr>是表格标签<td></td>是单元格标签1.添加用户名和密码<inputtype="text"name="username">文本格式(text),函数名是username。<inputtype="password"name="password">密码格式(password),函数名......