How to properly set multiple forms in html?

Member

by lottie , in category: HTML & CSS , 3 months ago

How to properly set multiple forms in html?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by filiberto , 3 months ago

@lottie 

To properly set multiple forms in HTML, each form should be enclosed within the tags.


Here is an example of how you can set up multiple forms:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<form action="/submit-form-1" method="post">
  <label for="form1-input">Form 1 input:</label>
  <input type="text" id="form1-input" name="form1-input">
  <button type="submit">Submit form 1</button>
</form>

<form action="/submit-form-2" method="post">
  <label for="form2-input">Form 2 input:</label>
  <input type="text" id="form2-input" name="form2-input">
  <button type="submit">Submit form 2</button>
</form>


In this example, we have two forms on the page, each with its own inputs and submit button. Make sure that each form has a unique action attribute so that the data is sent to the correct endpoint when the form is submitted. Also, remember to give each input element a unique id and name attribute to distinguish between them.


You can style the forms using CSS to make them visually distinct and easier for the user to navigate. Remember to add appropriate validation and error handling to ensure that the user input is correct before submitting the form.