web表格与表单怎么运用

本篇内容主要讲解“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
      .
  

• 属性的列表

• 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表格与表单怎么运用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！