知识点一:
表格标签:
场景:在网页中以表格(行、列)形式整齐展示数据,如:班级表。
标签:
知识点二:
表单标签:
- 场景:在网页中主要负责数据采集功能,如 注册、登录等数据采集。
- 标签:<form>
- 表单项:不同类型的 input 元素、下拉列表、文本域等。
- <input>:定义表单项,通过type属性控制输入形式
- <select>:定义下拉列表
- <textarea>:定义文本域
- 属性:
- action:规定当提交表单时向何处发送表单数据,URL
- method:规定用于发送表单数据的方式。GET、POST
<!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>HTML-表单</title>
</head>
<body>
<!--
form表单属性:
action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
method: 表单的提交方式 .
get: 在url后面拼接表单数据, 比如: username=Tom&age=12 , url长度有限制 . 默认值
post: 在消息体(请求体)中传递的, 参数大小无限制的.
-->
<form action="" method="get">
用户名: <input type="text" name="username">
年龄: <input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
下面展示 method发送数据的两种方式:
GET:
POST:
可以看到post提交不在URL后面显示,打开发者工具可以看到提交的内容。
知识点三:
表单标签-表单项:
- <input>:表单项,通过type属性控制输入形式。
- <select>:定义下拉列表,<option> 定义列表项。
- <textarea>:文本域
举例说明: