其是web页面的一部分，用于收集用户信息，并将其发送给服务器
（2）标签的创建
<body> <form name="form1" action="somepage.php" method="get"> <p></p> </form> </body> 解释 name：设定表单名称 action：指定要将表单数据发送到的地址，属性值可以分为两种 第一种：输入web表单服务器中表单处理程序或脚本的地址，这样表单将会把数据发送给程序 例：http://localhost/somepage.php 第二种：输入mailto和电子邮件地址 例：mailto:xxx@126.com method属性 属性值： get：method="get"，将输入数据加在action指定的地址后面传送到服务器 post:method="post",将输入数据按照HTTP传输协议中的POST传输方式传入到服务器，用电子邮件接受用户信 息时采用这种方式。 enctype：属性规定在发送到服务器之前应该如何对表单数据进行编码。 例：<form enctype="属性值"> 属性值 application/x-www-form-urlencoded 在发送前编码所有字符（默认） multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 text/plain 空格转换为 "+" 加号，但不对特殊字符编码
（3）控件
1)介绍
每一个控件都有一个初始值和一个当前值，值的类型都是字符串。一般情况下，控件的初始值都可以通过value属性设定，但是textarea元素定义的多行文本框控件的初始值由键入的内容本身决定。控件的初始值不会改变，当重置表单时，每一个控件的当前值被重新设置为初始值。如果表单没有初始值，重置表单后该控件是undefined。
2）创建表单控件
a、标签
| 标签 | 说明 |
|---|---|
| <input> | 定义控件的标签 |
b、属性
| 属性 | 属性 |
|---|---|
| type | 定义控件的类型 |
| name | 定义控件的标识名称，即id |
| value | 定义初始值，不输入为默认值 |
| checked | 针对单选框和复选框，设置默认值， |
| size | 设置控件的宽度，如果控件为"password"，其宽度是整数，表示字符的数目 |
| maxlength | 仅适用于"text"和"password"设置字符的最大值。可以超过size指定的宽度，当超过时，提供一个滑动条 |
c、属性值
| 值 | 描述 |
|---|---|
| button | 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。 |
| checkbox | 定义复选框。 |
| colorNew | 定义拾色器。 |
| dateNew | 定义 date 控件（包括年、月、日，不包括时间）。 |
| datetimeNew | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。 |
| datetime-localNew | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。 |
| emailNew | 定义用于 e-mail 地址的字段。 |
| file | 定义文件选择字段和 "浏览..." 按钮，供文件上传。 |
| hidden | 定义隐藏输入字段。 |
| image | 定义图像作为提交按钮。 |
| monthNew | 定义 month 和 year 控件（不带时区）。 |
| numberNew | 定义用于输入数字的字段。 |
| password | 定义密码字段（字段中的字符会被遮蔽）。 |
| radio | 定义单选按钮。 |
| rangeNew | 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。 |
| reset | 定义重置按钮（重置所有的表单值为默认值）。 |
| searchNew | 定义用于输入搜索字符串的文本字段。 |
| submit | 定义提交按钮。 |
| telNew | 定义用于输入电话号码的字段。 |
| text | 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。 |
| timeNew | 定义用于输入时间的控件（不带时区）。 |
| urlNew | 定义用于输入 URL 的字段。 |
| weekNew | 定义 week 和 year 控件（不带时区）。 |
3）密码文本框
将标签<input>的type属性设置为“password”时，为密码框，通过密码框输入的内容被替换为星号，使用密码框发送到服务器的密码及其他信息并未进行加密处理，可以直接以字母和数字或者文本形式截取。
4）单选框按钮
单选按钮代表互相排斥的选择。在单选按钮中如果属性name的属性值相同，那么当选择一个按钮，其他的按钮将会被取消；如果要赋初始值，只能使用checked，默认情况下为不定义。
5）复选框按钮
在同一个表单中的多个复选框可以使用同一个name属性值，在提交时，每一个处于选中的复选框都会形成一个“名称/值”对，多个处于选中的复选框都会形成多个“名称/值”对，这些"名称/值"对都会被提交给服务器。
6）隐藏控件
隐藏控件用来存储用户输入的信息，如姓名、电子邮件等，并可以在用户下次访问次站点时使用这些数据。并且，这些数据对用户而言是隐蔽的；虽然隐藏控件在浏览器中是不可见的，但是，隐藏控件的"名称/值"依然与表单一起提交；这种控件一般和客户端的脚本代码一起使用
7）文件选择框
用于浏览到其计算机上的某一个文件（如Word文件或图片文件），并将该文件作为表单数据上传，当创建文件选择框时，必须把<form>标签中的method属性指定为"post"。另外还需要把enctype属性指定为“multipart/form-data”，已告知服务器要传递一个文件，并带有常规的表单信息。
8）提交按钮
当这个按钮被用户单击时，表单中的所有控件的"名称/值"被提交，提交的目标是form元素的action属性所定义的URL地址
9）图形提交按钮
方法与上面发提交按钮差不多再加上图片的使用
10）多行文本
| 属性 | 说明 |
|---|---|
| rows | 定义可视文本的行数，但不限制实际实际文本行数，超过会有垂直滚动条 |
| cols | 定义可视文本的字符数，但不限制实际实际文本字符数，超过会有水平滚动条 |
| warp | 定义是否自动换行；off表示不换行，hard表示自动硬回车换行，换行元素一同被传送到服务器中；soft表示自动软回车换行，换行元素不会被传送到服务器中 |
11）选择列表
下拉列表和滚动列表都是由<select>标签和<option>标签共同创建的，这些标签统称为选择列表
| 标签 | 说明 |
|---|---|
| <select> | 创建列表框 |
| <option> | 为选择列表创建一个选择项 |
a、select标签的属性
| 属性 | 说明 |
|---|---|
| name | 定义一个名称标识 |
| size | 如果select元素呈现为列表框，这个属性被用于指定列表框中的行的数量 |
| multiple | 当设定这个值的时候，这个逻辑值允许同时选择多个项。如果没有定义这个属性时，该元素只允许选择单个项。 |
注意：
<select>标签能够创建一个可以被用户选择的选项列表，每一个<select>标签必须包含至少一个选项，一个选项通过一个<option>标签来指定。
b、option标签的属性
| 属性 | 说明 |
|---|---|
| value | 定义选项的初始值 |
| selected | 表示该选项被默认选中 |
注意：
如果为option标签设置value属性值，那么当该选选项被选中时，提交给服务器的是value属性的值，而不是<option></option>标签对内的值。如果没有为option标签设置value属性值，那么当该选选项被选中时，提交给服务器的是<option></option>标签对内的值，而不是value属性的值。
12）表单的提交
form元素的method属性用于定义表单的提交的方法。可选值包括get和post，在数据传输的过程中分别对应了HTTP协议中的GET和POST方法。其默认传递方式为get，二者的主要区别如下。
理论上：
get从服务器上请求数据，将表单的数据按照"名称=值"的形式，添加到action所指向的URL后面，并且两者之 间使用“?”连接，而各个变量之间使用“&”连接，特殊的符号转换成十六进制的代码
例：http://localhost/register.php?name=aaa&password=11111
POST用来向服务器传递数据，其将表单中的数据放在HTTP协议头中，按照变量和值相应的方式，传递到action属性所指的URL。
get提交最大能提交8192个字符，执行效率高，但不安全 post提交没有大小限制，效率比get低，安全
13）例
<body> <main> <p> <label for="textfield">文本:</label> <input type="text" name="textfield" id="textfield"> <label for="password"><br>密码:</label> <input type="password" name="password" id="password"> <label for="textarea"><br>文本区域:</label> <textarea name="textarea" id="textarea"></textarea> </p> <p> <input type="submit" name="submit" id="submit" value="提交"> <input type="reset" name="reset" id="reset" value="重置"> <input type="image" name="imageField" id="imageField" src="images/八卦图3.jpg"> <input type="hidden" name="hiddenField" id="hiddenField"> </p> <p> <input type="radio" name="radio" id="radio" value="radio"> <label for="radio">单选按钮 <input type="checkbox" name="checkbox" id="checkbox"> 复选按钮</label> </p> </main> </body>
1707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
