Clever Geek Handbook

Html: what effects do "shape" have on page layout

I thought that the html form does not affect the page layout and that it is just a way to group fields to send their values ​​to the server on a single request.

However, I notice that when the form tag is removed, the layout changes.

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

+2


source to share


5 answers


<form>

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

You can easily customize the look <form>

through external css file, css in HEAD document, or inline styles on the form, for example:



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


source


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 with display: block

and can have fields / padding. (Also, any styles apply to any user or user style)

+1


source


The element form

is a block level element, so the element itself will have layout properties.

Different browsers have different default styles (margins, padding, etc.) for rendering controls. One way to get around this is using CSS resets like Eric Meyer's classic reset.css or a more styled CSS framework like Tripoli .

Note that form elements work great outside of the tag form

, for example they are used as interface controls.

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

+1


source


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;
    }
0


source


Form is an html block element. It acts like every html block. It may have a default style applied to the default browser style, so it may differ from browser to browser.

0


source






More articles:


All Articles