<!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>

<!-- 表单域form标签 -->

<form action="">

<!-- input输入元素,type属性值不同,效果不同 -->

<!-- text文本 -->

姓名:<input type="text"><br>

QQ :<input type="text"><br>

<!-- password表示密码 -->

密码:<input type="password"><br>

<!-- radio定义单选按钮 -->

<!-- name定义input输入元素的名称,value是值 -->

性别:男<input type="radio" name="sex" value="man">女<input type="radio" name="sex" value="women"><br>

班级:网络3221 <input type="radio" name="banji" value="3221">网络3222 <input type="radio" name="banji" value="3222">网络3223 <input type="radio" name="banji" value="3223"><br>

<!-- checkbox多选 -->

爱好:羽毛球<input type="checkbox" name="hobby" value="qiu">

跑步<input type="checkbox" name="hobby" value="play">

唱歌<input type="checkbox" name="hobby" value="sing">

旅游<input type="checkbox" name="hobby" value="travel">

品尝美食<input type="checkbox" name="hobby" value="eat">

</form>

</body>

</html>

效果图:

表单域(html)_html