HTML-表单
表单
表单标签
|
<form> |
定义供用户输入的表单 |
|
<input> |
定义输入域 |
|
<textarea> |
定义文本域 (一个多行的输入控件) |
|
<label> |
定义一个控制的标签 |
|
<fieldset> |
定义域 |
|
<legend> |
定义域的标题 |
|
<select> |
定义一个选择列表 |
|
<optgroup> |
定义选项组 |
|
<option> |
定义下拉列表中的选项 |
|
<button> |
定义一个按钮 |
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
表单使用表单标签(<form>)定义。
<form> <input /></form>
使用<form>双标签定义一个表单，
格式为：
<form id="" name="表单类型" method="表单的提交方式" action="提交的地址">
表单内容
</form>
一、属性：
①id不可重复
②name可重复
③method，有两种提交方式：get&post，get提交方式有长度限制，并且编码后的内容在地址栏可见；post提交方式无长度限制，编码后的内容在地址栏不可见。
二、表单元素
表单元素大致分为四种类型，文本类、按钮类、选择类和其他。
输入框，可以使用input向表单中添加大部分元素，input标签格式为：<input id=""type="类型" name="输入框的名称" value="值"/>，
inputde的类型
1、文本类
①单行文本框，<input type="text" name="username" id="" value="需要显示的文字"/>
②密码框，<input type="password" name="password" id="" value="需要显示的文字"/>
③文本域，<textarea name="" id="" cols=""（最大输入字符多少） rows=""（最多输入几行）>
文本域名
</textarea>
④隐藏域，
HTML语言创建普通隐藏域
<input type="hidden" name="" id="" value="需要显示的文字"/>
JavaScript语言创建隐藏域
<script>
function add(value)
{
var value= 1
document.all.divHidden.innerHTML="<input type=hidden name=hdncount value=" + value+ ">";
}
</script>
注意:
表单提交时因为隐藏域的ID是一样的，在多个隐藏域时，提交到action或者接收页面的为数组的形式。
Dreamweaver插入隐藏域
菜点栏"插入"→"表单"→"隐藏域"→点击设计视图中的隐藏域→在"属性"面板中输入"required"→在"值"中输入要求的项目
隐藏域的优点
1、不需要任何服务器资源。
2、支持广泛，任何客户端都支持隐藏域。
3、实现简单，隐藏域属于HTML控件，无需像服务器控件那样有需要编程知识。
隐藏域的不足
1、具有较高的安全隐患。
2、存储结构简单。
3、如果存储了较多的较大的值，则会导致性能问题。
4、如果隐藏域过多，则在某些客户端中被禁止。
5、隐藏域将数据存储在服务器上，而不存储在客户端。
注意，如果开发中，页面的隐藏域过多，这些隐藏域被存储在服务器。当客户端浏览页面的时候，会有一些防火墙扫描页面，以保证操作系统的安全，如果页面的隐藏域过多，那么这些防火墙可能会禁止页面的某些功能。
2、按钮类
①提交按钮，<input type="submit" name="" id="" value="按钮上显示的文字" disabled="disabled"/>
<input type="submit" name="" id="" value="按钮上显示的文字" />
②重置按钮，将表单里的内容重置
<input type="reset" name="" id="" value="按钮上显示的文字" disabled="disabled"/>
<input type="reset" name="" id="" value="按钮上显示的文字" >
③普通按钮，<input type="button" name="" id="" value="按钮上显示的文字" disabled="disabled"（不可用的）/>
<input type="button" name="按钮的名称" id="" value="按钮上显示的文字" enabled="enabled"（可用的）/>
④图片按钮，<input type="image" src="图片地址" name="" id="" disabled="disabled"（不可用的）/>
<input type="image" src="图片地址" name="" id="" enabled="enabled"（可用的）/>
3、选择类
①单选按钮组，<input type="radio" name="" value="需要显示的文字" />文本名称
<input type="radio" name="" value="需要显示的文字" checked="checked"/>文本名称
注：这里的value值是看不到的，是提交给程序用的，显示的名称须写在标签外面；
这里的name值是用来分组的，只有组名称相同时才可以单选，checked是默认选中
②复选框组，<input type="checkbox" name="" value="需要显示的文字" />文本名称
<input type="checkbox" name="" value="需要显示的文字" checked="checked"/>文本名称
注：这里的value值是看不到的，是提交给程序用的，显示的名称须写在标签外面；checked="checked"设为默认选中。
③下拉列表，<select name="" id="" size="1"（菜单） >
<select name="" id="" size="2" mutiple="mutiple">
<option value="" select="select">内容1</option>
<option value="">内容2</option>
<option value="">内容3</option>
</select>
注：当mutiple="mutiple"时，下拉列表会出现双箭头，而不会显示下拉列表的全部内容；
当size="1"，为菜单，下拉列表显示一行；
当size=">=2"时，为列表，可显示两行或两行以上；
select="select"设为默认
④文件上传，<input type="file" name="" id="" />
<lable for="">
</lable>
注：<lable>标签为input元素定义标注（标记）。lable元素不会向用户呈现任何特殊效果。不过它为鼠标用户改进了可用性。
如果您在lable元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相
关胡表单控件上。
<lable>标签的for属性应当与相关元素胡id属性相同。
