Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 700
Ji_in_coding Avatar asked Nov 18 '14 19:11

Ji_in_coding


People also ask

Can we use input tag outside the form tag?

Yes, you can have a valid input without a form.

Why should you use form elements instead of custom coding data inputs in Javascript?

If something is a form, use a form element. This helps assistive devices like screen readers better understand the content of the page and give the person using them more meaningful information.

Do inputs have to be inside form?

The consensus seems to be that FORM tags are no longer required when you simply want to render a form input control. If all your input field is doing is providing a UI (user interface) hook for interactions, then you can put the input fields into the HTML without including a FORM tag.

Can you use input outside of form?

Yes, it is okay. If you want it to submit a form then just tell it which form to submit with the form attribute. It has no semantic meaning in using an input submit buttom outside a form. You can instead use other tags to acheive the same.


2 Answers

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.

like image 131
Jukka K. Korpela Avatar answered Oct 14 '22 13:10

Jukka K. Korpela


Yes, you can definitely do this as of HTML5, using the form attribute on inputs that are located outside the form element; just like you did.

For more details and examples, see HTML <input> form Attribute at W3 Schools.

like image 3
Julien P Avatar answered Oct 14 '22 13:10

Julien P