<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="target.html" >
<!-- 使用fieldset对长表单项进行分组,使用legend指定组名 -->
<fieldset>
<legend>用户登录</legend>
<!-- 输入框 -->
<!-- name用於後端接收的變量名,vaule是未输入内容的默认值 -->
<!-- label可以指定一个for属性,属性值是某个标签的ID -->
<label for="userID">用户名</label>
<input type="text" id="userID" name="userName" value="默认值"/> <br>
<label for="PWD">密码</label>
<input type="password" id="PWD" name="password" /> <br>
</fieldset>
<fieldset>
<legend>单选筐</legend>
<!-- 单选按钮 -->
<!-- name为gender表示为一组,只能选一个,必须制定一个value属性 -->
<label>性别</label>
<input type="radio" name="gender" value="male" checked="checked">男
<input type="radio" name="gender" value="female">女
<br>
</fieldset>
<fieldset>
<legend>多选框</legend>
<!-- 多选框 -->
<!-- name必须同名,表示同一组 -->
<input type="checkbox" name="hobby" value="football" /> 足球
<input type="checkbox" name="hobby" value="pingpong" checked="checked" /> 乒乓球
<input type="checkbox" name="hobby" value="basketball" /> 篮球
</fieldset>
<!-- 下拉列表 -->
<!-- name在select标签中,值在option标签中,默认只能选中一个,mutiple表示可以选中多个选项 -->
<select name="sports" multiple="multiple">
<!-- optgroup分组,用label指定组名 -->
<optgroup label="球类"l>
<option value="football">足球</option>
<option value="pingpong">乒乓球</option>
<option value="basketball" selected="selected">篮球</option>
</optgroup>
<optgroup label="行走">
<option value="hiking">徒步</option>
<option value="walking">散步</option>
<option value="running">跑步</option>
</optgroup>
</select>
<br><br>
<!-- 文本域 -->
<textarea name="info" ></textarea>
<!-- input创建三个按钮 -->
<input type="submit" value="提交">
<input type="reset" name="重置">
<input type="button" name="按钮" value="按钮">
<!-- button标签创建按钮 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
