表单基础结构
1、 表单介绍
表单是HTML中很重要的一部分，主要功能是用来收集用户信息。用户提交表单后会将信息传送给服务器，实现用户与web服务器之间的交互。
语法:
<form>
表单元素（文本框、单选框、复选框、按钮、列表……）
</form>
*表单本身是不可见的，只有表单元素可见，所有的元素要写在表单内。
Form标签中，以下标签实现表单元素添加：
|
标签 |
描述 |
|
<input> |
表单输入标签 |
|
<select> |
菜单和列表标签 |
|
<option> |
菜单和列表项目标签 |
|
<textarea> |
文字域标签 |
|
<optgroup> |
菜单和项目列表分组标签 |
语法：
<input type=”类型属性” name=”名称” ……/>
<input>标签：
|
Type属性值 |
描述 |
|
Text |
文字域 |
|
Password |
密码域 |
|
File |
文件域 |
|
Checkbox |
复选域 |
|
Radio |
单选域 |
|
Buttom |
按钮 |
|
Submit |
提交按钮 |
|
Reset |
重置按钮 |
|
Hidd |
隐藏域 |
|
Image |
图像域 |
表单元素
1、 input标签(文本域和文件域)
单行文本域语法：
<form>
<input type=”text” name=”…” ……/>
</form>
单行文本域属性：
|
属性值 |
描述 |
|
Name |
文字域的名称 |
|
Maxlength |
指用户输入的最大字符长度 |
|
Size |
指定文本的宽度，以字符个数为单位； 文本框的缺省宽度是20个字符 |
|
Value |
指定文本框的默认值 |
|
Placeholder |
规定用户填写输入字段的提示 |
文件域语法：
<form>
<input type=”file” name=”…” ……/>
</form>
*不同的浏览器，外观显示不同。
2、 input标签(单选框和复选框)
单选框语法：
<form>
<input type=”radio” name=”…” value=”…” checked/>
</form>
*同一组的name值要相同。
复选框语法：
<form>
<input type=”checkbox” name=”…” value=”…” checked/>
</form>
*同一组的name可以不相同。
3、 input标签(按钮）
按钮的作用激发和提交表单,Value属性可以修改按钮文字
按钮语法：
<input type=”buttom” name=”…” value=”…” checked/>
*普通按钮，可以配合js脚本进行表单的相关处理
<input type=”submit” name=”…” value=”…” checked/>
*提交按钮，点击后可将表单信息提交到服务器
<input type=”reset” name=”…” value=”…” checked/>
*清除表单内容，恢复表单初始默认状态
4、 input标签(图像域和隐藏域)
图像域（图像提交按钮）语法：
<input type=”image” name=”…” src=”image url”/>
隐藏域语法：
<input type=”hidden” name=”…” value=”…” />
5、 select标签(下拉菜单和列表)
|
标签 |
描述 |
|
<input> |
表单输入标签 |
|
<select> |
菜单和列表标签 |
|
<option> |
菜单和列表项目标签 |
|
<textarea> |
文字域标签 |
|
<optgroup> |
菜单和项目列表分组标签 |
下拉菜单和列表标签：
<select>
<option value=”…”>选项</option>
<option value=”…”>选项</option>
</select>
<select>标签属性:
|
标签 |
描述 |
|
Name |
设置下拉菜单和列表的名称 |
|
Multiple |
设置可选择多个选项 |
|
size |
设置列表中可见选项的数目 |
|
selected |
默认选中状态 |
6、 select标签(分组下拉菜单和列表)
语法：
<select name=””>
<optgroup label=”组1”>
<option value=”…”>选项</option>
<option value=”…”>选项</option>
……
</optgroup>
<optgroup label=”组2”>
<option value=”…”>选项</option>
<option value=”…”>选项</option>
……
</optgroup>
</select>
7、 textarea(多行文本框)
语法：
<textarea name=”” rows=”..” cols”..” …>
内容
</textarea>
多行文本域<textarea>属性：
|
属性 |
描述 |
|
Name |
设置文本区的名称 |
|
Placeholder |
设置描述文本区域预期值的简短提示 |
|
Rows |
设置文本区内的可见行数 |
|
Cols |
设置文本区内的可见宽度 |
2、 表单属性
<form>标签
|
属性 |
值 |
描述 |
|
Action |
URL |
提交表单时向何处发送表单数据 |
|
Method |
Get*信息可见、post*保密性 |
设置表单以何种方式发送到指定页面 |
|
Name |
Form_name |
表单的名称 |
|
Target |
_blank、_self_、_parent、_top |
在何处打开action URL |
|
Enctype |
1.Application/x-www-form-urlencoded 2.Multipart/form-data 3.Text/plain |
在发送表单数据之前如何对其进行编码 |
*post和get区别
GET:
使用URL传递参数
对所发送信息的数量也有限制
一般用于信息获取
*信息可见
POST:
表单数据作为HTTP请求体的一部分
对所发送信息的数量无限制
—般用于修改服务器上的资源
*信息不可见