<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style type="text/css">
</style>
</head>
<body>
<!-- 1将用户信息提交给服务器的 -->
<form action="target.html">
<!-- action属性指向的是一个服务器的地址,表单会提交到相应的服务器地址 -->
<!-- 必须给表单项指定一个name属性,数据才会提交到服务器中 -->
<!-- lable 标签专门用来选中表单中的提示文字。 它可以指定一个for属性,该属性的值需要
指定表单项的id值-->
<fieldset><!--对表单项进行分组-->
<legend>用户信息</legend>
<label for="um">用户名</label>
<input id="um" type="text" name="username"/><br /><br />
密 码 <input type="password" name="password" /><br /><br />
</fieldset>
<!-- 如果希望在单选按钮,多选框中指定默认选中的选项,添加checked="checked"属性
下拉列表则是 selected="selected" -->
<!-- 单选按钮
单选按钮通过name属性进行分组,name属性相同是一组按钮
像这样需要用户选择二部是需要用户直接填写内容的表单项,还需指定一个value属性,被选中的表
单项的value值将会提交给服务器-->
<fieldset>
<legend>用户性别</legend>
性别<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked="checked"/>女
<br /><br />
</fieldset>
<!-- 多选框-->
爱好 <input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="badminton" checked="checked"/>羽毛球
<input type="checkbox" name="hobby" value="pingpong"/>兵乓球
<br /><br />
<!-- 下拉列表
name属性指定给select。value属性给option
当为下拉列表添加multiple="multiple" ,下拉列表变为一个多选的下拉列表
optgroup 对选项进行分组,通过label属性来指定分组的名字-->
你喜欢的明星
<select name="star" multiple="multiple"><!-- multiple="multiple" -->
<!-- 使用option标签来创建一个个列表项 -->
<optgroup label="很好">
<option value="hg">胡歌</option>
<option value="pyy">彭于晏</option>
<option value="wyz" selected="selected">吴彦祖</option>
</optgroup>
<optgroup label="好">
<option value="xz">肖战</option>
<option value="cl">成龙</option>
<option value="lzy">林正英</option>
</optgroup>
</select>
<br /><br />
<!-- 使用textarea 创建文本域 -->
自我介绍<textarea name="info"></textarea>
<br /><br />
<input type="submit" value="注册"/>
<!-- 用户填写的信息会附在URL地址的后边一查询字符串的形式发送给服务器
URL地址?查询字符串 -->
<input type="reset" value="重置" />
<!-- 创建一个单纯的按钮 。没啥功能,单纯的让人点。一般结合JS用的-->
<input type="button" value="按钮" />
<!-- button标签使用更加灵活 -->
<button>按钮</button>
<button>按钮</button>
</form>
</body>
</html>