QD1-P13 HTML 表单标签(form)

发布于:2024-10-12 ⋅ 阅读:(7) ⋅ 点赞:(0)

本节学习 HTML 表单标签:form


本节视频

www.bilibili.com/video/BV1n64y1U7oj?p=13


知识点1:form标签的用途

form​ 标签在HTML中用于创建一个表单,它允许用户输入数据,然后可以将这些数据发送到服务器进行处理。以下是form​标签的一些基本属性和用法:


知识点2:基本语法

<form action="服务器端脚本的URL" method="提交方法" enctype="编码类型">
  <!-- 表单元素(如:输入框、单选框、复选框、提交按钮等) -->
</form>

示例HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P13-表单标签form</title>
	</head>
	<body>
		<form action="http://www.baidu.com">
			姓名:<input type="text" />
			<button>提交</button>
		</form>
	</body>
</html>

预览

Clip_2024-10-10_22-43-08


知识点3:常用属性

  • action:表单数据提交到指定URL。

比如,

<form action="http://www.baidu.com">

这是要提交到百度服务器


  • method:提交方式。

    • GET​:表单数据在URL中可见。

    recording

    • POST​:表单数据不会出现在URL中,适合包含敏感信息的表单。

    recording


  • name:要提交的参数的名字。

例如

<input type="text" name="uname" />

  • target:提交数据时打开窗口的方式。

    • _self​ 当前页面
    • _blank​ 新页面
  • style属性:设置行内样式

  • class属性:设置元素的样式名

这几个属性在前面的小节中已经接触过了。


知识点4:POST请求需要服务器支持

HTML

<form action="http://www.baidu.com" method="post" target="_blank">
	姓名:<input type="text" name="uname" />
	<button>提交</button>
</form>

提交地址是百度,瞎填的。百度服务器不理会咱的请求,所以就看到了这个错误提示画面。

Clip_2024-10-10_23-20-47

知识点5:GET和POST的区别

  1. GET请求的参数会显示在地址栏URL中,POST不会
  2. POST请求需要服务器支持
  3. POST请求更安全
  4. GET请求更快(GET会使用缓存,POST无缓存)

表单需要结合表单元素使用。下一节学习表单元素。