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属性相同。