CSS相关内容（七）

表单<form>标记

<form action="提交后的最终地址" method="post(加密后传输，看不到)/get(默认)" name="表单名称">

各种表单控件

</form>

<form>确定表单的范围

<input>定义表单的各个具体的元素

元素type

type="text" 单行文本输入

type="password" 密码输入框

type="radio" name="类型" (checked 默认选项) 单选按钮

type="checkbox" name="类型" 复选框

type="bottom" 普通按钮

placeholder="提示信息"

name="此栏的名称"

id="控件名称"

size="此栏显示的宽度"

value="开发者看"

align="对齐方式"

maxlength="此栏可输入文本的最大长度"

readonly 内容只读

disabled 第一次加载页面时禁用

checked 默认被选项

type="submit" 提交按钮

type="reset" 重置按钮

type="image" src="图片地址" 图像按钮

type="email" email地址

type="tel" 电话

type="number" 数值（value默认值 max最大值 min最小值）

type="range" 滑块（min最小值 max最大值 step每次滑动的步幅）

type="date" 日期（date month week time datetime datetime-local）

autofocus 自动获取焦点

required 输入框为空时，不允许提交

hidden 隐藏域

file 文件域

多行文本框

<textarea name="textarea" id="textarea" cols="宽度" rows="显示行数"></textarea>

cols:用于定义文本框的宽度

rows：用于定义文本框的行数

wrap:用于定义文本框的换行方式，有以下3种

off 输入文字不会自动换行

virtual 输入文字在屏幕上会自动换行，但如果浏览者没有按“Enter”键换行，则提交到服务器

时视为没有换行

physical 输入文字会自动换行，提交到服务器时也自动换行

下拉列表框

<select name="select" >

<option values="1" selected> 分类1 </option>

<option values="2"> 分类2 </option>

......

下拉列表框（size属性设置显示列表格行数,）

<select name="select" size="2">

<option values="1" selected> 分类1 </option>

<option values="2" > 分类2 </option>

.......

下拉列表分组

<optgroup label="分组名">

<option> </option>

<.optgroup>

表单分组

<from>

<fieldset> 分组标题</fieldset>

表单元素

</fieldset>

</form>

表单样式

<label> 扩大表单点击范围

<labelfor="username"> 用户名： </label>

<input type="text"id="username"/>

:focus:invalid,:required:valid选择器

:focus:invalid 获得焦点输入无效状态

:required:valid 有效输入的状态

用法：input:focus:invalid{background:url(图片地址) no-repeat right center}