在上一个单元中,您学习了如何使用 <form>
元素。在此单元中,您将了解表单的工作原理以及何时使用表单。
您应该使用 <form>
元素吗?
您并非总是需要将表单控件放在 <form>
元素中。例如,您可以提供 <select>
元素供用户选择商品类别。此处不需要 <form>
元素,因为您不会在后端存储或处理数据。
不过,在大多数情况下,当您存储或处理来自用户的数据时,应使用 <form>
元素。正如您将在本单元中学习的那样,使用 <form>
可以从浏览器获取许多内置功能,否则您将需要自行构建这些功能。<form>
还默认内置了许多无障碍功能。如果您希望避免在用户提交表单时重新加载页面,仍然可以使用 <form>
元素,但应使用 JavaScript 增强该元素。
<form>
的工作原理是什么?
您已了解 <form>
是处理用户数据的最佳方式。您现在可能想知道,表单的工作原理是什么?
<form>
是交互式表单控件的容器。
<form method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<button formaction="/name">Save</button>
</form>
如何提交表单?
当您提交 <form>
时,浏览器会检查 <form>
属性。数据将根据 method
属性以 GET
或 POST
请求的形式发送。如果没有 method
属性,则系统会对当前页面的网址发出 GET
请求。
如何访问和处理表单数据?
提交的数据可以由前端的 JavaScript 使用 GET
请求处理,或者由后端的代码使用 GET
或 POST
请求进行处理。详细了解请求类型和传输表单数据。
提交表单后,浏览器会向网址(即 action
属性的值)发出请求。此外,浏览器还会检查 Submit 按钮是否具有 formaction
属性。如果是这种情况,系统会使用该位置定义的网址。
此外,浏览器还会在 <form>
元素上查找其他属性,例如,确定应验证表单 (novalidate
)、是否使用自动补全 (autocomplete="off"
) 或应使用哪种编码 (accept-charset
)。
尝试构建一个表单,用户可以在其中提交他们喜欢的颜色。
数据应以 POST
请求的形式发送,处理数据的网址应为 /color
。
一种可能的解决方案是使用以下表单:
<form method="post" action="/color"> <label for="color">What is your favorite color?</label> <input type="text" name="color" id="color"> <button>Save</button> </form>
确保用户可以提交您的表单
提交表单的方法有两种。
您可以点击 Submit 按钮,或在使用任何表单控件时按 Enter
。
您可以通过多种方式添加 Submit 按钮。
一种方法是在表单内使用 <button>
元素。只要您不使用 type="button"
,它就可以用作 Submit 按钮。另一种方法是使用 <input type="submit" value="Submit">
。
第三种方法是使用 <input type="image" alt="Submit" src="submit.png">
,创建一个图形化的 Submit 按钮。不过,现在您可以使用 CSS 创建图形按钮,不建议使用 type="image"
。
允许用户提交文件
必要时,使用 <input type="file">
允许用户上传和提交文件。
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>
首先,将具有 type="file"
的 <input>
元素添加到您的表单。如果用户应能够上传多个文件,请添加 multiple
属性。
为确保用户可以上传文件,您还需要完成一项更改,请在表单上设置 enctype
属性。
默认值为 application/x-www-form-urlencoded
。
<form method="post" enctype="multipart/form-data">
…
</form>
为了确保文件可以提交,请将其更改为 multipart/form-data
。
如果不使用此编码,就无法使用 POST
请求发送文件。
检查您的掌握程度
测试您对表单元素的了解程度
提交文件需要为 enctype
设置什么值?
multipart/form-data
multipart/form-files
form-data
form-files
可以在没有 <form>
的情况下发送用户数据吗
如何提交 <form>
?
<button>
。Enter
键。<input type="image">
。