<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日常练习</title>
</head>
<body>
<!-- 标题 -->
<h1>青春不常在,赶紧挣大钱</h1>
<!-- 基本情况 -->
<hr>
昵称:<input type="text" placeholder="请输入昵称">
<br>
<br>
性别:<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<br>
<br>
<!-- 城市选项 -->
所在城市:
<select>
<option>北京</option>
<option selected>上海</option>
<option>广州</option>
</select>
<br>
<br>
<!-- 婚姻选项 -->
婚姻状况:<input type="radio" name="a">未婚
<input type="radio" name="a">已婚
<input type="radio" name="a">保密
<br>
<br>
<!-- 喜欢类型选项 -->
喜欢的类型:<input type="checkbox" name="aaa" checked>可爱
<input type="checkbox" name="aaa" checked>心肝
<input type="checkbox" name="aaa">御姐
<input type="checkbox" name="aaa">萝莉
<input type="checkbox" name="aaa">小鲜肉
<input type="checkbox" name="aaa">大叔
<br>
<br>
个人介绍:
<br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 承诺-->
<h3>我承诺</h3>
<ul>
<li>我好看</li>
<li>我自信</li>
<li>我美丽</li>
</ul>
<!-- 同意条款 -->
<!-- 按钮 -->
<input type="checkbox" name="" id="">
我同意所有条款
<br><br>
<button>免费注册</button>
<input type="reset">
</body>
</html>
<form actiom=""></form>
标签保证下面写的内容后面可以用- 标签提示字:
placeholder
- 单选:
radio
,要用name
分组, 多选checkbox
- 要实现点文字就能选中,用
label
标签 - 参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>青春不常在,抓紧谈恋爱</h1>
<hr>
<form action="">
昵称: <input type="text" placeholder="请输入昵称">
<br>
<br>
性别:
<label><input type="radio" name="sex" checked> 男</label>
<label><input type="radio" name="sex"> 女</label>
<br><br>
所在城市:
<select>
<option>北京</option>
<option selected>上海</option>
<option>广州</option>
</select>
<br>
<br>
喜欢的类型:
<label><input type="checkbox" checked> 可爱</label>
<label><input type="checkbox" checked> 性感</label>
<label><input type="checkbox"> 御姐</label>
<br>
<br>
个人介绍: <br>
<textarea name="" id="" cols="60" rows="10"></textarea>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>年满18岁、单身</li>
<li>年满18岁、单身</li>
</ul>
<!-- 按钮: input button -->
<input type="submit" value="免费注册">
<button type="reset">重置</button>
</form>
</body>
</html>