CODEWITHSUNDEEP
html
thinkanotherone
thinkanotherone

Reputation: 3145

When should I use forms over standard div?

What would be a valid scenario to use <forms> instead of <div> ? I never used it myself, but people do use it.

Am I missing something that form has to offer , other than the semantic argument ?

Upvotes: 2

Views: 6581

Answers (6)

Web Dev
Web Dev

Reputation: 1

Certainly there is a difference when using web frameworks (like Angular) as opposed to plain javascript. The usual argument made by people preferring semantics is that form will enable a browser to know that the web page has a form, which is vaguely described by a div. And if you are using Vanilla JS, prefer using semantic elements. But in case of frameworks, there's more to it than semantics. If you have gone through Angular's Tour of Heroes tutorial, you will find this piece of code in the hero template:

<div>
  <label for="name">Hero name: </label>
  <input id="name" [(ngModel)]="hero.name" placeholder="name">
</div>

Try changing the div to form (better semantically) here. You will notice that ngModel doesn't work as expected. The input element and the property hero.name seem to have no relationship even though 2-way binding is used. Only when div is used, the 2-way binding works. It may be a bug, but my point is writing semantically correct html may not always be a good idea. div has been used since a long time. Every framework has to support it. Not so for the case of form.

Also, every block element is based on div. So if some semantic block element breaks your code, use div.

Upvotes: 0

Eduardo Naveda
Eduardo Naveda

Reputation: 2081

They have completely different purposes, you see, forms (the <form> html tag Read more) are containers for a series of elements (textfields, textareas, checkboxes) used to enter user input and send it to the server, whereas divs (<div> Read more) are generic elements used for organization or stylization, divs should be used when no other html element provides a meaningful option for your markup.

Upvotes: 2

m59
m59

Reputation: 43745

For form-like things, <form> IS the standard.

a div has no semantic meaning. It's basically an element used when something in the document can't be classified any other way, like an additional element needed to achieve a desired layout - though the goal is to avoid that. In the past, it has been more needed because there were less semantic elements available.

A form does have a semantic meaning and should be used as a form - an area that accepts user input. This is a quote from the w3 documentation: (src..)

An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)

Forms also have default behaviors, such as buttons "submitting" the form, which will refresh/redirect the page, based on the action and method attributes. While it is more modern to use ajax for form submission and disable that behavior, the form element is still the semantically appropriate element for form-like things. If javascript is disabled, the form will fallback to a standard submission (action/method), so forms are still used for that. You can also access forms in javascript with var myVar = document.forms.

Upvotes: 4

lagweezle
lagweezle

Reputation: 516

From the W3C HTML 5 spec:

The form element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.

If you aren't using the form element to contain form-associated elements, a different element should be used. If one exists that is meant for the type of information you are wrapping, use that, otherwise use div or span as necessary based on the type of formatting you will be doing with the CSS.

Remember that HTML is for what KIND of information you are presenting, while CSS is for the presentation and styling of that information.

Upvotes: 0

BrettH
BrettH

Reputation: 189

Forms are generally used for submitting data to a back end - a 

<input type=submit />

within the bounds of the forms causes it to be posted to the url you specify in the method tag of your actual form.

Upvotes: 0

Quentin
Quentin

Reputation: 943480

Use a form when you have a logical set of form controls (inputs, selects, buttons, etc) to:

  • Group them
  • Specify where the data entered into them should be submitted to and in what form

Use a div to create a group of elements and/or text when HTML doesn't provide an element with appropriate semantics.

Upvotes: 2

Related Questions