表单

1、表单的作用

1、显示、收集用户信息

2、将收集到的信息提交给服务器

  　　2、表单语法 语法:<form></form> 注意：表单中的内容是可以提交给服务器的，提交给服务器的内容要放在表单元素里 属性: action : 表单提交时的动作，提交地址,值为url,默认值为本页 method : 提交方式，常用取值：get或post get(默认值) : 明文提交，安全性较低，提交数据大小有限制，为2kb(根据浏览器决定) post : 密文提交,安全性较高，无大小限制 注意：用户登录、用户注册一律使用post提交 向服务器索取数据时(搜索引擎搜索数据)，可以使用get，也可以使用post name : 定义表单名称 <form action="...." method="post/get"> .... </form>

表单元素 表单元素指的是出现在表单中能够与用户进行交互的控件 表单元素分类:

　　1、input元素：由input标签组成的

　　2、textarea元素：<textarea> ,多行文本域

　　3、select 和 option ：下拉框

　　4、其他元素 a、input元素 input元素是空标记 <input /> 属性: type : 可以创建各种类型的input元素，比如：文本框、密码框、单选按钮、复选框 value : 当前表单元素的值，可以是提交给服务器的值，也可以是默认显示的初始值 name : 名称，要提交给服务器去使用 id : 唯一标识，只能在当前页面使用，服务器不能用 disabled : 禁用控件

1、文本框 type="text" <input type="text" /> 注意：如果type不写，或不在指定值范围内，那么默认都为 text <input /> <input type="abcdefg" />

2、密码框 以密文的方式接收和显示用户的数据 type="password" <input type="password" /> 以上两个控件的通用属性:

　　1、name，id，value，

　　2、maxlength : 限制输入的字符数 3、readonly : 设置控件为只读

　　3、单选按钮 type="radio" <input type="radio" /> name : 定义名称、分组 value : 值 checked : 默认被选中

　　4、复选框 能够实现多选的控件 type="checkbox" <input type="checkbox" /> name :定义名称、分组 value : checked :

　　5、<label>关联文本 与 表单元素 语法: <label>文本</label> 属性: for : 表示与该元素相关联的控件的ID值

5、按钮

　　1、提交按钮 功能固定化，用于将表单的数据提交给服务器 语法:type="submit" <input type="submit" value="按钮上的文字" />

　　2、重置按钮 功能固定化，将表单控件值恢复到默认状态 语法: type="reset" <input type="reset" value="文本" />

　　3、普通按钮 没有任何功能的标准按钮，用于执行客户端脚本（自定义功能） 语法: <input type="button" value="文本" />

　　4、文件选择框 <input type="file" /> 注意:如果有文件上传的话，必须将表单的enctype更改为 multipart/form-data,同时method必须为post

　　5、隐藏域 <input type="hidden" name="" value="" /> 使用场合：隐藏域在页面中是看不到的，一般会配合后台开发一起使用，从来不单独使用。

选项框 别名:下拉框、下拉列表 1、下拉列表 2、滚动列表 语法：

　　<select></select> 属性: name : 定义名称 size : 大于1，则为滚动列表，否则，

　　九十下拉列表 multiple : 设置多选 <option></option> 属性: value : 选项的值 selected : 预选中 <select name="province"> <option value="0451">黑龙江</option> <option 　　　　value="0431">吉林</option> <option value="021">辽宁</option> </select>

多行文本域 语法:

　　<textarea>默认显示文本</textarea> 属性: name : 名称 cols : 指定文本域的列数，一行能显示多少个字符，表示宽度（以字符个数为单位） rows : 指定文本域的行数，如果真是数据超出设定行数，将出现滚动条,表示高度

1、浮动框架 在一个浏览器中同时显示多个页面文档 语法: <iframe></iframe> 属性: src : 引入的网页路径(url) width : 宽度 height : 高度 frameborder : 边框 注意：尽可能的少使用 iframe 元素

2、摘要与细节 将一部分内容进行 收缩或展开 的动作 语法: <details> <summary>标题</summary> 显示的内容 </details>

3、度量元素 语法: <meter></meter> 属性: min : 度量范围的最小值，默认为0 max : 度量范围的最大值，默认为1 value : 当前的度量值，默认为0

4、时间元素 语法: <time datetime="时间值">显示的文本</time>

5、分组元素 <fieldset> <legend></legend> 定义组标题 显示内容 </fieldset>定义组

6、高亮文本显示 以突出的方式显示一段文本 语法：<mark>高亮显示的文本</mark>