1.表单元素:用来声明表单的范围,只有此范围内填写的数据才能提交给服务器。
action:用来声明表单提交的目标。
例:<form action="http://www.baidu.com">
2.表单控件:用来让用户输入数据。
2.1 input元素
文本框
value:设置默认值
maxlength:设置最大长度
例:账号:<input type="text" value="smallnumber" maxlength="10" readonly/>
密码框
value:设置默认值
maxlength:设置最大长度
例:密码:<input type="password"/>
单选框
name:组名,同一组单选才能彼此互斥。
checked:设置默认选中。
例:性别:<input type="radio" name="sex" checked/>男<input type="radio" name="sex">女
多选框
checked:设置默认选中。
例:<input type="checkbox" checked>美食<input type="checkbox">旅游
隐藏框
例:<input type="hidden" value="message"/>
文件框
例:<input type="file"/>
提交、重置、普通按钮
例:<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="试试"/>
2.2 其他元素
label:用来管理表单中的文字,它可以将文字与控件绑定,从而增加控件的点击范围,提高易用性。
id是元素的唯一标识,任何元素都可以有id。
例:<input type="checkbox" id="c1"><label for="c1">我已阅读并自愿遵守此协议<!/label>
下拉选
selected:设置默认选中。
例:城市:<select>
<option>请选择</option>
<option selected>成都</option>
<option>深圳</option>
</select>
文本域
cols:设置宽度。
rows:设置高度。
例:简介:<textarea cols="30" rows="6"></textarea>
CSS的三种用法
1.内联样式:在元素的style属性内书写样式。
2.内部样式:在style标签内书写样式。
3.外部样式:在单独的css文件内书写样式。
CSS的规则特性
1)继承性:子元素可以继承父元素的样式(字体,颜色)。
2)层叠性:给一个元素增加不同的声明,效果会叠加。
3)优先级:给一个元素增加相同的声明,效果以后者为准。也叫就近原则(哪个样式离元素近就哪个生效)。
选择器
1)元素选择器:选择body、p、h1等等。
2)类选择器:选择class=某值的所有元素。
3)ID选择器:选择id=某值的唯一元素。
4)选择器组:可以选中一组选择器所对应目标的并集。
5)派生选择器:选择某元素的子孙----#p1 b 选择某元素的儿子-----#p2>b
6)伪类选择器:选择某状态之下的元素。
选择未访问过的超链接----a:link
选择已访问过的超链接----a:visited
选择激活态(正在点)的按钮----#b1:active
选择有焦点的文本框----#t1:focus
选择悬停态的图片----img:hover
边框问题
效果:
box模型
效果: