CSS笔记(美化表单）

一、表单的基本结构

表单由很多控件构成，如文本框、文本区域、单选按钮、复选框、下拉菜单和按钮等。

一个完整的表单结构应该由三部分组成

1）表单框架（

<form>

)：

<form>

是一个包含框，里面包含所有表单对象。

包含处理表单数据的各种属性，如提交字符编码、与服务器交互的页面、HTTP提交方式等

2）表单域（

<input>

、

<select>

等标签）：用于采集用户的输入或选择的数据，如文本框、文本区域、密码框、隐藏框、单选框、复选框、下拉选择框及文件上传框等。

3）表单按钮（

<input>

、

<button>

）：用于将数据发送给服务器，还可以用来控制其他脚本行为

所有表单元素都包含两个基本属性

name：提交表单时，通过name属性名可以访问表单对象的值

id：便于JavaScript和CSS访问该对象

表单中的按钮

<button>和<input>

由多种形式

type=“submit”，提交按钮。负责提交表单数据到服务器

type=“reset”，重设按钮。清空用户输入的数据，并恢复默认状态

type=“image”，图像按钮。使用src定义图像URL，功能与提交按钮一样

type=“button”，定义普通按钮。没有动作，需通过脚本定义

<form>

标签属性：accept-charset、action、autocomplete、enctype、method、name、novalidate、target

3个基本属性：

1）action：取值URL，设置数据提交至服务器的目标页面，HTML本身并没有提供处理表单数据的原生机制，它的作用是提交，具体处理由脚本或程序实现。该目标页面可以是绝对地址或相对地址。当设置action=“#”时，表示提交给当前页面

2）enctype：定义发送表单数据HTTP字符编码格式

application/x-www-form-urlencoded：

<form>

标签的默认值，将表单中的数据编码为名称/值对的形式发送至服务器，标准的编码格式。

multipart/form-data：将表单中数据编码为一条消息，表单中每个表单元素表示消息中的一个部分，然后传送至服务器。表单中含有上传组件时，这个属性值是必须的。

text/plain：将表单中的数据以纯文本的方式编码。发送邮件时需要

3）method：发送表单的HTTP的请求方式（post、get）

二、表单控件

1、输入型控件

<input type="" />

可定义多种类型的输入框，若没设置type默认单行输入文本框

单行文本框可输入的内容有限，可以用

<textarea>

允许输入大量内容

2、选择型控件

<input type="radio">

，单选按钮（圆形的按钮），多个单选按钮可以合并为单选按钮组。单选按钮组的name必须相同

<input type="checkbox">

每个单选框都必须有一个name

<select>

和

<option>

配合使用可以设计下拉菜单或者列表框

<select>

有两个专属属性：size：定义下拉菜单中显示的项目数目（包含

<optgroup>

。mutiple：定义下拉菜单可以多选（按住shift键单击各选项）

3、辅助控件

<fieldset>

对表单对象进行分类，一个表单可含有多个

<fieldset>

<legend>

定义每组的标题，默认显示在

<fieldset>

包含框的左上角

·

<label>

把标签信息与表单对象绑在一起，for属性可以设置Tab键切换输入焦点。

三、H5新增输入类型

email类型：

<input type="email" name="user_email

url类型：

<input type="url“ name="user_url"

number类型：

<input type="number="" min="" max=""

range类型：

<input type="range"

(在不同浏览器显示外观不同）

另外还有range类型、日期选择器类型、search类型、tel类型、color类型