表单
- 1. 表单：表单是依靠可采集用户数据的区域。
- 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：表示聚焦时候的样式。
表单元素的默认样式：
表单元素均默认为行盒，水平排列
表单元素均为可替换元素，可设置盒模型中的各个部分的尺寸