72 lines
2.3 KiB
HTML
72 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>08-表单项标签</title>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<form action="#" method="post">
|
||
<label for="username">用户名:</label>
|
||
<input type="text" name="username" id="username"><br>
|
||
|
||
<!--这里的for指的是input里面的id-->
|
||
<label for="password">密码:</label>
|
||
<input type="password" name="password" id="password"><br>
|
||
|
||
<!--单选框-->
|
||
<!--这里的男女应该是互斥的，所以只需要将两者的name设置为一样即可达到效果-->
|
||
<!--设置value之后，将来提交表单，他会将对应的value的值提交上去，不设置则全部都是on-->
|
||
性别:
|
||
<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
|
||
<input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
|
||
<br>
|
||
|
||
|
||
<!--复选框-->
|
||
爱好:
|
||
<input type="checkbox" name="hubby" value="1" id="travel"> <label for="travel">旅游</label>
|
||
<input type="checkbox" name="hubby" value="2" id="movie"> <label for="movie">电影</label>
|
||
<input type="checkbox" name="hubby" value="3" id="game"> <label for="game">游戏</label>
|
||
<br>
|
||
|
||
|
||
<!--文件-->
|
||
头像:
|
||
<input type="file"><br>
|
||
|
||
<!--定义隐藏字段-->
|
||
<input type="hidden" name="id" value="123">
|
||
|
||
<!--下拉列表-->
|
||
<!--下拉列表要想被提交，也需要指定属性值-->
|
||
<!--如果在option里面加上对应的value的值，则会提交对应的值，反之则会提交option里面写的对应的内容-->
|
||
城市:
|
||
<select name="city">
|
||
<option>北京</option>
|
||
<option value="shanghai">上海</option>
|
||
<option>广州</option>
|
||
</select>
|
||
<br>
|
||
|
||
|
||
<!--文本域-->
|
||
<!-- cols和rows可以设置对应的行和列 cols指的是每一行可以设置多少个字符-->
|
||
个人描述:
|
||
<textarea cols="20" rows="4" name="desc"></textarea>
|
||
|
||
|
||
<br>
|
||
<input type="submit" value="免费注册">
|
||
<!--重置按钮-->
|
||
<input type="reset" value="重置">
|
||
<!--普通按钮-->
|
||
<input type="button" value="一个按钮">
|
||
|
||
|
||
</form>
|
||
|
||
|
||
</body>
|
||
</html> |