CODEWITHSUNDEEP
htmlhttpforms
flybywire
flybywire

Reputation: 273882

html: what effects does 'form' have on the layout of a page

I thought that an html form has no effect on the layout of a page, and that it is just a way to group fields to send their values to the server in a single request.

However, I notices that when I remove the form tag, the layout changes.

Where can I find an explanation of visual effects of the <form> tag?

Upvotes: 2

Views: 2568

Answers (5)

Ilya
Ilya

Reputation: 61

The form element is a block-level element, so the element in itself will have layout properties.

Different browsers have different default styles (margin, padding, etc.) to form controls. One way to get around this is to use CSS resets, such as Eric Meyer's classic reset.css or a more styled CSS framework such as Tripoli.

Note that form controls are perfectly valid outside the form tag, for example in use as interface controls.

While the W3C documentation isn't always easy to read, it is the definitive text on HTML. See Forms in HTML documents.

Upvotes: 1

prostynick
prostynick

Reputation: 6219

Form is a html block element. It acts like every html block. It can have some default style applied by default browser style, so it can be various depending on browser.

Upvotes: 0

Rowan
Rowan

Reputation: 5727

If you want to make sure you have a consistent layout with and without forms, use the following CSS:

form{
    margin:0;
    padding:0;
    display:block;
    }

Upvotes: 1

gravelpot
gravelpot

Reputation: 1767

<form> is a block-level element, so at the very least, it will appear on its own line. It probably also has some basic margin and padding attributes as a default. I would recommend using Firebug to inspect the form element and see what it's layout properties are.

You can easily adjust the appearance of <form> through either an external css file, css in your document HEAD, or inline styles on the form, like this:

<form style="margin: 0; padding: 0; background-color: #cc5500;">
...
</form>

Upvotes: 6

Quentin
Quentin

Reputation: 944076

Most browsers have DOM inspector tools that will show you the styles applied to a given element. Firebug is a good example.

In short, a form is an element that has display: block and may have margins / padding. (Plus whatever styles get applied from any author or user stylesheets)

Upvotes: 1

Related Questions