第6章HTML表单

一、HTML表格的基本结构HTML表格是网页中常用的一种数据展示方式，它由表格元素<table>、行元素<tr>和单元格元素<td>组成，具体结构如下：1.1 定义表格```html<table><!-- 表格内容 --></table>```1.2 定义行```html<tr><!-- 行内容 --></tr>```1.3 定义单元格```html<td><!-- 单元格内容 --></td>```二、HTML表格的基本属性HTML表格可以通过一些属性来控制其显示效果和行为，下面是一些常用的表格属性：2.1 边框属性可以通过设置border属性来定义表格的边框样式，如：```html<table border="1"><!-- 表格内容 --></table>```2.2 合并单元格可以通过设置rowspan和colspan属性来合并单元格，实现复杂的布局效果。

2.3 表头和表体可以通过使用<thead>、<tbody>和<tfoot>元素来定义表格的表头、表体和表尾部分，提高表格的语义性和可读性。

三、HTML表单的基本结构HTML表单是网页中用于收集用户输入信息的一种方式，它由表单元素<form>、输入元素<input>、选择元素<select>和按钮元素<button>等组成，具体结构如下：3.1 定义表单```html<form><!-- 表单内容 --></form>```3.2 定义输入框```html<input type="text" />```3.3 定义下拉框```html<select><option value="1">选项1</option><option value="2">选项2</option></select>```3.4 定义按钮```html<button>提交</button>```四、HTML表单的常用属性HTML表单可以通过一些属性来控制其行为和样式，下面是一些常用的表单属性：4.1 提交位置区域可以通过action属性定义表单提交的位置区域，如：```html<form action="/submit" method="post"><!-- 表单内容 --></form>```4.2 提交方式可以通过method属性定义表单的提交方式，一般有get和post两种方式。

第10节表格的使用10.1 表格的构成元素表格:<table></table>行：<tr></tr>列：<td></td>代码结构：表格永远包括的是行，行永远包括的是列，也就是说<tr>..</tr>中永远都包括<td>...</td>但它的都属于<table>...</table>中.<table><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>以上代码说明建立了一个三行两列的表格.10.2 设置表格的标题caption语法：<caption>...</caption>将此代码加入到第一个<table>下方。

例如：<table width="200" border="1"><caption>表格的标题部分</caption><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table>10.3 表头TH语法：<th>..</th>此代码表示表格的表头的部分。

例：<table width="200" border="1"><caption>小学成绩表</caption><th>姓名</th><th>语文</th><th>数学</th><tr><td>小明</td><td>85.5</td><td>&nbsp;</td></tr><tr><td>小红</td><td>90</td><td>&nbsp;</td></tr></table>由上例看出：表头的个数由列决定，有几个列那么就有几个表头。

html表单元素及表单元素详解原⽂⼤纲 1、认识表单 2、认识表单元素 3、表单元素的分类 4、表单元素——⽂本框 5、表单元素button 6、表单元素——单选、多选 7、表单元素——select 8、表单元素——textarea 9、推荐1、认识表单 1、在⼀个页⾯上可以有多个form表单，但是向web服务器提交表单的时候，⼀次只可以提交⼀个表单。

2、要声明⼀个表单，只需要使⽤form标记来标明表单的开始和结束，若需要向服务器提交数据，则在form标签中需要设置action属性（⽤来设置提交表单的位置）、method属性（⽤来定义浏览器将表单中的信息提交给服务器端程序的处理⽅式）、target属性（⽤来指定服务器返回结果所显⽰的⽬标窗⼝或⽬标框架）；但是，对于客户端脚本编程来说，并不需要这些属性来帮助提交表单信息，form标签存在的意义是在于⽅便在脚本中编程的时候进⾏引⽤。

3、表单的引⽤可以利⽤from标签的name属性或者也可以利⽤document的forms[]数组中调⽤到对应的数组。

4、可以利⽤form表单的elements[]数组来遍历除了<input type=image >元素之外的所有元素 5、form表单的submit()⽅法⽤于将表单提交给服务，但我们点击submit按钮的时候，submit按钮会相应的调⽤onsubmit事件处理器从⽽调⽤Form对象的submit事件 6、如何在浏览器中使⽤页⾯中的信息，我们称之为“客户端脚本编程”，⽽如何把信息提交给Web服务，并将数据库保存在数据库中，我们通常称为“服务器端脚本编程” 7、在早期，所有可交互的HTML元素都应该放在HTML表单中，但是现在的定义是，需要提交到web服务器的数据，才必须要放在表单内，可是前⼀种理解的⽅式也不是完全错误的，因为⼀般可以交互的HTML元素，都是表单元素（在前期），即：浏览器需要处理的数据都是表单元素，因此需要将其放在HTML表单中。

HTML表单元素学习要点： 1.表单元素总汇 2.表单元素解析⼀．表单元素总汇HTML5的表单中，提供了各种可供⽤户输⼊的表单控件。

元素名称 说明form 表⽰HTML表单input 表⽰⽤来收集⽤户输⼊数据的控件textarea 表⽰可以输⼊多⾏⽂本的控件select 表⽰⽤来提供⼀组固定的选项option 表⽰提供提供⼀个选项optgroup 表⽰⼀组相关的option元素button 表⽰可⽤来提交或重置的表单按钮（或⼀般按钮）datalist 定义⼀组提供给⽤户的建议值fieldset 表⽰⼀组表单元素legend 表⽰fieldset元素的说明性标签label 表⽰表单元素的说明标签output 表⽰计算结果⼆．表单元素解析1.<form>定义表单解释：<form>元素主要是定义本⾝是⼀组表单。

元素属性 说明　method 表⽰表单的发送⽅式：有POST和GET两种，默认GET，GET⽅式发送明码发送，在接收页⾯的url可以看到?表单元素名称=元素值 POST⽅式发送，为加密的发送，接收页⾯的url看不到表单信息action 表⽰表单提交的页⾯，也就是接收表单的页⾯ enctype 表⽰浏览器对发送给服务器的数据所采⽤的编码格式，只有上传我⽂件是才⽤到，multipart/form-data 有三种：application/x-www-form-urlencoded（默认编码，enctype 不能将⽂件上传到服务器）、 multipart/form-data （⽤于上传⽂件到服务器）、 text/plain （未规范的编码，不 建议使⽤，不同浏览器理解不同）　name 设置表单名称，以便程序调⽤ target 设置提交时的⽬标位置：_blank、_parent、_self、_top， 也就是接收表单页⾯以什么⽅式打开，是新建页⾯打开，还是当前页⾯打开，默认当前页⾯打开autocomplete 设置浏览器记住⽤户输⼊的数据，实现⾃动完成表单。

HTML网页设计（表单元素）1.什么是表单表单（form）是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成，所有这些都放在＜form＞标签在。

一个文档中可以包含多个表单，而且每个表单可以放置通常的主体内容（包括文字和图像在内）Form标签设计者可以将表单放在文档主体中的任何位置，但前提是将表单的缘故都放在＜form＞标签和＜/form＞结束标签之间。

2.表单元素在＜form＞标签中，可以包含以下5个标签。

Input标签对于大量通常的表单内元素，可以使用＜input＞标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。

虽然＜input＞标签中有许多属性，但对每个元素来说，只有type和name属性是必须的。

当然，根据指定的比哦啊单元素类型，也可以设置一些其他的＜input＞属性。

可以使用＜input＞标签中的name属性来为字段命名（表单提交到处理过程中使用的字段，这种字段的说明可以参阅前面介绍）。

从技术角度上讲，name属性的值是任意的一个字符串，但是我们建议最好采用没有嵌入空格或标点的字符串。

＜input＞标签中必须的type属文字域最有用也是最常见的表单输入元素时文字域，在浏览器窗口中显示为一行的空框，它接收用输入的一行信息，当你用户将表单提交给服务器时，这些信息就变成了元素值。

范例代码：密码域将type 属性值设置为password ,就可以创建一个密码域。

传统文本域的其他属性和语义也可以应用于密码域。

应用呢密码域时必须制定一个字段的名称，这样就可以为该段字段设置size 和maxlength 属性，并可以设置一个初见时的vlaue 。

范例代码：文件域（file ） 复选框（checked ） 单选框（ridio ） 普通按钮（button ）设置普通按钮（button ）代码：fU&WJ -bl57^4444」.■».I S-l.-L.■■■■■■■■JUJ<input nan»E="nijx"type=71submif value="^X </bcrdy>重置按钮（Reset ）Textarea 标签作为表单的一部分，＜textarea ＞标签可在用户浏览器中创建一个多行文字域，在此文本输入区内,用户几乎可以输入无线文字。

html表单:HTML表单基础知识疯狂代码 / ĵ:http://HtmlJiaoCheng/Article23344.html本专题从最基础的表单知识，到表单的高级应用，让你有一个比较全面地认识，相信你在读完本专题以后，一定会对表单非常熟悉。

一、表单概述表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。

1、表单的组成一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用 表单按钮来控制其他定义了处理脚本的处理工作。

为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：1.1 表单标签＜form＞＜/form＞功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器或者电子邮件里。

语法：＜FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="..."＞. ..＜/FORM＞属性解释见下表：action=url指定一来处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.method=get或post指明提交表单的HTTP方法.可能的值为： post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get：不赞成。

GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"TARGET="..."指定提交的结果文档显示的位置： _blank ：在一个新的、无名浏览器窗口调入指定的文档； _self ：在指向这个目标的无素的相同的框架中调入文档； _parent ：把文档调入当前框的直接的父FRAMESET框中；这个值在当前框没有父框时等价于_self； _top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.例如：＜form action="/test.asp" method="post" target="_blank"＞...＜/form＞表示表单将向/test.asp以post的方式提交，提交的结果在新的页面显示，数据提交的媒体方式是默认的application/x-www-form-urlencoded方式；1.2 表单域表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式：1.2.1 文本框文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

HTML 部分 第6章 表单6.1 表单概述表单是网页中提供的一种交互式操作手段，在网页中的使用十分广泛。

无论是提交搜索的信息，还是网上注册等都需要使用表单。

用户可以通过提交表单信息与服务器进行动态交流。

表单主要可以分为两部分：一是HTML 源代码描述的表单，可以直接通过插入的方式添加到网页中；而是提交后的表单处理，需要调用服务器端编写好的脚本对客户端提交的信息作出回应。

该部分仅讲述HTML 源代码描述的表单，而真正让表单起作用需要在后续动态网页设计类课程中讲述。

在HTML 中，在需要使用表单的地方插入成对的表单标记<form></form>就可以很简单地完成表单的插入。

基本语法语法说明此处表单的属性大部分需要在后续动态网页设计类课程中起作用，该课程不对其进行过多描述。

<form name= " " method= " " action=" " enctype= " " target= " " > 表单项、文字、图片等</form>6.2 表单项的插入表单最重要的作用是获取用户信息，这就需要在表单中加入表单项，比如文本框、单选按钮等。

6.2.1 信息输入<input><input>标记是表单中输入信息常用的标记。

基本语法<form><input name="" type="" maxlength="" size="" value=""></form>1、插入文本框——text基本语法<form><input name="" type=text ></form>2、插入密码框——password基本语法<form><input name="" type=password ></form>在密码框中输入的数据会以小圆点的形式显示，提高密码的安全性。

Html表单表单 表单的⽬的是为了收集⽤户信息，与⽤户进⾏交互。

在html中，⼀个完整的表单由表单域，表单控件和提⽰信息三个部分组成。

表单域 表单域就是包含表单元素的⼀个区域。

<form>标签⽤于定义表单域，以实现⽤户信息的收集和传递，form会把它范围内的表单元素信息提交给服务器。

表单元素input元素 <input>标签⽤于收集⽤户输⼊的信息，其包含⼀个type属性，根据不同的type属性值，输⼊字段可以有很多种形式，可以是⽂本字段，复选框，掩码后的⽂本控件，单选按钮等。

input标签为单标签，type属性可以设置成这些值： 除了type属性外，input还提供了其他的属性 name是表单元素的名字，这⾥性别单选按钮必须有相同的name，才能实现多选⼀ value值⽤于放输⼊框的提⽰信息select下拉表单元素 在页⾯中，如果有多个选项让⽤户选择，并且想要节约空间，我们就可以使⽤select标签定义下拉列表。

籍贯：<select><option>选项1</option><option>选项2</option><option>选项3</option><option>选项4</option></select> select⾄少包含⼀个option，option中定义selected=“selected”时，当前像即为默认选中项。

textarea⽂本域元素 当⽤户输⼊内容较多的时候，我们就不能使⽤⽂本框表单了，此时我们可以使⽤textarea标签。

它是可以定义多⾏⽂本输⼊的控件，常见于留⾔板，评论等。