本篇内容主要讲解“web表格与表单怎么运用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“web表格与表单怎么运用”吧!

创新互联长期为超过千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为乌翠企业提供专业的成都网站设计、成都网站制作，乌翠网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

什么是表格

• 表格由标签来定义

  每个表格均由若干行(由tr标签定义)

  每行被分为若干个单元格(由td标签定义)

  标签td指表格数据及数据单元格内容

  数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等

  表格的表头使用

                                                                                                                                                                                                                                                                                                                                                     

  定义。 表格结构
  表头1	表头2	表头3
  表单1	表单2	表单3
  表单1	表单2	表单3
  表单1	表单2	表单3

  

  表格属性

  单元格边框

  单元格边距，指单元格内文字与边框的距离

  表格显示方式

  表格宽度

  表格标签

  标签定义表格的表头。该标签用于组合HTML表格的表头内容。

  标签表格主体(正文)。该标签用于组合HTML表格的主体内容。

  标签定义表格的页脚(脚注或表注)。该标签用于组合HTML表格中的表注内容。

  tfoot元素应该与thead和tbody元素结合起来使用。

  • 若使用thead、tfoot及tbody元素，就必须使用全部的元素。必须在table元素内部使用这些标签。

  • 在默认情况下这些元素不会影响表格的布局。不过，可以使用CSS使这些元素改变表格的外观。

  标签定义HTML表格中的行。tr元素包含一个或多个th或td元素。

                            

  标签定义HTML表格中的标准单元格。 HTML表格有两类单元格： 表头单元 - 包含头部信息(由th元素创建) 标准单元 - 包含数据(由td元素创建) td元素中的文本一般显示为正常字体且左对齐 表格跨2列	，表格跨2行		空单元格。在一些浏览器中没有内容的表格单元可能会不显示它的边框，为了让空单元格显示边框可以在该表格单元中加一个空格占位符 。 案例1：           每个表格由 table 标签开始。      每个表格行由 tr 标签开始。      每个表格数据由 td 标签开始。      一列：
  100

      

  一行三列：

                            100             200             300                   

  两行三列：

                            100             200             300                               400             500             600              

• 案例2：

  
  
  
  
      
      
      
      
  
  
  
      
          
              
                  消费项目....
                  一月
                  二月
              
          
          
                  
                      总计
                      $1001.50
                      $744.65
                  
              
          
              
                  衣服
                  $241.10
                  $50.20
              
              
                  化妆品
                  $30.00
                  $44.45
              
              
                  食物
                  $730.40
                  $650.00
              
  
          
  
      
  
  
  

HTML表单

• Web网页中表单的概念与作用。

• 表单结构语法及属性语法。

• 表单元素标记语法及属性语法。

• 域和域标题标记语法。

• 综合运用表单及表单元素设计网页。

表单的用途

• 表单是Web服务器端和客户端进行信息交互的主要桥梁。

• Web服务器通过含有表单和表格控件的Web页面完成用户信息的采集。

表单有12个常用表单控件

• 输入框：

• 单行文本输入框

• 密码输入框

• 多行文本输入框

• 复选框

• 单选按钮

• 按钮：

• 普通按钮

• 提交按钮

• 重置按钮

• 图像按钮

• 文件选择框

• 隐藏框

• 下拉列表框

表单概述

• 表单是较为复杂的HTML元素，经常与脚本、动态网页、后台数据处理等结合在一起使用，是设计动态网页的必备元素。

• 利用表单可以在HTML页面中插入一些表单控件(元素)，如文本框、提交按钮、重置按钮、单选按钮、复选框、下拉列表等，完成各类信息的采集。

• 案例：

  
  
  
  
  	
  	
  
  
  
  	
  		
  输入课程成绩
  		姓名:
  		高等数学:
  		大学物理:
  		
  		
  	
  
  
  

表单标记

• name：给表单命名，表单命名后可以用脚本语言(如JavaScript)对它进行控制。

• action：指定服务器端处理表单信息的应用程序。

• method：指定表单“处理表单数据方法”，method的值(get、post，默认get)。若消息要求保密度高且较长应该使用post。

• enctype：enctype是encodetype，即编码类型。它规定表单数据在发送到服务器之前是否进行编码。有三种取值，分别如下：

  值	描述
  application/x-www-from-urlencoded	在发送前编码所有字符(默认)。该方式只能上传文本信息，不能上传文件。
  multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。即表单数据既有文本又有二进制时使用该方式。
  text/plain	空格转换为“+”号，但不对特殊字符编码。

HTML Form属性

• HTMl

  元素，已设置所有可能的属性的样子：

  
      .
      form elements
      .
  

• 属性的列表

属性	描述
accept-charset	设置在被提交表单中使用的字符集(默认：页面字符集)。
action	设置向何处提交表单的地址(URL)提交页面。
autocomplete	设置浏览器是否自动补全表单(默认：开启)。
enctype	设置被提交数据的编码(默认：url-encoded)。
method	设置在提交表单时所用的HTTP方法(默认：GET)。
name	设置识别表单的名称(对于DOM使用document.forms.name)。
novalidate	设置浏览器不验证表单。
target	设置action属性中地址的目标(默认：_self)。

• Action属性

• action属性定义在提交表单时执行的动作。

• 向服务器提交表单的通常做法是使用提交按钮。

• 一般表单会被提交到web服务器上的应用程序。

• 若省略action属性，则action会被设置为当前页面。

• Method属性

• 何时使用GET？

• 何时使用POST？

• GET是默认提交方式。如果表单提交是被动的且没有敏感信息建议用GET。

• 使用GET时，表单数据在页面地址栏中是可见的。

• 注意：GET最适合少量数据的提交，浏览器会设定容量限制。

  action_page.php?firstname=Mickey&lastname=Mouse

• 若表单正在更新数据或包含敏感信息(例如密码)。

• POST的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

• method属性规定在提交表单时所用的HTTP方法(GET或POST)：

     

• name属性

• 若要正确地提交表单，每个输入字段必须设置一个name属性。

• 案例：

  
  
      
          
      
  
  
      
          First name:
  
          
          
  
          Last name:
  
          
          
  
  
          
      
  
      
  如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。
  
      
  first name 不会被提交，因为此 input 元素没有 name 属性。
  
  
  
  

• 用

  组合表单数据

• 元素组合表单中的相关数据。

• 元素为

  元素定义标题。

• 案例：

  
  
  
  
  	
  	
  
  
  
  	
  
  		
  
  			基本信息
  			姓名: 
  			性别: 
  		
  		
  
  			其他信息
  			身高: 
  			体重: 
  		
  	
  
  
  

• 定义域和域标题

• 利用

  域标记可将表单内的相关元素进行分组。

• 当一组表单元素放到fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。

• 标记定义域标题。

  
      
  
          
          
          ...
      
  

• 表单信息输入

• name属性，值自定义， 用来定义input元素的名称。

• type属性，属性值有：text单行文本输入框、password密码输入框、checkbox复选框、image图像按钮、submit提交按钮、reset重置按钮、button普通按钮、file文件选择框、hidden隐藏框。

• maxlength：设置单行文本框输入的最大字符数；

• size：设置单行输入框可显示的最大字符数；

• value：文本框的值，指定输入框中初始值；

• readonly：只读，文本框不可编辑。

• 案例：

  
  
  
  
  	
  	
  
  
  
  	
  输入用户信息
  	
  
  		用户名:
  		身份:
  
  		密 码:
  	
  
  
  

• 单行文本输入框、密码框文本框

         

• 表单的主要功能是为用户提供输入信息的接口，将输入信息发送请求到服务器并等待服务器响应。

+ 复选框、单选按钮

    ```html
    
    
    ```

    注：checked表示预选中。每一个复选框name、value属性都是不同的。每组单选按钮的name值必须相同，而value值必须不同。

    案例：

    ```html
    
    
    
    
    	
    	
    	
    		fieldset {
    			width: 300px;
    			height: 160px;
    			border: 2px double #003399;
    			padding-left: 30px;
    		}
    	
    
    
    
    	

    		

    			
请填写个人信息
 

    			姓名：

    			爱好：读书
    			唱歌
    			游戏

    			性别：
    			男性
    			女性
    		
    	
    
    
    
    ```

+ 图像按钮

    ```html
    
    ```

    注：src属性是必需的，它用于设置图像文件的路径。

    案例：

    ```html
    
    
    
    
    	
    	
    	
    		body {
    			text-align: center;
    		}
    
    		input {
    			width: 150px;
    			height: 120px;
    		}
    	
    
    
    
    	

    		
我国首艘航母辽宁号
    		
    		
    	
    
    
    
    ```

+ 提交按钮、重置按钮和普通按钮

    + \

      注：value属性默认为“提交”，可更改它来设置在按钮上的文字。点击提交按钮后表单数据会提交给服务器。

    + \

      注：value属性默认为“重置”，可更改它来设置在按钮上的文字。点击重置按钮后表单域的内容会清空。

    + \

      注：value属性无默认值，不设置会显示成空白按钮，可更改它来设置在按钮上的文字。普通按钮需要设置onclick属性值绑定事件。

    案例：

    ```html
    
    
    
    
    	
    	
    	
    		input {
    			width: 100px;
    			height: 25px;
    		}
    
    		body {
    			text-align: center;
    		}
    
    		fieldset {
    			width: 400px;
    			height: 180px;
    		}
    	
    
    
    
    	

    		

    			
三种按钮的应用
    			
请输入用户信息：
    			用户名：
    			密码：

    			  
    			
    			
    		
    	
    
    
    
    ```

+ 文件选择框及隐藏框

    + \

      注：选择文件后并不能真正打开，只是将文件名回填到文件输入框内。

    + \

      注：隐藏框不显示在表单中，它会随用户绑定一起提交给服务器。

    案例：

    ```html
    
    
    
    
    	
    	
    	
    		fieldset {
    			width: 500px;
    			height: 150px;
    			margin: 20p;
    		}
    	
    
    
    
    	

    		

    			
文件选择框与隐藏框的应用例
    			
请输入个人信息：
    			姓名:
    			性别:男
    			女 
    			年龄:
    			
请选择文件：
    			

    			
    		
    	
    
    
    
    ```

+ 多行文本输入框

    + \\

      注：rows指输入的行数；cols指输入的列数；wrap属性指定文本换行模式，默认值是soft表示文本不换行、可选值hard表示文本换行(包含换行符)。

  + 下拉列表框

    + 语法：

      ```html
      
          选项内容
          选项内容
          选项内容
      
      ```

    + 注：

      + size定义下拉列表的大小；
      + multiple设置列表框支持多选；
      + selected设置选项为预选状态。

    + 案例：

      ```html
      
      
      
      
      	
      	
      
      
      
      	

      		
请选择您的课程:
      		
      			C/C++程序设计
      			计算机网络
      			数据结构
      			Java程序设计
      			计算机组成原理
      		
      	
      
      
      ```

到此，相信大家对“web表格与表单怎么运用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

本文标题：web表格与表单怎么运用
地址分享：http://kswsj.cn/article/pcjioc.html