HTML+CSS(4)

表单：

表单在网页中主要负责数据采集功能。

一个表单有三个基本组成部分： 

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 

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

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

表单的标签：<form></form>

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

注意：form 元素是块级元素，其前后会产生折行。

常用属性：name 、method(get,post)、 action(服务器的接收的页面如：reg.php)、οnsubmit="return javascript函数"、enctype="multipart/form-data"

name属性：name 属性规定表单的名称。

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

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

通常，表单会被提交到 web 服务器上的网页。

在下面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php">

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

method 属性：

规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。

表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。

详解：如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。

在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET。

Get (表单的默认传值方式)：

通过Get方式传值：名称(name)和值(name的值)以“？”的跟在action处理页面的后面。

如：

——如果有多个名称和值，用“&”号连接

——这个方式传值：名称和值都在地址栏中显示(不安全)

——地址栏的空间（容量有限）<2KB

——一般用在要求（安全方面）不高，并且一些简单的数据。

——通常用在查询方面

Post：

不在地址栏中显示

——相对安全

——一般用在数据库方面，修改，删除

——在上传一些复杂的数据的时候用post

●如：上传图片，文件等。

●注意：在上传文件时候，编码方式一定选择：enctype="multipart/form-data"

●大小没有限制

——Enctype=""表单的编码方式两种：

●Application/x-www-form-urlencoded(默认)

●enctype="multipart/form-data"

enctype属性：

规定被提交数据的编码（默认：url-encoded）。

默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）

表单元素：

HTML 表单用于搜集不同类型的用户输入。HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

如：

<input type=”text” name=”username” size=”20” maxlength=”30” />
<input type=”password” name=”pwdddd” size=”20” maxlength=”30” />

<input> 元素:

<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

input属性：

type 属性规定 input 元素的类型。

分类：input  type="text,password,radio,checkbox,button,submit reset image,hidden, file"

<input type="text" />：单行文本域。定义用于文本输入的单行输入字段。

<input type="password" />：密码域。定义密码字段。密码字段中的字符会被掩码（显示为星号或原点）。

<input type="radio" />：单选，外观是一个圆圈。定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。

<input type="checkbox" />：复选，外观是方框。定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。

<input type="button" /> ：普通按钮。定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。

<input type="submit" />：提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

<input type="reset" /> ：重置按钮。重置按钮会清除表单中的所有数据。

<input type="image" />：图片按钮，功能和submit一样,对表单具有提交的功能。定义图像形式的提交按钮。必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。

<input type="hidden" />：隐藏域。定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。通常传值没有必要让用户知道的信息。

<input type="file" />：上传文件域。用于文件上传。表单form中编码类型一定选择：enctype="multipart/form-data"。

<input type="checkbox" />：复选。定义复选框，复选框允许用户在一定数目的选择中选取一个或多个选项。

如：

<input type="checkbox" name="vehicle" value="Bike" />
<input type="checkbox" name="vehicle" value="Car" />

其中name值建议一样。

表单的提交：

<input type="submit" value="提交" name="submit" />
<input type="reset" value="重写" />
<input type="radio" name="是一组的相同" value="不能少"  ID＝"" />

Value是传到服务器上的值。

为了增加体验：<label for="表单元素的ID"></label>

如：

注意：ID在当前网页中只名称是唯一性。不能重复。

默认选项：checked="checked"

<select> 标签：下拉列表。

select 元素可创建单选或多选菜单。

<select&> 元素中的 <option> 标签用于定义列表中的可用选项。

提示：select 元素是一种表单控件，可用于在表单中接受用户输入。

<select>

<option value="值传到服务器">河北</option>

<option value="值传到服务器">河南</option>
<option value="值传到服务器">上海</option>
<option value="heibei" selected="selected">河北</option>
</select>

默认选择：selected="selected"

多选下拉列表：

分组下拉列表：<optgroup> 标签定义选项组。

optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

如：

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

<textarea>：多行文本输入框。

如：

<textarea name="abc" rows="3" cols="20">
PHP是世界上最好的语言。
</textarea>

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。

提示：可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式。

map area：图片热区。

功能与作用：可以实现一张图上可以做多个链接。

如：

<img src="filedown.jpg" width="164" height="164" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

usemap="#planetmap" ,名字可以随意,但必须加。

<map> 标签：定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

注意：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

<area> 标签：

<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。

area 元素总是嵌套在 <map> 标签中。

注意：<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。

<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 <map> 添加 id 和 name 两个属性。

<area> 标签的 coords 属性：

coords 属性规定区域的 x 和 y 坐标。

coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。

图像左上角的坐标是 "0,0"。

详解：<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。

下面列出了每种形状的适当值：

圆形：shape="circle"，coords="x,y,z"

这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。

多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。

多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

矩形：shape="rectangle"，coords="x1,y1,x2,y2"

第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。

如下面的 XHTML 片段在一个 100x100 像素图像的右下方四分之一处，定义了一个对鼠标敏感的区域，并在图像的正中间定义了一个圆形区域：

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

nohref 属性规定该区域没有相关的链接。

注意：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

<fieldset>标签、<legend>标签：将表单中相关的元素分组。

如：

<html>

<body>

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

</body>
</html>

运行结果如下：

<fieldset>标签：

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

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

<fieldset> 标签没有必需的或唯一的属性。

<legend>标签：

legend 元素为 fieldset 元素定义标题（caption）。

<frameset>标签：

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

如简单的三框架界面：

<html>

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

cols：框架左右分如:<frameset cols=”100,*” >

rows：框架上下分如:<frameset rows=”100,*” >

frameborder：框架的边框是否显示,值：1,yes显示；0，no 为不显示

border：框架的边框大小

bordercolor 框架的边框颜色

<frame> 标签：

<frame> 标签定义 frameset 中的一个特定的窗口（框架）。

frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。

src：网页的路径。

name：框架的名称，是以后链接的目标。

noresize：不可调整宽度

scrolling：是否滚动，no不滚动，yes 滚动，auto 自动。

<noframes>没有框架时显示的内容。

注意：如果您希望验证包含框架的页面，请确保 doctype 被设置为 "Frameset DTD"。阅读更多有关 DOCTYPE 的内容。

重要事项：您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过，如果您需要为不支持框架的浏览器添加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中。

<iframe> 标签：浮动框架。

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。

iframe是双标签，如<iframe src="网页" name="">如果浏览器不支持则显示该内容</iframe>

位置：在body中

src：在浮动框架中要显示的页面

name：浮动框架名称

Scrolling滚动：是否，yes ,no ,auto

Align：对齐方式，（参考图片的对齐方式） left right

width：框架的宽

height：高

frameborder：不要边no

纯html综合案例个人主页：

了解一个网站的基本结构。

首页，列表页，详细页。

模板的概念：

凡是在每一个页面中都存在的内容，通常都做在模板中。

模板是开发网站的基础。

模板的好处：方便修改，便于维护。可以快速开发网站。

一个网站的最基本的必须有三个模板：首页模板，列表页模板，内容页模板。