结构标记

经常使用 <div> 元素设计页⾯的⼤大致布局，如页头、导航
栏、主要内容部分和页脚等。

<body>
<div id="header">
页头部分内容
</div>
<div id="main">
页面主体部分内容
</div>
<div id="footer">
页脚部分
</div>
</body>

表单

使⽤用 <form> 元素创建表单
在 <form> 元素中添加其他表单可以包含的控件元素

表单控件元素有
– input元素：⽂文本输⼊入控件、按钮、单选和复选按钮、选项
框、⽂文件选择框和隐藏控件等
– textarea元素
– select和option元素
– 其他元素

input

⽤用于收集⽤用户信息
• 主要属性
– type：根据不同的 type 属性值，可以创建各种类型的输⼊入
字段，⽐比如文本框、复选框等
– value：控件的数据
– name：控件的名称
– disabled：禁用控件

文本框与密码框

• 主要属性
– type：根据不同的 type 属性值，可以创建各种类型的输⼊入
字段，⽐比如⽂文本框、复选框等
– value：控件的数据
– name：控件的名称
– disabled：禁⽤用控件
如
姓名：<input type="text" name="username"
value="mary" maxlength="6" />
<br /><br />
密码：<input type="password" name="pwd" />

单选框和复选框

单选框： <input type=“radio”/>
• 复选框： <input type=“checkbox” />
• 主要属性
– name：设置名称，并⽤用于分组，⼀一组单选框或者复选框的
名称必须相同
– value：⽂文本，当提交 form 时，如果选中了此单选按钮，
那么 value 就被发送到服务器
– checked：设置默认被选中
如
性别:
<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>⼥女
<input type="radio" name="sex" value="2" checked="checked"/>保密
<br /><br />
喜欢的城市:
<input type="checkbox" name="cities" value="1"/>北京
<input type="checkbox" name="cities" value="2"/>贵阳
<input type="checkbox" name="cities" value="3"/>深圳

按钮

• 提交按钮： <input type=“submit”/>
• 重置按钮： <input type=“reset” />
• 普通按钮： <input type=“button” />
主要属性
– name：名称
– value：按钮的标题⽂文本

文件选择框

<label> 元素

<label for="chkHid">不要公开我的信息</label>

选项框

• <select>：创建选项框
– name：选项框命名
– size：⼤大于 1 ，则为滚动列表
– multiple：设置多选
<select>
<option value="1">我</option>
<option value="2">你</option>
<option value="3">他</option>
</select>