您的位置:首页 > Web前端 > HTML

第六章 HTML表单

2016-04-23 13:13 399 查看
1、表单是网页上用于输入信息的区域,它的功能是收集用户信息,并将这些信息传递给后台服务器,实现网页与用户的沟通。

2、完整额表单由表单控件(表单元素),提示信息,表单域三个部分构成。

表单域:相当于一个容器,容纳所有的表单控件和提示信息。可以通过它定义处理表单数据所用程序的URL地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据无法传到后台服务器。

3、表单控件:<input /> 表单输入控件(可定义多种表单项)

<textarea></ textarea >定义多行文本框

<select></ select> 定义一个下拉列表(必须包含列表项)

4、创建表单:<form></form> 标记被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,

<form action="url地址" method="提及方式" name="表单名称"> 各种表单控件 </form >

action:在表单收集到信息后,需要将信息传递给服务器进行处理,这个属性用于指定接受并处理表单数据的服务器程序的url地址,(如<form action="form_action.asp">)。可以是相对路径或绝对路径,还可以为接受数据的邮箱地址,(如<form action=mailto:htmlcss@163.com>)表示当提交表单时,表单数据会以电子邮件的形式传递出去。也可以用#号。

method:表单数据的提交方式。get为默认值,数据将显示在浏览器的地址栏中,保密性差,有数据量的限制。post:保密性好,并且无数据量的限制。

name:用于指定表单的名称,以区分同一个页面中的多个表单。

5、要对input设置高度,宽度等,先将<input/>标记转换为块元素。

6、<input type="控件类型"/>

type属性的属性值:text(单行文本输入框)

password(密码输入框)

radio(单选按钮)

checkbox(复选框)

button(普通按钮)

submit(提交按钮)

reset(重置按钮)

image(图像形式的提交按钮)

hidden(隐藏域):对于用户是不可见的,通常用于后台的程序。

file(文件域)

name属性的属性值为由用户自定义(描述:控件的名称)

value属性的属性值为由用户自定义(描述:input控件中的默认文本值)

size属性的属性值为正整数(描述:input控件在页面中的显示宽度)

readonly属性的属性值为readonly(描述:该控件内容为只读,不能编辑修改)

disabled属性的属性值为disabled(描述:第一次加载页面时禁用该控件,显示为灰色)

checked属性的属性值为checked(描述:定义选择控件默认被选中的项)

maxlength属性的属性值为正整数(描述:控件允许输入的最多字符数)

7、常常需要将<input/> 标记联合<label>标记使用,以扩大控件的选择范围。

(如<input type="radio" name="sex" checked="checked " id="man"/><label for="man">男</label>)

使用<label>标记包含表单中的提示信息,并且将其for属性的值设置为相应表单控件的id 名称,这样<label>标记标注的内容就绑定到了指定id的表单控件上,当单击<label>标记中的内容时,相应的表单控件就会处于选中状态。

8、textarea属性

<textarea cols="每行中的字符数" rows="显示的行数">文本内容</textarea>

9、select控件

<select>

<option>选项1</option>......(select标记中至少包含一对option)

</select>

标记名:<select>

常用属性:size(指定下拉菜单的可见项数)

multuple(定义multiple="multiple"时,下拉菜单将具有多项选择的功能,方法为按住ctrl键的同时选择多项)

标记名:<option>

常见属性:selected(定义selected="selected"时,当前向即为默认选中项)

10、<optgroup></optgroup>标记用于定义选项组,必须嵌套在<select></select>标记中,一对<select></select>中通常包含多对<optgroud></optgroup>。在<optgroud></optgroup>之间为<option></option>标记定义的具体选项。注:<optgroup>标记有一个必需的属性label.

11、form是块元素,重置浏览器的默认样式时,需要清除其内边距和外边距。

input控件默认有边框效果,当使用<input/>标记定义各种按钮时,通常需要清除其边框。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: