HTML基础-07-表单
2022-04-28 本文已影响0人
玄德公笔记
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
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>
-
结果显示
image.png
image.png
