HTML基础-08-表单（＜form＞，＜input type=“text|radio|button|submit“＞，＜select＞ ＜option＞，＜textarea＞）
文章目录
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
1. 输入 < input >
1.1 输入框 （type=“text” 默认）
语法示例
<input type="text" name="xxxx" value="xxxx">
或默认不用谢
<input name="xxxx" value="xxxx">
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<p>武将信息：</p>
<form action="">
<input name="name" value="关羽"><br>
<input name="attack" value="1000"> <br>
<input name="defence" value="1000">
</form>
</body>
</html>
1.2 单选框 （type=“radio”）
语法示例
<input type="radio" name="xxx" value="xxx">选项内容
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<p>派出武将：</p>
<form action="">
<input type="radio" name="name" value="guanYu">关羽<br>
<input type="radio" name="name" value="zhangFei" checked="checked" >张飞<br>
<input type="radio" name="name" value="zhaoYun">赵云
</form>
</body>
</html>
说明：
- name值相同的一组只能选一个（我们这里值都是"name"，因此三个武将只能选一个）
- 添加
checked="checked"可预选
- 结果
如下，默认选择张飞
1.3 复选框 （type=“checkbox”）
语法示例
<input type="checkbox" name="xxx" value="xxx">选项内容<br>
完整示例
<!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"可预选
- 结果显示
1.4 按钮 （type=“button”）
语法示例
<input type="button" value="按钮名">
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<p>马超出战：</p>
<form action="">
<input type="button" value="全军突击">
</form>
</body>
</html>
- 结果显示
1.5 提交按钮 （type=“submit”）
和button的区别：
- submit 会提交表单
- button不会（一般用来关联自定义事件）
语法示例
<input type="submit" value="xxxx">
完整示例
见下文 “复选框+提交按钮”
2. 下拉菜单 < select > < option >
语法示例
<select name="name">
<option value="">选项A</option>
<option value="xxx" selected>选项B</option>
......
</select>
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公手记</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预选，默认显示这一项（本例落在张飞上）
- 结果显示
3. 文本框 < textarea >
语法示例
<textarea rows="行数" cols="列数">
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<textarea rows="10" cols="30">
蜀国政务意见箱，请留言。
</textarea>
</body>
</html>
- 显示结果
4. 表单 < form >
4.1 带边框的表单 < fieldset >
- 语法
<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>
- 显示结果
4.2 复选框+提交按钮
点击"提交"按钮，表单数据将被发送到服务器上的“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>
- 结果显示
