您能嵌套 HTML 表单吗?


在 HTML 中,我们无法嵌套 HTML 表单,但可以添加多个表单。让我们看一个包含多个表单、上载按钮和多个提交按钮的示例。

首先,我们将设置第一个表单。这仅允许上传单个文件——

<form action="/details.php"> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"><br><br> <input type="submit"> </form>

紧随其后,我们使用了<hr>,再是第二个表单。这允许上传多个文件——

<form action="/details.php"> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile" multiple><br><br> <input type="submit"> </form>

示例

在一个网页上,两个表单都可使用两个单独的提交按钮完美工作。现在让我们看一个完整的示例——

<!DOCTYPE html> <html> <body> <h1>Resume</h1> <p>Upload the resume:</p> <form action="/details.php"> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"><br><br> <input type="submit"> </form> <hr> <p>Upload multiple project files:</p> <form action="/details.php"> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile" multiple><br><br> <input type="submit"> </form> </body> </html>

输出

点击第一个表单的“选择文件”——

选择任何文件并点击“打开”。我们选择“简历.docx”,下方会出现同样的文件——

以上,在第一个表单下方可见“简历.docx”。

现在,点击第二个表单中的“选择文件”,并选择多个文件,如下所示——

我们在上面选择了“下载.csv”和“简历.docx”,下方可见同样的文件——

同上,在第二个表单下方,可见“2 个文件”字样。

更新于: 2022-11-01

2000+ 次浏览

开启 事业

完成课程以获得认证

开始学习
广告
© . All rights reserved.