Ji_in_coding Ji_in_coding - 6 months ago 14
HTML Question

Is it good practice to use the form attribute and put input elements outside form tag in HTML?

I just noticed an interesting way of placing input elements outside of form tag today.

<html>
<!-- the form element -->
<form id="testform" method="post" action="index.asp">
<label for="text1">Text: </label>
<input type="text" id="text1" name="text1" />
<button type="submit">Submit</button>
</form>

<!--- element outside form tag -->
<label for="text2">Additional Text: </label>
<input type="text" id="text2" name="text2" form="testform" />

</html>


I am just wondering if it is common to practice to do this. Should this method be avoided?
Tried googling for similar discussions but i really don't know how to phrase this.

Answer

It is not common practice. In most cases, it offers no benefits but has a drawback: some old browsers do not support the form attribute, so things just don’t work on them.

An input element outside a form element has always been permitted. Such an element just won’t participate in any form submission, if it has no form attribute. But it can be used with client-side scripting.

The form attribute associates, in supporting browsers, the element with a form just as if the element were inside the form. This can be useful in complicated cases where e.g. one row of a table should contain fields of a form, another row fields of another form, etc. You cannot wrap just one row inside a form, and here the attribute comes to rescue: you put a form element inside one cell of the row and refer to that element in fields in other cells with the form attribute.