精华内容
下载资源
问答
  • web表格制作--11.27

    2020-11-27 16:54:37
    注意: <!... <... <head>...meta charset="UTF-8">... (以下出现的代码位置应放在此处) </body> </html> 创建表格: 1.第一步 <table> </table>这是创建一块表格 (边框未设

    注意:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>text</title>
    </head>
    <body>
    	
    	(为观看方便)
    	(以下出现的代码位置应放在此处)
    	
    </body>
    </html>
    

    创建表格

    1.
    在这里插入图片描述

    <table> </table>这是创建一块表格 (边框未设置)
    <table border=1> </table> 其中 border 为边框设置
    <tr> </tr>这是创建表格中的一行
    <td> </td>这是创建行中的一个格

    	<table border=1> 
    	
    	<tr>
    		<td>第一行 第一个格</td>
    		<td>第一行 第二个格</td>
    	</tr>
    	<tr>
    		<td>第一行 第一个格</td>
    		<td>第一行 第二个格</td>
    	<tr>
    	
    	</table>
    

    2.

    <td colspan=2> </td> 指这一块占据两个格的位置

    	<table border=1> 
    	
    	<tr>
    		<td>第一行 第一个格</td>
    		<td>第一行 第二个格</td>
    	</tr>
    	<tr>
    		<td colspan=2>第二行 第一个格</td>	
    	<tr>
    	
    	</table>
    

    3.

    <td rowspan=2> </td> 指这一块占两行

    	<table border=1> 
    	
    	<tr>
    		<td rowspan=2>第一行 第一个格</td>
    		<td>第一行 第二个格</td>
    	</tr>
    	<tr>
    		<td>第二行 第一个格</td>
    		<td>第二行 第二个格</td>
    	<tr>
    	
    	</table>
    
    展开全文
  • 截图是增加数据的web层,看画框的位置,需要跳转到什么地方,我的想法是跳转到显示全部表格的jsp页面,难道不是这样么?还是跳转到service层?? ![图片说明]...
  • 最近一直被网页表格元素定位的问题困扰。今天下午终于尝试到了成功的方法,在此分享记录。 #定位主页 main_xpath = '//main[@class="el-main main"]' locater = self.driver.find_element_by_xpath(main_xpath)...

    前言

    最近一直被网页表格元素定位的问题困扰。今天下午终于尝试到了成功的方法,在此分享记录。

     #定位主页
     		main_xpath = '//main[@class="el-main main"]'
            locater = self.driver.find_element_by_xpath(main_xpath)
            time.sleep(1)
            #读取表内容,第一个功放值
            cssStr1 = 'main > div > div.el-tabs__content > div.box-card > div.el-table.el-table--fit.el-table--border.el-table--scrollable-x.el-table--enable-row-hover.el-table--enable-row-transition.el-table--mini > div.el-table__body-wrapper.is-scrolling-left > table > tbody > tr:nth-child(1) > td.el-table_1_column_9 > div > div > span'
            val = locater.find_element_by_css_selector(cssStr1).text
            print(val)
    

    说明

    这个方法是使用相对定位的方式。
    先定位一个表格整体框的到返回对象,再通过这个对象定位表格内部元素。
    但是,这个方法并不是所有的内嵌表格都有效
    如果是内嵌html表格这种估计是不行的,需要通过切换frame的方式。(百度知道的)

    说明2

    估计是前端框架的问题,网上看了很多方式都无法定位公司自己研发的web前端页面表格元素。
    对比后发现,我公司的前端不是使用网上说的iframe等方式。当我使用切换frame时,报错说不存在的frame
    但是又无法通过xpath方式一步定位得到数据
    最后尝试成功的只有二次定位方才成功。但是貌似有不是百分百成功。
    这个问题的原因我是真的无法知晓,希望知识渊博的人可以指点一二,在此提前致谢【ღ( ´・ᴗ・` )比心】

    展开全文
  • Web表格应用系统开发套件

    千次阅读 2005-07-19 11:00:00
    一、利用Cell设计Web表格应用系统开发套件Cell毕竟还是一个表格组件,只能用单元格位置标示数据,没有数据模型和数据绑定概念,离真正的应用开发还有段距离,我们可以利用Cell设计一套Web表格应用系统开发套件,以下...

    一、利用Cell设计Web表格应用系统开发套件

    Cell毕竟还是一个表格组件,只能用单元格位置标示数据,没有数据模型和数据绑定概念,离真正的应用开发还有段距离,我们可以利用Cell设计一套Web表格应用系统开发套件,以下简称Reports套件。该套件分三个相对独立的部分:Reports模板设计工具、Reports浏览器端API,Reports服务器端API

    1、Reports模板设计工具,是一个独立运行的桌面程序,用于设计表格格式和定义数据模型,完成表格单元格与数据项绑定,设计结果存储在一个独立的Reports模板文件,该文件可以被Reports浏览器端API与Reports服务器端API利用来显示表格格式和处理数据模型。根据实际开发需要,Reports模板分三种类型:单记录表、多记录表和主-细表。单记录表用于一次显示和编制一条记录数据,多记录表用于一次显示和编辑多条记录,主-细表用于一次显示和编辑一条主记录和多条明细记录。在模板设计时,可以充分利用Cell强大的格式定义功能,实现HTML元素无法实现的功能。

    2、Reports浏览器端API是一套VBScript脚本库(也可以用于vb),它为开发人员在浏览器上实现表格数据处理提供了一套通用接口函数,它以Cellweb为容器,以Reports模板文件为资源,能够实现数据装入、数据采集、数据显示、合法性检查、表格打印和打印预览等功能。开发者只需要调用几个函数就实现如上功能,不需要考虑单元格数据装入、提取、锁定、格式控制等复杂操作,甚至不需要了解Cell提供的上百个函数。

    3、Reports服务器端API是一套面向Java的类库(也可以提供针对c#、asp的类库),它由几个Reports模型类和工具类组成,用于解析和处理与Reports模板文件相对应的Reports数据。浏览器端以xml串方式作为一个整体提交表格数据,服务器端程序利用Reports模型类接收表格数据,调用者可以灵活地读取Reports模型类中的数据项值。数据接收后,往往要存储到数据库中,利用Reports工具类可以实现自动存储,不需要写任何sql语句,同样道理,Reports数据与数据库之间的存储、提取、查询、删除等操作,都可以利用工具类完成,不需要开发者写数据库访问程序,而且,在大多数情况下,开发者没有必要再写实体模型类,利用Reports数据模型类就可以了,这样可大大提高编程效率。

    三个独立组件分别运行在不同环境下,实现不同的功能,它们之间的联系纽带是Reports模板文件和Reports数据模型,模型文件用xml封装,具备非常好的扩展性。

     

    二、Reports套件应用实例说明

    有了Reports套件,开发一个普通的Web表格应用管理系统将变得非常容易。我们就以用java开发一个“客户购物登记表管理”为例,简述利用Reports套件的开发过程。本模块主要功能是帮助用户管理公司客户基本信息及其购物记录。客户基本信息有客户编号、客户名称、登记日期、代理商编号、客户地址、联系电话、客户照片等,购物记录的基本属性有产品编号、产品名称、购买数量、金额等。用户要求能同时编辑客户基本信息和客户购物记录。以下为开发步骤:

     

    1、第一步:设计Reports模板文件

    1)利用Reports模板设计工具新建表格文件,类型选用主-细表,定义表格编号和名称,工具首先生成一个空白表格,设计者可以设计表格样式,操作方式类似Excel

    2)定义数据模型,因为该表是主-细表结构,所以需要定义主数据项和明细数据项,数据项类型支持文本、数值、整数、日期、图片、超连接类型,然后把数据项绑定到对应的单元格中,有数据项绑定的单元格是页面程序运行时用于输入和显示数据的单元格;

    3)生成建立数据库表使用的sql语句,在数据库中建立对应数据库表。

    4)存储表格模型文件。

     

    2、第二步:设计前端jsp页面

    我们需要设计两个jsp文件,一个用于新增客户(AddCustomer.jsp),另一个用于编辑已存在客户(EditCustomer.jsp),因为大多数界面元素都已经在Reports模板中定义,jsp文件中的代码非常简单,大多数代码都是标准代码。下面把jsp文件中的几个关键代码片断进行说明。

    1)用xml数据岛指定Reports模板文件和数据文件,这些数据都可以由服务器端动态生成。

    2)引入Reports浏览器端API脚本库

    3)在窗口初始化函数中,装入表格模板和数据,在装入数据后,可以根据需要进行一些设置,例如当编辑记录时,需要设置编码数据项为只读。

    以上是利用Reports浏览器端API设计前端页面时用到的主要代码片断,在开发其他页面时,除了xml数据岛的src内容不同外,其他基本不变。

     

    3、第三步:设计后台处理程序

    这里用一个java servlet说明实现过程,在servlet中处理来自前端的请求。

    接收并存储新增的客户登记数据
     为了使用
    Reports Java API,必须引入com.anyinfo.rport包。

    2)接收并存储修改过的客户登记数据

    以上示例运行效果见http://218.247.244.164:5000/reporttest/CustomerList.jsp

    这里仅对Reports套件的最基本功能进行了示例说明,还有一些强大、实用的功能在此不再详述,Reports套件已经过多套企业级应用系统的实践,在改进中不断走向成熟。下面是一些典型应用的截图(在IE中运行效果)。

    四、结论

    总之,利用Cell插件和Reports套件开发Web表格应用系统(也支持用VB开发的桌面系统),使程序设计和界面设计相独立,界面格式甚至数据模型的改变不需要更改程序,而且可以实现复杂的界面控制,必将大大提高软件开发效率和提高用户界面友好性。经过多个项目和用户实践证明,一般可减少30%-60%的开发工作量。

    欢迎大家进行技术交流和合作!

    展开全文
  • WEB入门二 表格和表单

    千次阅读 2017-02-14 13:57:51
    学习内容Ø 表格的作用和制作Ø 表单的制作能力目标Ø 掌握表格的创建Ø 掌握设置表格的常用属性;Ø 理解表单的作用Ø 熟练...而且,表格还可以用于固定文本或图像的显示位置。经常上网的用户会发现表格被大量

    学习内容

    Ø        表格的作用和制作

    Ø        表单的制作


    能力目标

    Ø        掌握表格的创建

    Ø        掌握设置表格的常用属性;

    Ø        理解表单的作用

    Ø        熟练掌握表单常用元素

    本章简介

    表格对于网页制作而言极其重要,其最明显的优点是能够以行列整齐的形式来显示文本、数字、图片信息。而且,表格还可以用于固定文本或图像的显示位置。经常上网的用户会发现表格被大量网站广泛应用,例如新闻列表、商品显示等。

    除此之外,网站中经常有很多页面的信息需要填写并提交给服务器,例如论坛注册时需填写注册信息、登陆时需提交登陆用户名和密码等。这种由用户填写并提交给服务器的页面元素称为表单,表单在页面设计中主要用于收集和提交客户端的信息,完成客户端与服务器的交互。

    本章将学习如何在页面中创建一个表格以及表格的基本操作,例如合并单元格、使用背景图像美化表格、创建表单以及表单元素的基本用法。最后,通过举例讲解表格与表单的综合应用。

    核心技能部分

    1.1       表格基础

    表格对于网页制作而言极其重要,其最明显的优点是能够以行列整齐的形式来显示文本、数字、图片信息。而且,表格还可以用于固定文本或图像的显示位置。

    1.1.1             表格的基本结构

    先让我们来看一看表格的最基本的结构。表格是由指定数目的行和列组成,如图2.1.1所示。文字或图片按照相应的列或行进行分类和显示。

    图2.1.1 基本表格结构

    在HTML中,用于创建表格的基本标签如下:

    1.        <table>

    <table>…</table>标签用于在HTML中创建表格,它包含表名和表格本身内

    容的代码。表格里面包含行,行中包含单元格。

    2.        <tr>

    <tr>…</tr>标签用于在表格中定义行,要嵌套在<table>标签中使用。多个行结合在一起就构成一个表格。表格的每一行都用<tr>标签表示,并用相应的</tr>标签结束

    3.        <td>

    表格的每一行又有若干表格单元格,用<td>. . . </td>标签定义。td是“表格数据( TableData )”的英文缩写。<td>标签定义一个列,嵌套于<tr>标签内。border属性是最常用的属性,该属性指定边框的厚度,如果其值设置为零(0),则不显示边框。

    4.        用于创建表格的其他标签

    (1)     <caption>

    <caption>标签用于定义表格的标题。该标签必须紧随<table>标签之后,且每个表格只能定义一个标题。通常将标题置于表格之上的居中位置。

    (2)     <th>

    <th>标签用于定义表格内的表头单元格,其显示的文字效果通常采用粗体居中。大多数表格都包含一行或一列表头,用于说明某一列或一行数据的属性类别,此时可以使用<th>标签来设置。<th>标签必须嵌套在<tr>标签内。

    1.1.2             创建表格

    所有的表格都包括3个基本标签,即表格标签<table>…</table>、行标签<tr>...</tr>和单元格标签<td>...</td>。可以说,在页面中如果要创建一个完整的表格,至少要包含这3对标签。

    创建表格语法:

    <table>

        <tr>

            <td>单元格</td>

        </tr>

    </table>

    创建表格时,一般情况下分3步:

    第一步:创建表格标签<table>…</table>。

    第二步:在表格标签<table>…</table>里创建行标签<tr>...</tr>,可以有多行。

    第三步:在行标签<tr>...</tr>里创建单元格标签<td></td>,可以有多个单元格。

    如示例2.1所示为在页面中添加一个2行3列的表格的代码。

    示例2.1

    <html>

    <head>

    <title>创建表格</title>

    </head>

    <body>

        <table border="1">

            <tr>

                <td>第一行单元格1</td><td>第一行单元格2</td><td>第一行单元格3</td>

            </tr>

            <tr>

                <td>第二行单元格1</td><td>第二行单元格2</td><td>第二行单元格3</td>

            </tr>

        </table>

    </body>

    </html>

    示例2.1的运行结果如图2.1.2所示。

    图2.1.2 创建表格

    1.1.3             表格的属性

    1.        用于设置表格的尺寸和边框的属性

    如果不指定表格的高度和宽度,浏览器就会根据表格里的内容自动调整高度和宽度。如果不指定表格边框的宽度((border属性),则浏览器将不显示表格边框。若我们既想设置表格的高度和宽度,又想设置表格边框的宽度,那么就得设置表格的高度、宽度和边框属性。

    语法:

    <table  width=”表格宽度” height=”表格高度” border=”表格边框宽度”></table>

    其中,表格的宽度和高度可以用像素来表示,也可以用百分比(与浏览器当前窗口相比的大小比例)来表示。表格边框宽度只能用像素来表示。例如:<table width="200" height=" 100">表示一个宽为200像素,高为100像素的表格。<table width=“50%” height=“25%”>表示一个宽为当前浏览器窗口宽度的50%,高为当前浏览器窗口高度的25%的表格。

    示例2.2

    <html>

    <head>

    <title>表格的尺寸和边框</title>

    </head>

    <body>

        <table border="10" width="400" height="200">

            <tr>

                <td>第一行单元格1</td><td>第一行单元格2</td><td>第一行单元格3</td>

            </tr>

            <tr>

                <td>第二行单元格1</td><td>第二行单元格2</td><td>第二行单元格3</td>

            </tr>

        </table>

    </body>

    </html>

    示例2.2运行结果如图2.1.3所示。

    图2.1.3 表格的尺寸和边框

     

    2.        设置表格背景属性

    (1)      整个表格背景

    表格背景包括表格的背景颜色和背景图像的设置,表格的背景颜色属性bgcolor是针对整个表格的,表格的背景图像属性background也是针对整个表格的,背景图像会令表格更加美观、更加活泼生动。

    (2)      表格单行背景

    不仅可以对表格整体设置背景,还可以对单独一行设置背景色,行的bgcolor颜色可以覆盖<table>的bgcolor或background属性。

    (3)      单元格背景

    不仅可以对表格中行设置背景色,还可以对表格中每一个单元格设置背景色或背景图片,单元格的bgcolor颜色可以覆盖行的bgcolor属性。

    示例2.3

    <html>

    <head>

    <title>表格的尺寸和边框</title>

    </head>

    <body>

        <table border="2" width="400" height="150" background="bg1.gif">

            <tr bgcolor="#eeeeee">

                <td>第一行单元格1</td><td>第一行单元格2</td><td>第一行单元格3</td>

            </tr>

            <tr>

                <td>第二行单元格1</td><td>第二行单元格2</td><td>第二行单元格3</td>

            </tr>

            <tr>

                <td>第三行单元格1</td><td>第三行单元格2</td><td background="bg2.gif">第三行单元格3</td>

            </tr>

        </table>

    </body>

    </html>

    示例2.3的运行结果如图2.1.4所示。

    图2.1.4 表格背景

    3.        设置对齐方式属性

    为了美观大方,表格中的数据一般需要设置对齐方式。

    设置表格、行或列的对齐方式,修改align属性为right(右对齐)、center(居中),left(左对齐)就可以了,默认为“左对齐”。

    示例2.4

    <html>

    <head>

    <title>表格的对齐方式</title>

    </head>

    <body>

        <table border="2" width="600" height="150" background="bg1.gif">

            <tr bgcolor="#eeeeee" align="center">

                <td>第一行单元格1</td><td>第一行单元格2</td><td>第一行单元格3</td>

            </tr>

            <tr>

                <td>第二行单元格1</td><td>第二行单元格2</td><td>第二行单元格3</td>

            </tr>

            <tr>

                <td>第三行单元格1</td><td>第三行单元格2</td><td>第三行单元格3</td>

            </tr>

        </table>

    </body>

    </html>

    示例2.4运行结果如图2.1.5所示。

    图2.1.5 表格的对齐方式

    一般情况下数字是右对齐,性别居中对齐,姓名等内容左对齐。

    1.1.4             跨多行和多列的表格

    大部分情况下表格都不是整齐划一的,例如:学生信息表,第一行是表格的标题,这就需要标题横跨学生信息表的所有列;还有一种情况是需要跨行的,跨列表格如图2.1.6所示。

    图2.1.6 跨列表格

    1.        跨行和跨列表格的概念

    有时可能要将多行或多列合并成一个单元格,即可以创建跨多列的行,或创建跨多行的列。colspan属性用于创建跨多列的单元格,rowspan属性用于创建跨多行的单元格。

    2.        跨多列的表格

    跨多列指的是在水平方向上跨多个单元格,通过设置colspan这个属性来实现的。

    示例2.5

    <html>

    <head>

    <title>跨行和跨列的表格</title>

    </head>

    <body>

        <table border="1" width="400">

            <tr>

                <td colspan="3">联系人薄</td>

            </tr>

            <tr align="center" bgcolor="#00eeee">

                <td>姓名</td><td colspan="2">电话</td>

            </tr>

            <tr>

                <td>张三</td><td>13512345678</td><td>68788898</td>

            </tr>

            <tr>

                <td>李四</td><td>13888888888</td><td>66666666</td>

            </tr>

        </table>

    </body>

    </html>

    示例2.5运行结果如图2.1.7所示。

    图2.1.7 跨列的表格

    3.        跨多行的表格

    单元格除了可以在水平方向上跨列,还可以在垂直方向上跨行,跨多行的表格是单元格在垂直方向上跨多行,设置rowspan属性实现。

    示例2.6

    <html>

    <head>

    <title>跨行和跨列的表格</title>

    </head>

    <body>

        <table border="1" width="400">

            <tr>

                <td colspan="2">联系人薄</td>

            </tr>

            <tr align="center" bgcolor="#00eeee">

                <td>姓名</td><td>张三</td>

            </tr>

            <tr>

                <td rowspan="2">电话</td><td>13512345678</td>

            </tr>

            <tr>

                <td>68788898</td>

            </tr>

            <tr align="center" bgcolor="#00eeee">

                <td>姓名</td><td>张三</td>

            </tr>

            <tr>

                <td rowspan="2">电话</td><td>13512345678</td>

            </tr>

            <tr>

                <td>68788898</td>

            </tr>

           

        </table>

    </body>

    </html>

    示例2.6运行结果如图2.1.8所示。

    图2.1.8 跨多行的表格

    1.1.5             表格的嵌套

    表格内部可以再使用大部分HTML标签从而实现丰富多次的表格。表格还可以嵌套使用,嵌套的表格经常用于设计页面布局。如下图的表格嵌套。

    图2.1.9表格的嵌套

    示例2.7

    <html>

    <head>

    <title>嵌套的表格</title>

    </head>

    <body>

    <table border="1">

            <tr>

            <td><p>这是一个段落。</p><p>这是另一个段落。</p></td>

            <td>这个单元包含一个表格:

            <table border="1">

                <tr><td>内部表格</td><td>内部表格</td></tr>

            </table>

            </td>

            </tr>

            <tr>

            <td>这个单元包含一个列表:

            <ul>

            <li>苹果</li>

            <li>香蕉</li>

            <li>菠萝</li>

            </ul>

            </td>

            <td>HELLO</td>

            </tr>

        </table>

    </body>

    </html>

    示例2.7运行结果如图2.1.10所示。

    图2.1.10表格的嵌套

    1.2       表单

    用户经常在网上看到一些会员注册页面、用户登陆页面、网上调查问卷页面、搜索工具页面等,这些页面是什么做的呢?不敢说完全是用表单做的,但肯定至少包含有表单。可见表单主要用来收集客户端相关信息,使网页具有交互功能。本节主要讨论如何使用HTML来创建表单,然后向表单中添加表单元素。网页中的表单用途很广,而且还在不断发展。下面我们就列举一些典型的表单应用:

    Ø        在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他信息。

    Ø        搜集客户订单信息,如果想在线购买一本书,则必须填写姓名、联系电话、邮寄地址、付款方式和其他相关信息。

    Ø        收集关于调查问卷信息。大部分提供服务性的网站都鼓励用户参与调查问卷,提供反馈信息。这些反馈信息除了维系良好的客户关系外,它还有助于改进和提高网站的服务质量,从而使网站的服务更具人性化,吸引更多的浏览者。

    Ø        为网站提供搜索工具。提供各种信息的站点通常会为用户提供一个搜索框,使用户能够更快地找到想要的信息,比较著名的搜索网站:谷歌((http://www.google.com)、百度(http://www.baidu.com)等。

    如图2.1.11就是一个典型的表单。

    图2.1.11 典型的表单

    1.2.1             表单包含的元素

    创建表单后,就可以在表单中放置元素以接受用户的输入。这些元素通常放在<form></form>标签对之间一起使用,也可以在表单之外用来创建用户界面。在网上冲浪时,我们经常会见到一些常用的元素,例如:让用户输入姓名的单行文本框,让用户输入密码的密码框,让用户选择性别的单选按钮以及让用户提交信息的提交按钮等。不同的表单元素有不同的用途。如果要求用户输入的仅仅是一些文字信息,如“姓名”、“备注”、“留言”等,一般使用单行文本框或多行文本框。如果要求用户在指定的范围内做出选择,一般使用单选按钮、复选框和下拉列表框,如图2.1.10中“性别”、“爱好”、“出生日期”中的月份选择等常采用这些元素。如果要把填写好的表单信息提交给服务器,一般使用【提交】按钮,如图2.1.10中的【提交】按钮。除此之外,还有一些不太常用的表单元素,在这里就不一一列举了。

    1.2.2             <form>标签

    <form>标签用于创建 HTML文档中的表单。<form>标签除了可以包含表单字段元素之外,还可以包含文本、图像以及其他的HTML元素。

    一个表单可以向 Web服务器传递多个信息,但每个信息都需要有唯一的名称标识。因此,表单中的每一个表单元素都应有一个 name属性,用于指定表单元素的名称。这样 Web 服务器可以根据表单元素的名称来获取客户端传递给服务器的信息,未设置name属性的表单元素将不会被提交。如下图淘宝网的登录表单。

    图2.1.12 淘宝网的登录表单

    表2-1-1 <form>标签的属性

    属性

    说明

    action

    此属性指示服务器上处理表单输出的程序。一般来说,当用户单击表单上的“提交”按钮后,信息发送到Web服务器上,由action属性所指定的程序处理。语法为:action= “URL”

    method

    此属性告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法(用post方法还是用get方法)。如果值为get,浏览器将创建一个请求,该请求包含页面URL、一个问号和表单的值。浏览器会将该请求返回给URL中指定的处理程序,以进行处理。如果将值指定为post,表单上的数据会作为一个数据块发送到处理程序,而不使用请求字符串。语法为:method = (get | post)

    1.2.3             表单元素的统一属性

    网页中的表单由许多不同的表单元素组成,这些表单元素各自都有很多属性,下面就把这些表单元素中的一些常用的属性作一个统一的介绍。下面给出了表单元素的统一格式:

    <form action="register.action">

        <input type="text" name="username" size="50" maxlength="15"/>

    </form>

    <input>元素定义要在表单中显示的控件类型和外观。此元素包括的属性见表2-1-2

    表2-1-2<input>元素的属性

    属性

    说明

    type

    此属性指定表单元素的类型。可用的选项有:text, password, checkbox, radio,

    submit, reset, file, hidden, image和button。默认选择为text

    name

    此属性指定表单元素的名称。例如,如果表单上有几个文本框,可以按名称来标识它们,如textl, text2等。名称属性的作用域为form元素内

    value

    此属性是可选属性,它指定表单元素的初始值。

    size

    此属性指定表单元素的初始宽度。如果type为text或password,则表单元素的大小以字符为单位。对于其他输入类型,宽度以像素为单位

    maxlength

    此属性用于指定可在text或password元素中输入的最大字符数。默认为无限大

    1.2.4             表单元素逐一介绍

    1.        单行文本框

    在表单中最常用最常见的表单输入元素就是文本框(text),它提供给用户输入单行文本信息,例如用户名的输入框。若要在文档的表单里创建一个文本框,将<input>元素的type属性设为text就可以了。

    2.        密码框

    用于在表单中添加密码输入区域,浏览器将密码框中的每个字符都显示为星号 (*)使输入的容不可见。若要在文档的表单里创建一个密码框,将<input>元素的type属性设为password就可以了。

    示例2.8

    <html>

    <head>

    <title>表单元素</title>

    </head>

    <body>

    <form action="register.action">

        <table>

            <tr>

                <td>用户名</td><td><input type="text" name="username"/></td>

            </tr>

            <tr>

                <td>密码</td><td><input type="password" name="password"/></td>

            </tr>

        </table>

        </form>

    </body>

    </html>

    示例2.8在浏览器中的运行结果如图2.1.13所示。

    图2.1.13 单行文本框和密码框

    3.        多行文本框

    当我们要在网页中输入两行或两行以上的文本时,怎么办?显然,前面学过的文本框及其他表单元素都不能满足要求,这就应该使用多行文本框,它使用的标签是<textarea>

    语法:

    <textarea name=”元素名称” cols=”列数” rows=”行数”>初始值</textarea>

    示例2.9

    <html>

    <head>

    <title>表单元素</title>

    </head>

    <body>

    <form action="register.action">

        <table>

        <tr>

            <td>自我介绍</td>

            <td><textarea name="intro" cols="20" rows="5"></textarea></td>

        </tr>

        </table>

        </form>

    </body>

    </html>

    示例2.9在浏览器中运行结果如图2.1.14所示。

    图2.1.14 多行文本框

    4.        单选按钮

    将<input>元素的type属性设为radio就可以创建一个单选按钮。单选按钮控件用于一组相互排斥的值,组中的每个单选按钮必须具有相同的名称,用户一次只能选择一个选项。单选按钮需要一个显式的value属性。

    示例2.10

    <html>

    <head>

    <title>表单元素</title>

    </head>

    <body>

    <form action="register.action">

        <table>

            <tr>

                <td>性别</td>

                <td><input type="radio" name="sex" checked="checked"/>男

                <input type="radio" name="sex"/>女</td>

            </tr>

        </table>

        </form>

    </body>

    </html>

    示例2.10在浏览器中的运行结果如图2.1.15所示。

    图2.1.15 单选按钮

    5.        复选框

    将<input>元素的type属性设为checkbox就可以创建一个复选框。复选框用于站点访问者从一个列表项目中选择一项或多项内容,例如提交个人爱好信息。如果某信息有多个复选框,可以将它们命名为相同的名称,这样便于客户端脚本编程时访问。当然,也可以用不同的名称命名。属性checked可用于设置复选框的选中状态,只有当复选框为选中状态时,浏览器才会将选中的复选框的值和 name属性一起提交给服务器,否则不会提交任何复选框的内容。

    示例2.11

    <html>

    <head>

    <title>表单元素</title>

    </head>

    <body>

    <form action="register.action">

        <table>

            <tr>

                <td>爱好</td><td><input type="checkbox" name="hobby"/>看书

                <input type="checkbox" name="hobby"/>看电影

                <input type="checkbox" name="hobby"/>旅游</td>

            </tr>

        </table>

        </form>

    </body>

    </html>

    示例2.11在浏览器中的运行结果如图2.1.16所示。

    图2.1.16 多选框

    6.        下拉列表框

    下拉列表框用于帮助用户快速、准确地选择一些选项,通过<select>和<option>标签元素来实现。<select>标签创建可供选择的下拉列表,<option>标签创建列表中的选项,使用 selected属性可以设置下拉列表的默认选项。

    示例2.12

    <html>

    <head>

    <title>表单元素</title>

    </head>

    <body>

    <form action="register.action">

        <table>

            <tr><td>地址</td>

            <td>

                <select name="address">

                    <option>北京</option>

                    <option>上海</option>

                    <option>广州</option>

                </select>

            </td>

            </tr>

        </table>

        </form>

    </body>

    </html>

    示例2.12在浏览器中运行结果如图2.1.17所示。

    图2.1.17 下拉列表框

    7.        按钮

    在表单中按钮可以分为4类,分别为普通按钮、提交按钮、重置按钮和图形按钮。普通按钮由用户通过客户端脚本语言自定义动作;提交按钮用于将当前所在表单中的信息提交给指定服务器程序;重置按钮将当前所在表单中的元素值设置为创建表单时的初始值;图形按钮的功能类似于提交按钮,可用于替代提交按钮,提高视觉的友好性和可视性。

    示例2.13

    <html>

    <head><title>表单元素</title></head>

    <body>

    <form action="register.action">

        <table><tr>

                <td colspan="2"><input type="submit" value="提交"/>

                <input type="reset" value="重置"/>

                <input type="button" value="按钮"/>

                <input type="image" src="login.gif"/></td>

        </tr></table>

        </form>

    </body>

    </html>

    示例2.13在浏览器中运行结果如图2.1.18所示。

    图2.1.18 按钮

    8.        文件域

    文件域的作用是便于Web浏览器通过form表单向 Web 服务器上传文件。使用文件域时,浏览器将自动生成一个单行文本框和一个“浏览”按钮,供用户选择上传到服务器的文件。

    应用以上所有表单元素的完整示例见示例2.19。

    示例2.14

    <html>

    <head><title>表单</title></head>

    <body>

    <form action="register.action">

        <table>

        <tr><td>用户名</td><td>

            <input type="text" name="username"/></td>

        </tr>

        <tr><td>密码</td><td><input type="password" name="password"/></td></tr>

        <tr><td>重复密码</td><td><input type="password" name="repassword"/></td></tr>

        <tr>

            <td>性别</td><td><input type="radio" name="sex"/>男

            <input type="radio" name="sex"/>女</td>

        </tr>

        <tr>

            <td>爱好</td><td><input type="checkbox" name="hobby"/>看书

            <input type="checkbox" name="hobby"/>看电影

            <input type="checkbox" name="hobby"/>旅游</td>

        </tr>

        <tr><td>地址</td><td><select name="address">

                    <option>北京</option>

                    <option>上海</option>

                    <option>广州</option>

            </select></td></tr>

        <tr>

            <td>自我介绍</td>

            <td><textarea name="intro" cols="20" rows="5"></textarea></td>

        </tr>

        <tr>

            <td>上传头像</td>

            <td><input type="file" name="pic"/></td>

        </tr>

     

        <tr><td colspan="2"><input type="submit" value="提交"/>

            <input type="reset" value="重置"/></td></tr>

        </table>

    </form>

    </body>

    </html>

    示例2.14运行结果如图2.1.19所示。

    2.1.19表单

    通常情况下,为了保证表单的格式整齐、清晰,在创建表单时,可以使用表格搭建页面的框架。同时页面使用多种元素和设置,比如图片、背景等让页面丰富多彩、图文并茂并有和服务器交互能力,实现动态网站。 

    本章总结

    Ø        HTML表格的基本结构

    n        <table>标签

    n        <tr>标签

    n        <td>标签

    n        <th>标签

    n        <caption>标签

    Ø        HTML表单

    n        action属性:指示服务器上处理表单输出的程序

    n        method属性:指定向服务器发送数据的方法(用post方法还是用get方法)

    Ø        HTML表单常用元素

    n        单行文本框:<input type="text" />

    n        密码框:<input type="password"/>

    n        多行文本框:<textarea name="intro" cols="20"rows="5"></textarea>

    n        单选按钮:<input type="radio" name="sex"/>

    n        复选框:<input type="checkbox" name="hobby"/>

    n        下拉列表框:<select name="address"></select>

    n        按钮: 

    u      <inputtype="reset" value="重置"/>

    u      <inputtype="button" value="按钮"/>

    u      <inputtype="image" src="login.gif"/>

    n        文件域:<input type="file" name="pic"/>

    任务实训部分

    实训任务1:实现一个跨行和跨列的表格

    训练技能点

    Ø        使用<table>标签创建表格

    Ø        使用colspan跨多列

    Ø        使用rowspan跨多行

    需求说明

    实现一个跨行跨列的表格,显示商品分类信息,效果如图2.2.1所示:

    图2.2.1 跨行跨列的表格

    实现思路

    Ø        使用<table>创建表格

    Ø        设置表格的宽度和边框

    Ø        使用colspan跨多列,使用rowspan跨多行

    核心代码如下。

    <html>

    <head><title>跨行跨列练习</title>

    </head>

    <body>

    <table width="400" border="1">

    <tr>

    <td colspan="3"><h2>商品类目</h2></td>

    </tr>

    <tr>

    <td rowspan="3">虚拟</td>

    <td>移动</td>

    <td>联通</td>

    </tr>

    <tr>

    <td>股票</td>

    <td>彩票</td>

    </tr>

    <tr>

    <td>梦幻</td>

    <td>QQ</td>

    </tr>

    </table>

    </body>

    </html>

     

    实训任务2:使用表格实现一个课程表

    训练技能点

    Ø        创建表格的基本结构

    Ø        表格的跨行和跨列

    Ø        bordercolor属性的用法

    Ø        使用bgcolor设置背景颜色

    需求说明

    使用表格知识实现一个小学课程表,效果如图2.2.2 所示。

    图2.2.2 课程表

    实现思路

    Ø        使用EditPlus创建表格的基本结构

    Ø        使用width设置表格的宽度,border属性设置边框的粗细,bordercorder设置边框的颜色

    Ø        使用bgcolor设置单元格的背景颜色

    核心代码如下。

    <html>

    <head><title>跨行跨列练习</title>

    </head>

    <body>

    <table border="3" width="98%" bordercolor="#FF9933">

    <tr>

    <td height="50" bgcolor="#eeeeee" align=center colspan="6"><font size="5">课程表</font></td>

    </tr>

    <tr>

    <td bgcolor="#00eecc" width="15%">&nbsp;</td>

    <td bgcolor="#00eecc" width="16%">星期一</td>

    <td bgcolor="#00eecc" width="16%">星期二</td>

    <td bgcolor="#00eecc" width="19%">星期三</td>

    <td bgcolor="#00eecc" width="18%">星期四</td>

    <td bgcolor="#00eecc" width="16%">星期五</td>

    </tr>

    <tr>

    <td bgcolor="#00eecc" rowspan="2">上午</td>

    <td bgcolor="#00eecc">语文</td>

    <td bgcolor="#00eecc">英语</td>

    <td bgcolor="#00eecc">语文</td>

    <td bgcolor="#00eecc">语文</td>

    <td bgcolor="#00eecc">数学</td>

    </tr>

    <tr>

    <td bgcolor="#00eecc">英语</td>

    <td bgcolor="#00eecc">数学</td>

    <td bgcolor="#00eecc">数学</td>

    <td bgcolor="#00eecc">英语</td>

    <td bgcolor="#00eecc">英语</td>

    </tr>

    </table>

    </body>

    </html>

     

     

    实训任务3:实现在线商品展示页面

    训练技能点

    Ø        表格的基本结构

    Ø        使用<img>标签插入图片

    Ø        <checkbox>多选框

    需求说明

    使用表格和<img>标签实现在线商品展示页面,效果如图2.2.3所示

    图2.2.3 在线商品展示

    实现思路

    Ø        使用EditPlus创建表格的基本结构

    Ø        合并第1行的4个单元格,然后使用<img>插入图片

    Ø        第二行显示表头信息

    Ø        从第二行起,在第1个单元格中添加多选框

    实现步骤

    (1)     使用EditPlus创建表格基本结构

    <html>

    <head><title>表格实现产品列表</title>

    </head>

    <body>

    <table width="80%">

     

    </table>

    </body>

    </html>

    (2)     合并第1行的4个单元格,然后使用<img>插入图片

    <tr>

    <td colspan="4"><img src="images/list_bg.gif" alt="电子产品" /></td>

    </tr>

    (3)     从第二行起,在第1个单元格中添加多选框

    <tr>

        <td><input type="checkbox" name="chose" value="1" /></td>

    <td><img src="images/232.jpg" alt="alt"  width=150 height=120/></td>

    <td><p>推荐商品区</p>

    <p>卖家:lingture </p>

    <p><img src="images/buy.gif" alt="alt"/>&nbsp;&nbsp;

    <img src="images/fav1.gif" alt="alt" />收藏</p></td>

    <td><p>一口价</p><p>283.30</p></td>

    </tr>

     

    实训任务4:实现购物网站用户注册页面

    训练技能点

    Ø        表格的使用

    Ø        常用form表单元素的用法

    需求说明

    实现购物网站用户注册页面,效果如图2.2.4所示:

    Ø        使用表格进行布局

    Ø        包含常见的表单元素

    巩固练习

     

    一、选择题

    1.        以下选项中,哪个全部都是表格标签? (     )

    A.       <table><head><tfoot>

    B.       <table><tr><td>

    C.       <table><tr><tt>

    D.       <thead><body><tr>

    2.        请选择可以使单元格中的内容进行左对齐的正确 HTML 标签? (       )

    A.       <tdalign="left">

    B.       <tdvalign="left">

    C.       <td leftalign>

    D.       <tdleft>

    3.        在下列的 HTML 中,哪个可以产生复选框?(         )

    A.       <inputtype="check">

    B.       <checkbox>

    C.       <inputtype="checkbox">

    D.       <check>

    4.        在下列的 HTML 中,哪个可以产生单行文本框?(         )

    A.       <inputtype="textfield">

    B.       <textinputtype="text">

    C.       <inputtype="text">

    D.       <textfield>

    5.        在下列的 HTML 中,哪个可以产生下拉列表?(     )

    A.       <list>

    B.       <inputtype="list">

    C.       <inputtype="dropdown">

    D.       <select>

    、上机练习

    1.        请用HTML实现如图2.3.1所示的申请表表单。相关要求如下:

    Ø        教育程度:默认选中为本科。

    Ø        国籍:有中国、美国、澳大利亚、日本、新加坡,默认选中为中国。


    展开全文
  • 使用登录和保存位置的Google脚本和电子表格进行Web出勤 版本01 演示和安装视频 应用测试和演示 用户:github 通过:github 笔记: 如果在Android上使用Chrome浏览器,则如果无法打开以上链接,请尝试注销Chrome中...
  • 黄聪:C# web word文档操作,任意指定位置插入图片,表格简单操作  最近在做考试系统,说是要将试卷导出到word文档中,好方便教师打印,其实考试系统这个已经是别人做烂的系统了,我的一个(资深)同事,也说...
  • 最近在做考试系统,说是要将试卷导出到...如果你真要做到将一张试卷,(当然是一定的word格式,包含图片,表格等),导入到数据库中,并且能够成功的将其导出到word中来,(样式基本上不能有太大的出入),就说明...
  • C# web页面展示个性化表格

    千次阅读 2019-06-06 15:22:42
    有时候,我们需要在网页上按照一定格式做下类似Excl表格的单元格合并操作,用来展示表格,如下所示 类型 商品 说明 数量 金额 日用品 5 40 洗漱 体育用品 8 64 跳绳 文化用品 ...
  • 1、气泡位置偏移这个问题出现,是由于,需求要求打破了常规模式,要求“elementUI表格内容根据高度来判断是否显示气泡”,这时候我们会发现,气泡在底层代码中是以实际高度的位置来判断气泡显示的位置,而不是以我们...
  • web开发学习周记——对表格的基本操作 环境已经搭建好了,接下来要用这些工具制作一个简单的小应用:对表格中的信息进行“增删改查”。 首先要在 Navicat 新建数据库,在数据库中新建我们要操作的表格,这里用的是...
  • 表格合计行 应用场景 此功能用在为DataGrid添加合计行的功能,合计行不仅仅限于合计功能,还提供计数(count),合计(sum),平均值(average)、最大值(max)、最小值(min)。 属性函数说明 1、...
  • 2.内容、图片、表格跨页断裂,封边 3.table并行、并列双边、重边 4.自动计算页码(总数及每一页),样式、位置、形式完全个性化 5.页眉页脚,去除浏览默认,自定义内容、样式、位置 6.保持页脚在页面底部,而非紧接...
  • jQuery each() 方法 each() 方法为每个匹配元素规定要运行的函数。 语法: $(selector).each(function(index,element...index - 选择器的 index 位置。 element - 当前的元素(也可使用 "this" 选择器)。 Example1...
  • 一个简单的基于Web的工具,用于查找Fate Grand / Order众包投稿数据。 下拉列表位于此处: ://docs.google.com/spreadsheets/d/1_SlTjrVRTgHgfS7sRqx4CeJMqlz687HdSlYqiW-JvQA/edit#gid=843570146 如何使用 这是...
  • CSS样式 列表与表格 列表的样式主要是list开头 表格的样式主要是设置表格的高和宽,包括一些边框的样式 列表样式 主要指无序列表和有序列表 ...list-style-position 标志的位置 list-style-type 标志的类...
  • 表格视图 用法和行为 在极少数情况下,当与该行中的项相关的附加详细信息或控件显示在同一屏上时,该行可能会继续高亮显示。但是,并不鼓励这样做,因为要在屏幕上同时显示选项列表,被选中的项和相关的详细信息或...
  • 效果图:拖动表格里任何一个位置,都可以左右拖动表格宽度,上下宽度一起改变 特点:拖动容易,文字不会被线盖住   代码: &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&...
  • 效果图:拖动带颜色位置上的竖杠,可以左右拖动表格宽度,上下宽度一起改变   缺点:拖动点极其精确,想拖动一次要有耐心   再帖代码: &lt;html&gt; &lt;head&gt; &lt;meta ...
  • 1、图像与链接 1、链接-锚点 ... 用于在页面中做一个记号,允许页面随时随地的跳转到这个记号的位置处 2、使用方式 1、定义锚点(做记号) 1、使用 a 标记的 name 属性 <a name="NO1">衣装鞋帽&...
  • 效果图:拖动带颜色位置上的竖杠,可以左右拖动表格宽度,表头宽度和表格宽度一起改变 特点1:拖动后的文字不会被表格线覆盖掉 特点2:可以对表格中内容进行升降排序   再帖代码: &lt;html&gt; &lt;...
  • 前期工作:已经将要套打的样式按照固定位置,在HTML页面完全固定好,将数据传入就可以准确套打。 具体需求:将数据以excel文件上传,上传成功先进行数据的展示,然后再存入数据库中,接着进行数据的管理,包括:增删...
  • 这一篇讲深入介绍饼图、仪表盘、图像和表格的基础知识。 文章目录一、饼图(一)导入通用模块包。(二)查看类的函数(三)相关重要函数(四)第一个案例(五)设置背景色和标题、宽度和高度(六)设置图例显示位置...
  • 表格-源码

    2021-02-26 04:17:32
    HTML5 Spreadsheet Editor是一个Web应用程序,可以在Web浏览器中查看和编辑电子表格文档。 它支持Excel,SpreadsheetML,CSV,OpenDocument和Microsoft Excel支持的许多其他格式。 支持所有基本功能,包括单元格编辑...
  • 在图像中指定位置创建链接在图像中指定位置创建链接简单表格实例标题1标题2 内容1内容2 内容3内容4 为表格添加标题Hello,world!标题1标题2 内容1内容2 内容3内容4 带有表格标题标题1标题2 内容1内容2 为表格添加颜色...
  • jQuery 表格插件整理

    2020-12-08 22:26:23
    Flexigrid – Web 2.0 Javscript Grid for jQuery – 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧。 Chromatable JQuery Plugin – 固定表头,可滚动...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 557
精华内容 222
关键字:

web表格位置