1.使用表单的目的
方便收集用户信息
2.表单的组成
- 表单域
- 表单控件(表单元素)
- 提示信息
3.input标签
type属性:
属性值 | 描述 |
---|---|
button | 可点击按钮 |
chechbox | 复选框 |
file | 文件 |
hidden | 隐藏字段 |
image | 定义图像形式的提交按钮 |
password | 密码框 |
radio | 单选框 |
reset | 复位按钮 |
submit | 提交按钮 |
text | 文本框 |
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<form>
<div>
<input type="button" value="注册" name="register" />
</div>
<div>
<input type="checkbox" name="hobby" checked="checked">吃饭
<input type="checkbox" name="hobby" checked="checked">睡觉
<input type="checkbox" name="hobby">打豆豆
</div>
<div>
<input type="file" name="file">
</div>
<div>
<input type="hidden" name="id">
</div>
<div>
<input type="image" name="image" src="images/down.jpg">
</div>
<div>
<span>密码:</span><input type="password" name="pwd">
</div>
<div>
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
</div>
<div>
<input type="reset" value="复位">
</div>
<div>
<input type="submit" value="提交">
</div>
<div>
<span>姓名:</span><input type="text" name="name">
</div>
</form>
</body>
</html>
效果:
4.label标签
作用:
用于绑定一个表单元素, 当点击
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label标签</title>
</head>
<body>
<form action="#" method="GET">
<input type="radio" name="sex" id="man" checked="checked"/> <label for="man">男</label>
<input type="radio" name="sex" id="woman" /> <label for="woman">女</label>
</form>
</body>
</html>
效果:
5.select标签
说明:
- select 中至少包含一对option 。
- 在option 中定义 selected =“ selected " 时,当前项即为默认选中项。
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select标签</title>
</head>
<body>
<form action="#">
<select name="type">
<option value="a">选项1</option>
<option value="b" selected="selected">选项2</option>
<option value="c">选项3</option>
</select>
</form>
</body>
</html>
效果:
6.textarea标签
作用:
创建多行文本输入框
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>textarea标签</textarea></title>
</head>
<body>
<form action="#">
<textarea name="option" id="" cols="30" rows="10">文本域</textarea>
</form>
</body>
</html>
效果:
7.文章参考链接
a. https://www.boxuegu.com/
b. https://www.cnblogs.com/yeminglong/archive/2013/01/05/2845164.html