CSS选择框、下拉列表、文本域、表格
2017-07-10 21:19
369 查看
1.文件选择框
<input type="file"accept="image/*>accept:指定可选择文件的类型。
上传的头像需指定对应表单的属性
<formenctype="multipart/form-data">
2.下拉列表
优点:(1) 节省页面空间,使得页面更加简洁(2) 方便输入
(3) 规范输入
<selectname="province">
<optionvalue="33">浙江</option>
<optionvalue="41">河南</option>
<optionvalue="32">江苏</option>
<optionvalue="36">江西</option>
</select>
<select>标签定义一个下拉列表
<option>标签定义下拉列表的一个选项
<select>标签的name属性定义了提交的参数名
<option>标签的内容定义了该选项显示的文本,value属性定义了选中该选项时传递的参数值。
<select>标签的size属性定义了下拉列表框的选项个数,当小于实际选项个数时,会自动增加一个滚动条。
3.下拉列表的分组
<optgroup>的label属性定义分组显示的文字,disabled设置该分组不能用。<select>
<optgroup label="国产车">
<option value="红旗">红旗</option>
<option value="BYD">比亚迪</option>
<option value="奇瑞">奇瑞</option>
</optgroup>
<optgroup label="德系车">
<option value="奔驰">奔驰</option>
<option value="bmw">宝马</option>
<option value="大众">大众</option>
</optgroup>
<optgroup label="日系车">
<option value="本田">本田</option>
<option value="丰田">丰田</option>
<option value="三菱">三菱</option>
</optgroup>
</select>
4.textarea:
<textarea>)(文本域)标签定义一个多行的文本输入区域,文本区域中可供用户输入大量的内容。cols(列数):规定文本域的列数
rows(行数):规定文本域的行数
readonly:规定文本区域为只读
maxlength:规定文本域的最大字符数
autofocus:规定当前页面时,会自动获得焦点
<textarea rows="10"cols="30">
</textarea>
5.Fieldset(自定义字段):
Form:规定fieldset所属的一个或多个表单。Name:规定fieldset的名称。
Disabled:规定该组中的相关表单元素被禁用
Legend:对表单中的内容加以说明,类似于标题。
<form action="result.html"method="get">
<fieldset>
<legend>个人基本信息</legend>
姓名:<input
type="text"><br>
性别:<input
type="radio">男
<input type="radiol">女
<br>
年龄:<input
type="text">
</fieldset>
<fieldset>
<legend>教育背景</legend>
毕业学校:<input
type="text">
所学专业: <inputtype="text">
</fieldset>
<fieldset>l
<legend>职务信息</legend>
工作单位:<input
type="text">
职务:<input
type="text">
</fieldset>
</form>
6.隐藏域
当需要想服务器传递参数,且该参数无需用于输入,甚至都不想让用户看见,可以使用隐藏域来实现。<form action="result.html"method="get">
<input type="hidden"name="stuNo"value="201712312"readonly><br>
原密码:<input type="password"name="old">
<br>
新密码:<input type="password"name="new">
<br>
<input type="submit"value="修改密码">
</form>
7.表格
表格的组成部分:标题、表头、主题、表尾<table>定义一个表格
<caption>定义表格的标题
<thead>定义表头部分
<tbody>定义表格主题(数据)部分
<tfoot>定义表尾,一般显示汇总信息等。
<tr>定义一行
<th><td>定义一个数据项(单元格),<th>一般用于表头,有加粗样式,<td>一般用于表格主体部分,没有加粗样式。
<td>的rowspan和colspan分别定义单元格跨行的行数、跨列的列数。
相关文章推荐
- JS+CSS和图片美化下拉列表选择框
- 表格中用js左右添加从下拉列表中选择的内容
- JS+CSS和图片美化下拉列表选择框(select)
- HTML&CSS基础学习笔记1.22-表单的文本域和下拉列表
- HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表
- 通过选择下拉列表的值来取数据库的值并填写一个表格
- 日期选择下拉列表小控件
- expression web 视频教程第12-15讲:css 定位 布局 列表 表格
- [转帖]下拉列表可以输入也可以选择
- Eric的日期选择下拉列表小控件
- 响应AutoComplete下拉列表的选择事件
- javascript实现通过拼音首字母快速选择下拉列表
- select下拉列表动态显示选择公司及部门信息——级联
- 可随文本变化而出现不同选择项的文本框+下拉列表选择
- asp.net 的ComboBox 可输入可选择下拉列表
- [原] combobox如何让用户不能输入只能从下拉列表里面选择
- 下拉列表multiple选择
- 关于在GridView模版里添加DropDownList实现根据下拉列表的不同选择gridview根据条件筛选显示。
- 有关表格边框的css语法整理 选择自 jefferyzb 的 Blog
- Eric的日期选择下拉列表小控件