HTML - 表单属性：初学者指南

你好，未来的网页开发者们！今天，我们将深入HTML表单属性的精彩世界。如果你是新手，不用担心——我将像多年来指导我的学生一样，成为你在这段旅程中的友好向导。那么，拿起你最喜欢的饮料，让我们一起开始吧！

HTML - Form Attributes

表单属性是什么？

在我们跃入深水区之前，让我们从基础开始。表单属性是我们给HTML表单的特殊指令，以控制它们的行为。把它们想象成让你的表单按照你想要的方式工作的秘密酱料。

想象你正在烘烤蛋糕。表单是你的蛋糕糊，属性是使你的蛋糕独特的特殊成分——也许是些香草提取物或者巧克力豆。就像这些成分改变了你的蛋糕的口味一样，表单属性改变了你的表单的工作方式。

action 属性

action 属性就像告诉你的表单要将信息发送到哪里。它是用户输入的数据的目的地。

这里有一个例子：

<form action="/submit-form">
<!-- 表单元素放在这里 -->
</form>

在这种情况下，当有人提交表单时，所有数据将被发送到 "/submit-form"。这就像在你邮寄信件之前在信封上写地址。

method 属性

method 属性决定了数据如何发送。主要有两种方法：GET 和 POST。

<form action="/submit-form" method="POST">
<!-- 表单元素放在这里 -->
</form>

把 GET 想象成发送明信片——信息对所有人可见。POST 更像发送密封的信件——信息对窥探的眼睛隐藏。

target 属性

target 属性决定表单提交的响应将在哪里显示。这就像在选择点击链接时打开哪个窗口。

<form action="/submit-form" method="POST" target="_blank">
<!-- 表单元素放在这里 -->
</form>

在这个例子中，_blank 意味着响应将在新标签或窗口中打开。当你想要保持原始页面打开时，这很完美。

novalidate 属性

有时，你可能想要关闭浏览器内置的表单验证。这时 novalidate 就派上用场了。

<form action="/submit-form" method="POST" novalidate>
<!-- 表单元素放在这里 -->
</form>

通过添加 novalidate，你告诉浏览器：“别担心，我会自己处理验证！”这就像在文字处理器中关闭拼写检查。

autocomplete 属性

autocomplete 属性就像有一个记得你之前输入内容的助手。

<form action="/submit-form" method="POST" autocomplete="on">
<!-- 表单元素放在这里 -->
</form>

有了 autocomplete="on"，浏览器将建议之前输入的值。这对用户来说非常方便，就像有一个私人秘书！

enctype 属性

最后但同样重要的是 enctype 属性。这个有点技术性，但把它想象成为你的信件选择正确的信封。

<form action="/submit-form" method="POST" enctype="multipart/form-data">
<!-- 表单元素放在这里 -->
</form>

enctype="multipart/form-data" 在你的表单包括文件上传时尤其重要。这就像在邮寄易碎物品时使用加垫的信封。

把它们全部放在一起

现在我们已经单独探索了每个属性，让我们看看它们在一个真实世界示例中如何一起工作：

<form action="/submit-application" method="POST" target="_blank" novalidate autocomplete="on" enctype="multipart/form-data">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>

<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" required>

<label for="resume">上传简历：</label>
<input type="file" id="resume" name="resume">

<input type="submit" value="提交申请">
</form>

在这个示例中，我们创建了一个求职申请表单。让我们分解一下：

表单数据将被发送到 "/submit-application"
我们使用 POST 来保持数据私密
响应将在新标签中打开
我们关闭了浏览器验证以使用自己的
启用了自动完成以帮助用户更快填写表单
我们使用 multipart/form-data 因为有文件上传

表单属性一览

这里有一个方便的表格，总结了我们所讨论的所有属性：

属性	目的	示例
action	指定要将表单数据发送到哪里	action="/submit-form"
method	指定如何发送表单数据	method="POST"
target	指定在哪里显示响应	target="_blank"
novalidate	关闭浏览器验证	novalidate
autocomplete	启用/禁用表单自动完成	autocomplete="on"
enctype	指定如何编码表单数据	enctype="multipart/form-data"

就这样，伙计们！你们刚刚完成了HTML表单属性的旋风之旅。记住，熟能生巧，所以不要害怕在你的表单中尝试这些属性。在你意识到之前，你将能够创建出不仅功能齐全，而且用户友好且高效的表单。

快乐编码，愿你的表单总是提交成功！

Credits: Image by storyset