Is It Correct to Use Div Inside Form

Is it correct to use DIV inside FORM?

It is totally fine .

The form will submit only its input type controls ( *also Textarea , Select , etc...).

You have nothing to worry about a div within a form.

Is it correct to use FORM to the INPUT that is inside DIV?

form is a block-level element in HTML. Typically, block-level elements allow both block-level and inline children.

Both div and span are valid children of form.

This link would help you to understand better

http://www.w3.org/TR/html4/struct/global.html#h-7.5.3

but You can always use W3C Markup Validation Service to check your html.

Hope this would help. You can also read about Box Modle for more understanding on this subject.

When should I use forms over standard div?

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.

Crazy behavior with div inside Form

The problem is with the floating <label> elements. You need to clear your floats otherwise your layout issues will persist.

I have created a JsFiddle with an example of clearing by adding .clear {clear: both;} as a CSS class and applying <div class="clear"></div> to the appropriate areas.

Is putting a div inside an anchor ever correct?

Depending on the version of HTML you're catering to:

• HTML 5 states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".

• HTML 4.01 specifies that <a> elements may only contain inline elements. A <div> is a block element, so it may not appear inside an <a>.

  Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine.

  However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot.

Is <div> inside <label> block correct?

No, HTML does not allow a <label> to contain a <div>.

---

See the specification for the label element:

Content model:
Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.

Where phrasing content links to:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

a abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr text

Is div inside list allowed?

Yes it is valid according to xhtml1-strict.dtd. The following XHTML passes the validation:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
</head>
<body>
<ul>
  <li><div>test</div></li>
</ul>
</body>
</html>

div inside form rails

Fix the formatting and indentation of your ERB and the problem should become obvious: opening tags (including <%= ... do %>) must match their closing tags (including <% end %>). You can't:

<div>
    <form>
    </div>
</form>

you need to:

<div>
    <form>
    </form>
</div>

Your <form> opens one <div>

<%= simple_form_for(current_user.posts.new, :remote => true ,:html => { :multipart =>    true } ,:class=>"form-horizontal" ) do |f| %>
    <div class="field">

and then tries to close four of them:

</div>
</div>
</div>
</div>

When the browser sees that invalid HTML, it will attempt to fix it by closing the <form> behind your back and it will pretend that you said:

</div>
</form>
</div>
</div>

Once that happens, your form is broken and nothing works the way you're expecting it to.

Fix your tag nesting so that everything is closed in the opposite order that the tags are opened. And start formatting your code properly so that the structure is obvious, the computer won't care but you will.

Is it possible to code a form over multiple divs?

You can do this

<div>
  <div>
  <form>
  </form>
  </div>
</div>

You can also do this

<form>
  <div>
  </div>
  <div>
  </div>
</form>

But you cannot do this

<form>
  <div>
</form>
  </div>

Browser won't show any errors, you might have different output. Each browser handles these error diffrently.

Embedding a <form> inside a <div>

You can do it by adding below css,

#game-chat-input {
  width: 100%;
  box-sizing: border-box;
}

and updating other css as per snippet. For this you need to make that form div relative to parent. This will grab the parent width.

#game-chat-div {  width: 500px;  height: 15em;  border-style: double;  margin: 5px;  position: relative;  left: 0;  bottom: 0;}
#chat-form {  position: absolute;  left: 0;  bottom: 0;  width: 100%;  padding: 2px;  box-sizing: border-box;}#game-chat-input {  width: 100%;  box-sizing: border-box;}

<body><div id='game-chat-div'>  <div id='game-chat-messages'>Hello</div>  <form id='chat-form'>    <input id='game-chat-input' type='text'>  </form></div>

---

Related Topics