CSS-form表单及input表单控件

一、表单

1.认识表单

在HTML中，一个完整的表单通常由表单控件（也被称为表单元素）、提示信息和表单域3个部分构成。

2.创建表单

在HTML中，<form></form>标记被用于定义表单域，即表单开始和结束的位置，所有表单元素都在在这对标记中。

语法格式：
<form action=”url地址” method=”提交方式” name=”表单名称”>
			表单控件
		</form>

<form>标记的常用属性

属性名	含义
action	用于指定接收并处理表单数据的服务器程序的url地址
method	用于设置表单数据的提交方式，其取值未get或post -get:默认值，提交的数据显示在浏览器的地址栏，保密性差，有数据量的限制 -post:保密性好，无数据量限制
name	用于指定表单的名称，以区分同一个页面中的多个表单

二、表单控件

1.input控件

可以定义网页中的单行文本输入、单选按钮、复选框、提交按钮、重置按钮。使用最多。

语法格式：
<input type=”控件类型”/>

<input/>标记为单标记，type属性为其最基本的属性，根据其type属性的取值不同可输入不同的数据，达到客户端和服务端之间真正的交互、沟通的目的。
input控件的常用属性

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	buttom	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	hidden	隐藏域
	file	文件域
name	由用户定义	控件的名称
value	由用户定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示宽度
readonly	readonly	该控件为只读（不能编辑修改）
disabled	disabled	第一次加载页面时禁用该控件（显示为灰色）
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许被输入的最多字符数

（1） 单行文本输入框<input type=”text”/>
           常用来输入简短的信息（用户名、账号、证件号等），常用属性有name、value、maxlength
（2） 密码输入框<input type=”password”/>
           常用来输入密码，其内容将以圆点的形式显示
（3） 单选按钮<input type=”radio”/>
           常用于单选选择（选择性别、是否操作等。）
           注意：在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。此外，可以对单选按钮应用checked属性，指定默认选中项。
（4） 复选框<input type=”checkbox”/>
           常用于多项选择（选择兴趣、爱好），可对其应用checked属性，指定默认选中项。
（5） 普通按钮<input type=”button”/>
           常配合JavaScript脚本语言使用。
（6） 提交按钮<input type=”submit”/>
           表单中的核心控件，用户完成信息的输入后，一般都需要单击提交按钮才能完成表单数据的提交。对其应用value属性，改变提交按钮上的默认文本
（7） 重置按钮<input type=”reset”/>
           用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。对其应用value属性，改变重置按钮上的默认文本
（8） 图像形式的提交按钮<input type=”image”/>
           用图像代替了默认的按钮，外观上更加美观
           注意：必须为它定义src属性指定图像的url地址
（9） 隐藏域<input type=”hidden”/>
           对于用户是不可见的，通常用于后台的程序
（10） 文件域<input type=”file”/>
           定义文件域时，页面中将出现一个文本框和一个“浏览……“按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。

注意：<input />控件常常联合<label />标记使用

2.textarea控件

通过textarea控件可以轻松地创建多行文本输入框

  语法格式：
	<textarea cols=”每行中的字符数” rows=”显示的行数”>
			文本内容
	</textarea>
	
	cols和rows为<textarea>标记的必须属性，
	cols用来定义多行文本输入框中的没行的字符数，
	rows用来定义多行文本输入框中显示的行数，cols和rows取值均为正数。

3.select控件

下拉菜单

语法：
<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	……
</select>

每对<select></select>中至少包含一对<option> </option>

<select>和<option>标记的常用属性

</table>

标记名	常用属性	描述
select	size	指定下拉菜单的可见选项数（取值为正整数）
	multiple	定义multiple=“multiple“时，下拉菜单将具有多项选择的功能，方法为按住Ctrl键的同时选择多项
option	selected	定义selected=”selected”时，当前项即为默认选项

三、CSS控制表单样式，注意问题

1.由于form时块元素，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin
2.input控件默认有边框效果，当使用<input/>标记定义各种按钮时，通常需要清除其边框
3.通常情况下需要对文本框和密码框设置2到3像素的内边距，以使用户输入的内容不会紧贴输入框。