【2024】前端学习笔记5-表单标签使用

表单是网页提供的一种交互式操作手段，主要用于采集用户输入的信息。

1.表单框架：form标签

<form>标签是 HTML 表单的基础框架，所有的表单元素都被包含在这个标签内部。

它规定了表单数据如何被提交以及提交到哪里。

<form> </form>

1.1.action属性：目标指向

action属性明确了表单数据的提交目的地。

当我们创建一个表单时候，可能会有<form action = "url">这样的设置。意味用户点击提交后，输入的信息将发送给指定的地方进行处理。

<form action="url"> </form>

1.2.method属性：提交方式

method属性决定了表单数据的传输方式，主要有两种常见类型：get和post。

get方法：

• 将表单数据附加在 URL 后面发送给服务器
• 适合于简单的、非敏感数据的传输
• 对于数据量有一定的限制

post方法：

• 将表单数据放在 HTTP 请求体中发送
• 适合大量数据或包含敏感信息的数据，信息不会暴露在url中，提高安全性

<form action="url" method="post"> </form>

1.3.id属性：唯一标识

id属性为HTML元素提供了唯一的标识符。
为特定表单元素赋予id可以方便的进行表单验证和数据处理。

<form action="url" method="post" id="login"> </form>

1.4.placeholder属性：提示文字

可帮助用户更快理解表单的要求，减少输入错误和困惑

<form action="url" method="post" id="login" placeholder="请输入用户名"> </form>

2.input标签

<input>标签是 HTML 表单中最为灵活多变的元素，通过不同的type属性值，它可以呈现出各种各样的输入形式。

除以下列出类型外，还有number数字类型、range滑动条、date日期等类型也很不错，请自行尝试。

<input>

2.1.text类型：基本文本输入

用于创建一个单行文本输入框，例如输入用户名

<input type = "text" name = "username" id = "username">

2.2.password类型：密码输入

使用password类型时，输入的密码为密文方式

<input type = "password" name = "password" id = "password">

2.3.radio类型：单选按钮

radio类型的标签用于创建单选按钮。当有多个选项且只能选择其中一个时，就可以使用radio按钮。

<input type="radio"