Can you nest HTML forms?

HTML Web Development Front End Technology

In HTML, we cannot nest HTML forms, but we can add multiple forms. Let us see an example of multiple forms, wherein we will add more than one form, upload buttons and multiple Submit buttons.

First, we will set the 1^st form. This allows uploading only a single file −

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

Just after that, we have used <hr> and then comes the 2^nd form. This allows uploading multiple files −

<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>

Example

On a single web page, both the forms will work perfectly with two separate submit buttons. Let us now see the complete example −


<!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>