As far as I am aware, a <form></form> tag is supposed to be invisible as part of a webpage, and that when designing a form, one should use div tags (or equivalent) to represent the physical form structure.
Is it acceptable (according to W3C standards) to apply CSS to a <form></form> tag? and can anyone point me in the right direction for literature on this issue?
As far as I am aware, a
<form></form>tag is supposed to be invisible as part of a webpage
It is supposed to represent a form. That is definitely visible thing
and that when designing a form, one should use div tags (or equivalent) to represent the physical form structure.
<div> is the tag of last resort. Use it when something more suitable (like <form> or <fieldset>) does not exist.
Is it acceptable (according to W3C standards) to apply CSS to a
<form></form>tag?
Baring bugs in browsers, it is acceptable to style any element in the document.
and can anyone point me in the right direction for literature on this issue?
Since there is nothing special about the element, it does not need specific documentation.
The closest I can think of is this warning from the CSS 2.1 specification:
Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.
… but relating that to the question is a stretch since you are suggesting using semantic markup, but adding unnecessary divs purely for styling.
A form is just another element of the page (think of it as a div which can contain input/other elements). You can style it with CSS just like any other element - it's all completely valid.
Styling the form-tag in some occasions can be usefull.
Just make sure that you make the form-tag act as if it was a layer.
No need to do
<div id="myform"><form></form></div>
Just do form {display:block;} and it acts as if it is a div.
On the semantics and since you're asking to do it properly: A common mistake is to use divs for labels and then lose your usability.
Use HTML to what it is designed for! As an example this is how a basic form would look like in HTML according to the standard.
<form method="post" action="http://www.someurl.com/formHandler.php">
<fieldset>
<legend>Personal info</legend>
<label for="name">Name:</label>
<input type="text" id="name" class="text" />
<label for="email">Email</label>
<input type="text" id="email" class="text" />
</fieldset>
<fieldset>
<legend>Optional</legend>
<label for="info">Comments?</label>
<textarea id="info"></textarea>
<input type="submit" value="submit" class="submit" />
</fieldset>
</form>
Using HTML like this allows the user to click the labels or press tab in order to gain focus on the desired field.
Styling this can be tricky, however you don't need a lot of code if you know what you're doing.
form { display:block; background-color: #9e9e9e; padding: 20px; width: 540px; /*200 + 300 + (20 * 2)*/ }
legend { font-weight: bold; }
label { display: inline-block; width: 200px; float: left; clear: left; }
input.text { display: block; width: 300px; float: left; }
input.submit { margin:20px 0 0 200px; width: auto; }
example: http://jsfiddle.net/tive/BB85w/
A form element can be styled like any other element, and it has some default styling in browser default style sheets, see Default style sheet for HTML 4 in CSS 2.1 spec. The most important feature is that by default, a form element is rendered as a block with top and bottom margins corresponding to an empty line. (Browsers actually suppress these margins in some cases, though.)
I'd say yes, you can style the form just like you can style any other tag. I'd rather style the form element than add an extra div as I try to keep my HTML minimal.
Also, SitePoint has a relatively recent article about styling forms which starts with styling the form tag itself.
来源：https://stackoverflow.com/questions/11614732/css-styling-of-form-tags