Is it OK to style a <form> element?

Forum Moderators: not2easy

Message Too Old, No Replies

Is it OK to style a <form> element?

csdude55

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

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>

not2easy

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

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.

lucy24

8:53 pm on Apr 15, 2019 (gmt 0)

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.

csdude55

11:39 pm on Apr 15, 2019 (gmt 0)

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.

tangor

12:22 am on Apr 16, 2019 (gmt 0)

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

Give it a try!

tangor

12:31 am on Apr 16, 2019 (gmt 0)

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. :)