css复习——表格与表单

0719

表格

表格标签：
table 表格
thead 表格头
tbody 表格主体
tr 表格行
th 元素定义表头
td 元素定义表格单元

表格样式重置：

table{border-collapse:collapse;} 
/*单元格间隙合并*/
th,td{padding:0;}
/*重置单元格默认填充*/

colspan 属性规定单元格可横跨的列数。

<td colspan="2"></td>

rowspan 属性规定单元格可横跨的行数。

<td rowspan="2"></td>

表单

form 表单

<input type="…… " name="" value="" />

input value 属性

value 属性为 input 元素设定值。
对于不同的输入类型，value 属性的用法也不同：
type=”button”, “reset”, “submit” - 定义按钮上的显示的文本
type=”text”, “password”, “hidden” - 定义输入字段的初始值
type=”checkbox”, “radio”, “image” - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
注释：value 属性无法与 <input type="file"> 一同使用。

<input value="value">

input name 属性

name 属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

<form action="form_action.asp" method="get">
  <p>Name: <input type="text" name="fullname" /></p>
  <p>Email: <input type="text" name="email" /></p>
  <input type="submit" value="Submit" />
</form>

input type 属性值

button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox 定义复选框。
color 定义拾色器。
date 定义日期字段（带有 calendar 控件）
datetime 定义日期字段（带有 calendar 和 time 控件）
datetime-local 定义日期字段（带有 calendar 和 time 控件）
month 定义日期字段的月（带有 calendar 控件）
week 定义日期字段的周（带有 calendar 控件）
time 定义日期字段的时、分、秒（带有 time 控件）
email 定义用于 e-mail 地址的文本字段
file 定义输入字段和 “浏览…” 按钮，供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
range 定义带有 slider 控件的数字字段。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
tel 定义用于电话号码的文本字段。
text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url 定义用于 URL 的文本字段。

label 标签为 input 元素定义标注

<input type="checkbox" name="" id="a"/>
<label for="a">……</label>

checked 在页面加载时默认选定的 input 元素。

<input type="checkbox" name="" checked/>

disabled 属性规定应该禁用 input 元素。

<input type="checkbox" name="" disabled/>

select/option 下拉选框

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

select 标签属性
autofocus 规定在页面加载后文本区域自动获得焦点。

<select autofocus>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option>
</select> 

disabled 规定禁用该下拉列表。

<select disabled="disabled">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

form 规定文本区域所属的一个或多个表单。

<form action="demo_form.asp" id="carform">
   Firstname:<input type="text" name="fname">
   <input type="submit">
</form>

<select name="carlist" form="carform">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option>
</select> 

multiple 规定可选择多个选项。
在不同操作系统中，选择多个选项的差异：
对于 windows：按住 Ctrl 按钮来选择多个选项
对于 Mac：按住 command 按钮来选择多个选项

<select multiple="multiple" size="4">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

name 规定下拉列表的名称。
name 属性规定 select 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据

<select name="carlist">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

size 规定下拉列表中可见选项的数目。

<select size="2">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

option标签属性
disabled 规定此选项应在首次加载时被禁用。

<select>
  <option>Volvo</option>
  <option>Saab</option>
  <option disabled="disabled">Opel</option>
  <option>Audi</option>
</select>

label 定义当使用 optgroup 时所使用的标注。
label 属性规定更短版本的选项。
下拉列表中会显示出所规定的更短版本。

<select>
  <option label="Volvo">Volvo (Latin for "I roll")</option>
  <option label="Saab">Saab (Swedish Aeroplane AB)</option>
</select>

selected 规定选项（在首次显示在列表中时）表现为选中状态。

<select>
  <option>Volvo</option>
  <option selected="selected">Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

value 定义送往服务器的选项值。

<select>
  <option value="volvo">Volvo XC90</option>
  <option value="saab">Saab 95</option>
  <option value="mercedes">Mercedes SLK</option>
  <option value="audi">Audi TT</option>
</select>

textarea 文本域
textarea的属性值
autofocus 规定在页面加载后文本区域自动获得焦点。
cols 规定文本区内的可见宽度。
disabled 规定禁用该文本区。
form 规定文本区域所属的一个或多个表单。
maxlength 规定文本区域的最大字符数。
name 规定文本区的名称。
placeholder 规定描述文本区域预期值的简短提示。
readonly 规定文本区为只读。
required 规定文本区域是必填的。
rows 规定文本区内的可见行数。
wrap 规定当在表单中提交时，文本区域中的文本如何换行。
http://www.w3school.com.cn/tags/tag_textarea.asp

outline 轮廓线；
A标签轮廓线去除方法：
1、<a href="#" onfocus="this.blur();">……</a>
2、<a href="#" hidefocus>……</a>

outline-color
color_name 规定颜色值为颜色名称的轮廓颜色（比如 red）。
hex_number 规定颜色值为十六进制值的轮廓颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的轮廓颜色（比如 rgb(255,0,0)）。
invert 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
inherit 规定应该从父元素继承轮廓颜色的设置。

outline-style
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。

outline-width
thin 规定细轮廓。
medium 默认。规定中等的轮廓。
thick 规定粗的轮廓。
length 允许您规定轮廓粗细的值。
inherit 规定应该从父元素继承轮廓宽度的设置。

inherit 规定应该从父元素继承 outline 属性的设置。