CSS-form表单及input表单控件一、表单二、表单控件三、CSS控制表单样式，注意问题

一、表单

1.认识表单

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

2.创建表单

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

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

<form>标记的常用属性

二、表单控件

1.input控件

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

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

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

（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>

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

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

最后

以上就是玩命枕头为你收集整理的CSS-form表单及input表单控件一、表单二、表单控件三、CSS控制表单样式，注意问题的全部内容，希望文章能够帮你解决CSS-form表单及input表单控件一、表单二、表单控件三、CSS控制表单样式，注意问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。