表单

表单

1. 1.    表单：表单是依靠可采集用户数据的区域。
2. 2.    创建表单区域：

l  用form元素表示表单

l  用action属性表示表单提交地址

l  用method属性表示表单的提交方式

注意：在制作静态页面时，可以不用书写上述的属性

3.    表单元素：

对于静态页面开发者，表单只是一个普通的块盒，内部可以放置任何元素

通常情况下，表单中会放置一些可以与用户进行交互的元素：

l  文本框

l  按钮

l  单选框

l  多选框

l  下拉列表

这些我们常称之为表单元素

表单元素的两个重要属性：

name属性：表示发送到服务器的键名

value属性：表示发送到服务器的值

4.    文本框：

使用input元素表示一个文本框，input是一个空元素

可通过type属性设置文本框类型。

5.    按钮：

使用input中的type属性里的submit可以来表示按钮。

<input type="submit" name="" value="提交">

使用button元素来表示按钮

<button type="reset">重置按钮</button>

input与button的比较：

input是空元素，button是普通元素

input按钮中只能写文本，button的内容更加丰富。

input的兼容性更好。

6.    下拉列表

使用select和option元素的组合表示下拉列表。

下来列表的类型：

普通的下拉列表

<select name="" id="">
	<option value="1">成都</option>
	<option value="2">绵阳</option>
	<option value="3">广元</option>
	<option selected value="4">德阳</option>
	<option value="5">南充</option>
	<option value="6">雅安</option>
	</select>

选项分组的下拉列表

<select id="seljob">
	<optgroup label="开发部">
	<option value="2345" >主管</option>
	<option>经理</option>
	<option>程序员</option>
	</optgroup>
	<optgroup label="销售部">
	<option>主管</option>
	<option>经理</option>
	<option>销售员</option>
	</optgroup>
</select>

7.    数据列表和多行文本框：

使用datalist元素表达数据列表：

<datalist id="browsers">
	<option value="Chrome">谷歌浏览器</option>
	<option value="Firefox">火狐浏览器</option>
	<option value="Internet Explorer">IE浏览器</option>
	<option value="Opera">欧朋浏览器</option>
	<option value="Safari">苹果Safari浏览器</option>
	</datalist>

使用textarea元素表达多行文本框：

<textarea cols="15" rows="3" style="300px;height:50px">这里内容会在页面显示，包括空格</textarea>

8. 表单元素的分组和状态

使用fiedset和legend元素，对表单内容进行分组

使用disabled属性和readonly属性，设置表单元素的可用状态。

<fieldset>

             <legend>账号信息1233</legend>

             <div>

                 账号：<input type="text" disabled name="" value="kkkk">

             </div>

             <div>

                昵称：<input type="text" readonly name="" id="" value="棒棒鸡">

             </div>

         </fieldset>

9.    美化表单元素：

伪类focus：表示聚焦时候的样式。

表单元素的默认样式：

表单元素均默认为行盒，水平排列

表单元素均为可替换元素，可设置盒模型中的各个部分的尺寸