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?
<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>
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)
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 .
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;
}
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.