表单的目的是为了收集用户的信息
<input>标签的属性值:
- type="text":文本框,用户可以输入任何数字
- type=“password”:密码框,用户看不见输入的密码
- type=“radio”:单选按钮,可以实现多选一,每个input标签中的name属性的值必须相同才能实现多选一的效果
- type="checkbox":复选框,可以实现多选
- checked="checked":表示默认选中
- type="submit":提交按钮,可以把表单域form里面的表单元素的值提交给后台服务器
- type="reset":重置按钮,可以还原表单元素初始的默认状态
- type="button":普通按钮
- value="提示文本内容":提示用户操作
<label>标签为input元素定义标记,如果你点击lable元素内的文本,就会触发控件。也就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<select>元素用来创建下拉列表,标签中的<option>标签定义了列表中可用的选项。<select>元素是一种表单控件,可用于在表单中接受用户输入。
<textarea>标签定义一个多行的文本输入控件
<table width="600">
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label>
</td>
</tr>
<tr>
<td>生日:</td>
<td>
<select>
<option>--请选择年份--</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>--请选择日期--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text" value="北京"></td>
</tr>
<tr>
<td>婚姻状况:</td>
<td>
<input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry"> 已婚 <input type="radio" name="marry"> 离婚
</td>
</tr>
<tr>
<td>学历:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>喜欢的类型:</td>
<td>
<input type="checkbox" name="love"> 妩媚的
<input type="checkbox" name="love"> 可爱的
<input type="checkbox" name="love"> 小鲜肉
<input type="checkbox" name="love"> 老腊肉
<input type="checkbox" name="love" checked="checked"> 都喜欢
</td>
</tr>
<tr>
<td>个人介绍</td>
<td>
<textarea cols="50" rows="5">个人简介</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
</td>
</tr>
</table>