WDF(7)

 

教学内容

       

PPT8——

前四组属性和<tr>的非常类似，刚才我们也说了，其实对<tr>的属性设置最终还是应用到<td>上了，有一点不同的地方是可以为单元格指定背景图片，但不可以为数据行指定。

nowrap属性用于指定单元格中的数据是否会自动换行，这是个布尔属性，不设置该属性代表单元格中的文本长度如果大于表格宽度时，单元格中的文本自动换行；如果设置了该属性，则单元格中的文本不换行，而是撑大单元格。注意：对于一个较长的英文单词来说，无论设不设置该属醒，该单词都会在一行中进行显示，如果该单词长度大于单元格宽度，则该单元格一定会被撑大。

colspan和rowspan用于设置列和行的跨度，span即为跨度的意思，当我们对表格进行合并单元格操作时，会用到这两个属性：合并竖直方向的多个单元格，会为<td>产生一个rowspan属性，其取值为合并的单元格个数；合并水平方向的单元格，则会为<td>产生一个colspan属性，其取值为合并的单元格个数。

<table>、<tr>和<td>都是容器，<td>是真正的显示在网页中的内容的容器，<td>和</td>之间可以包含任意HTML元素。

如果不想在<td>中显示任何元素，<td>和</td>之间最好加上一个&nbsp;，否则的话该单元格的边框将不能正常显示。

PPT9——

我们说table可以作为布局的工具，但table最主要的作用还是作为二维表的表现工具，例如成绩单、报销单等。在对Dreamweaver简要介绍后，我们会学习如何制作一些比较复杂的表格。

PPT10——

在HTML中，一个表格可以被拆分为三个部分：题头、主体和脚注，分别使用标签<thead>、<tbody>和<tfoot>来表示，其实我们上面讲的关于表格的内容均是<tbody>中应该包含的内容。例如，对一个学生成绩单来说，第一行可能是课程名称，而最后一行可能是课程的平均成绩，这就是我们所说的题头和脚注，而中间的每位同学每门课程的成绩就是表格的主体。

th是table head cell的缩写

th标签和td标签可以互换，从语义的角度考虑，作为表头的单元格通常使用<th>而不是td，比如：成绩单的第一行是课程名称，第一列是学生姓名，这些单元格均可以使用<th>来代替<td>，这样更符合逻辑。

PPT11——

这是一个包含了我们上面介绍的所有和table相关的元素的例子。

PPT12——

我们在网页上注册用户或填写调查时，经常会遇到表单，比如用于输入用户名的文本框、选择性别的单选按钮，选择省份的下拉列表，用于提交信息的“确定”按钮等。

表单就是form，在VB中，我们知道form指的是窗体。在HTML中，表单form被看作一个包含其它表单元素的容器，它本身是一个不可见的元素，其中包含的表单元素才是可见的。但是即使如此，表单元素最好不要脱离表单而单独存在于页面中。

表单元素是指表单中允许用户键入信息的元素（如文本框、文本域、下拉菜单、单选按钮、复选框等）。

表单是与用户交互信息的主要手段。

一个表单至少应该包括说明性文字、用户填写的区域、提交和重填按钮等内容。

PPT13——

教学示例：16.form.htm

最常用的表单元素使用input元素进行定义，input元素是一个空元素：通过指定input元素的type属性，input元素可以定义10种不同类型的表单元素：

①        type=”text”，文本框：允许用户在表单中输入字符、数字等；

②        type=”password”，密码框：允许用户在表单中输入密码，用户输入时不显示实际输入的字符，而以“●”代替；

③        type=”button”，普通按钮：按钮通常用以触发某种事件，由于控制网页行为的javascript我们还没讲到，大家知道该种类型的表单元素就可以了；

④        type=”submit”，提交按钮：提交按钮不同于普通按钮，它是一种表单中的专用按钮，用户单击后，会将该表单中的信息提交给服务器，单击后会刷新页面或转到另一页；

⑤        type=”reset”，重置按钮：和提交按钮组合使用，用于清除用户在表单中的录入信息，注意：表单元素的默认信息不会被清除；

⑥        type=”checkbox”，复选按钮：为了和按钮区分开来，也叫复选框，允许用户从一个或多个选项中勾选一个或多个选项，比如兴趣爱好等；

⑦        type=”radio”，单选按钮：也叫单选框，允许用户从两个或多个选项中点选一个选项，比如男女、婚否、政治面貌等；

⑧        type=”file”，文件浏览：允许用户从本地硬盘选择文件，通常用于确定要上传到服务器上的文件名，如电子邮件附件、照片等；

⑨        type=”image”，图像域：在表单中插入一幅图片，用户单击该图片后，会自动向服务器提交该表单的信息，和submit按钮的功能类似，通常是为了替换submit按钮以获得更丰富的浏览效果；

⑩        type=”hidden”，隐藏域：用于在表单中设置隐藏信息，该信息会和其它用户输入的信息一起提交给服务器。

这些和我们在VB中学习的控件非常类似，但是在HTML中都使用一种标签input进行定义，它们唯一的不同是type属性的不同。

PPT14——

type属性刚才已经讲过了，主要用于确定input元素在浏览器中显示的控件类型。

name属性相当于控件名，设置name属性的目的是为了让处理用户输入的程序更容易获取用户输入的值。对于submit和reset不需要设置name属性，它们不接受用户输入。

value属性对于不同的控件类型具有不同的含义：①value属性对于文本框来说用于设置默认值，但大多数情况下更像是一个提示信息；②value属性对于按钮(type = button)来说用于设置按钮上要显示的文本；submit和reset不需要设置value属性，除非你想更改这两种按钮显示的默认文本；③value属性对于单选按钮和复选按钮来说用于设置每个元素的不同取值，以供用户进行选择后提交给服务器。

name属性对某些input表单元素尤为重要：相同的name属性可以使得单选按钮和复选按钮分组，成组出现的控件（主要指单选和复选按钮）使用相同的name属性值。

accesskey属性用于设置访问控件的快捷键，使用快捷键访问控件的目的是为了快速定位控件，因为只用键盘输入比同时使用键盘和鼠标输入的速度要快，更容易提高工作效率。该属性的取值是一个英文字母，在浏览器中可以使用“Alt + 属性值指定的英文字母”快速访问控件。

size属性用来设置<input type="text">元素中可见字符的个数，而maxlength属性用来设置可输入的字符个数。这两个属性只对<input type="text">和<input type="password">有效。Size属性用来控制文本框的显示宽度，而maxlength有利于保证用户录入信息的有效性。

checked、disabled和readonly三个属性均为布尔属性。checked属性只适用于<input type="checkbox">和<input type="radio">，用于确定该选项按钮是否被选中；设置disabled属性后，表单元素是灰化的（除了图片以外），不可使用；readonly属性只适用于<input type="text">和<input type="password">，设置该属性后，文本框中的文本不可修改。

PPT15——

这是一个关于input的例子，强调的部分是我们应该记住的和input元素相关的属性。

PPT16——

我们刚刚看到了<input>元素不需要在其开始标签和结束标签中间显示文本，所以使用空元素<input>就可以了，由于列表/菜单中必然包含不同的可供用户选择的选项，所以<input>这个空元素不再适合定义列表/菜单，所以，HTML中引进了<select>元素来定义它们，该元素和<input>元素不同，不是一个空元素。

在IE浏览器中，<select>元素可能表现为三种不同的控件：DropdownList（或ComboBox）、ListBox或UpdownList，这取决于不同的属性设置。

列表/菜单的选项使用<option>标签进行定义，主要的一个属性是selected，用于确定该选项是否被选中，选项的内容包含在<option></option>中。

select的主要属性有size和multiple：size用于确定列表/菜单显示的行数；multiple是一个布尔属性，用于确定列表/菜单的选项是否可以使多选的，如果设置了该属性，可以按下Shift或Ctrl键，使用鼠标点选多个选项：Shift用于连续多选，而Ctrl用于不连续多选。

textarea元素主要用于在HTML表单中显示一个多行的文本域，要显示在其中的文本包含在<textarea></textarea>中，故这不是一个空元素。它的主要属性有：rows和cols以及wrap。rows和cols的属性值都是一个整形数字，用于确定可见行数和每行的可见字符数；而wrap属性用于确定文本域中的多行文本是否自动换行，其属性值有多个，默认情况下，文本域中的文本时自动换行的，如果不想让其自动换行，可以为其指定属性wrap=”off”。

PPT17——

该示例演示了select和textarea的主要属性。

PPT18——

前面我们讲的都是<form>元素内部的表单元素的一些属性，form本身不可见，但也有两个重要属性，我们需要了解一下：

method属性用于确定表单的提交方式，可能的取值是get或post，默认为get。两种提交方式和服务器端的处理有关系，目前我们只需要知道，使用get方式提交浏览器地址栏中会出现参数，而post提交方式不会改变地址栏中的地址。

action属性用于确定处理表单信息的服务器端应用程序的地址。

教学重点

1)       td

2)       各种表单元素

 



对应PPT下载