Welcome to WebmasterWorld Guest from 34.204.171.108

Forum Moderators: not2easy

Is it OK to style a <form> element?

     
7:24 pm on Apr 15, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1193
votes: 119


I've never styled a <form> element in the past, I've always relied on something like this:

<form action="whatever.php" method="GET">
<div style="background-color: #F2F2F2; padding: 20px">
blah blah blah
</div>
</form>


Is there any particular reason why I should NOT apply the style directly to the <form>, though?

<form action="whatever.php" method="GET" style="background-color: #F2F2F2; padding: 20px">
blah blah blah
</form>
7:51 pm on Apr 15, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4523
votes: 350


I have never seen CSS applied to a form - doesn't mean you can't try it.

Most people will style the form's container but you have the form outside its container in your example. You can style using form fields to style specific fields using:
input[type=password] 
to style password fields
input[type=text] 
to style all or some text fields
input[type=number] 
to style number fields, or style the "textarea" elements of the form.
8:53 pm on Apr 15, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15892
votes: 876


Is there any particular reason why I should NOT apply the style directly to the <form>, though?
I donít see anything wrong with it. Just because the elements <div> and <span> were created specifically as armatures to hang CSS on, doesnít mean you canít also apply styles directly to elements that already exist anyway.

Why not experiment? Put a div around your form, and a second div directly inside the form. Now youíve got three possible places to apply your styles. Look at whatís different, depending on which of those three elements the style is attached to.
11:39 pm on Apr 15, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1193
votes: 119


I've never seen it used, either, but as I'm rebuilding I realized that it's a recurring thing where I have a styled DIV immediately before or after a FORM. I just can't think of any reason why I couldn't have styled the FORM directly.

I did a test with a DIV within the FORM, a DIV surrounding the FORM, and styling the FORM directly. All 3 appear to be identical:

[jsfiddle.net...]

So unless it fails on older browsers or something, I can't figure out why no one is doing it.
12:22 am on Apr 16, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10469
votes: 1099


If it can be coded as <something> you can apply whatever styling you desire.

Give it a try!
12:31 am on Apr 16, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10469
votes: 1099


I can't figure out why no one is doing it.


In most cases, one keeps interactive tools familiar to the user --- form elements looking "normal". This promotes assurance/use with the visitor.

Sometimes we can get too clever. :)