1. 简单使用

1.1 单选框

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>
<p>派出武将：</p>
<form action="">
    <input type="radio" name="name" value="male">关羽<br>
    <input type="radio" name="name" value="male">张飞<br>
    <input type="radio" name="name" value="female">赵云
</form>

</body>
</html>

说明：
name值相同的一组只能选一个（我们这里name的值都定义的是name）
添加 checked="checked" 可预选

结果

image.png

1.2 复选框

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>
<p>本次派出武将：</p>
<form action="">
    <input type="checkbox" name="name" value="GuanYu">关羽<br>
    <input type="checkbox" name="name" value="ZhangFei" checked="checked">张飞<br>
    <input type="checkbox" name="name" value="ZhaoYun" checked="checked">赵云 
</form>

</body>
</html>

说明：
checked="checked" 可预选

结果显示

image.png

1.3 下拉菜单

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p>选择派出的武将：
<form action="">
<select name="name">
<option value="guanyu">关羽</option>
<option value="zhangfei" selected>张飞</option>
<option value="zhaoyun">赵云</option>
</select>
</form>

</body>
</html>

说明：
action="" 提交的数据会被传到哪个页面
selected 预选，默认显示这一项（本例落在张飞上）

结果显示

image.png

1.4 文本框

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>

<textarea rows="10" cols="30">
蜀国政务意见箱，请留言。
</textarea>

</body>
</html>

显示结果

image.png

1.5 按钮

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>
<p>马超出战：</p>
<form action="">
<input type="button" value="全军突击">
</form>

</body>
</html>

2. 组合使用

2.1 带边框的表单

语法

    <fieldset>
        <legend>标题是xxx</legend>
          ……
    </fieldset>

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>

<form action="">
    <fieldset>
        <legend>输入信息:</legend>
        姓名: <input type="text" size="30"><br>
        年龄: <input type="text" size="30"><br>
        邮箱: <input type="text" size="30">
    </fieldset>
</form>

</body>
</html>

显示结果

image.png

2.1 复选框+提交按钮

点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>

<form action="demo-form.php">
姓名: <input type="text" name="Name" value="诸葛亮"><br>
职务: <input type="text" name="Position" value="左军师"><br>
<input type="submit" value="提交">
</form>

</body>
</html>