Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Forms can be boring at times with their default styling, I agree. CSS comes to the rescue once again by spicing it up a bit.

    A regular form
    So ... lets start with coding our form

    HTML Code:
    <form action="dothis.php" method="post">
    
      <p><label for="name">Name:</label><br />
      <input type="text" name="name" id="name" title="Type you name" /></p>
    
      <p><label for="website">Website:</lable><br />
      <input type="text" name="website" id="website" title="Type in you website" />
    
      <p><label for="markup">Markup</label><br />
      <select name="markup" id="markup">
        <option value="html">HTML</option>
        <option value="xhtml">XHTML</option>
      </select></p>
    	
      <p><label>CSS?</label><br />
      <input type="radio" name="css" value="yes"> Yes<br />
      <input type="radio" name="css" value="no"> No</p>
    
      <p><label for="description">Describe your site</lable><br />
      <textarea name="description" id="description" cols="30" rows="10"></textarea></p>
    
      <input type="submit" value="sumbit" name="submit" />
    </form>
    Here's what it would look like in your browser (see attachment form-1.jpg)

    CSS to the rescue!
    If you've been playing around with CSS a bit you'll notice that you can do ALOT of nifty things with backgrounds and changing fonts (all the while using common fonts) and colors. Don't think that these changes stops at simple text withing div, span or p elements. Oh no my friend! You can style input elements with CSS just like anything else. So ... here we go!

    input
    We'll start by adding a border and a light background to the input elements in our form using CSS

    CSS:
    HTML Code:
    input {
      border: 1px solid #000;
      background-color: #ccc;
    }
    Nothing is to be changed in the form at all. Since we are using the "input" selector, it will make the changes to "all" input elements on our page.

    Here's what this simple change do (see attachement form-2.jpg)

    You'll notice that the radio buttons didn't change at all even though they are "input" elements. Radio buttons and checkboxes are the only form elements that cannot be changed with css.

    select and textarea
    To get the same look with the select and textarea element, we could do this in our css

    CSS:
    HTML Code:
    select {
      border: 1px solid #000;
      background-color: #ccc;
    }
    textarea {
      border: 1px solid #000;
      background-color: #ccc;
    }
    but why duplicate code. Let's save a few bytes and put it all in one like this

    CSS:
    HTML Code:
    input, select, textarea {
      border: 1px solid #000;
      background-color: #ccc;
    }
    Again, no changes need to be made to the html. Now we're getting somewhere. See what the form looks like now (see attachement form-3.jpg)

    label
    Those labels are kind of boring with the regulat text. Let's bold them up and change the font.

    CSS:
    HTML Code:
    label {
      font-family: Tahoma, Geneva, sans-serif;
      font-weight: bold;
      font-size: 14px;
    }
    Here's what the labels look like (see attachment form-4.jpg) Ahhh... much better.

    That silly looking button
    Now ... you may notice that the input button looks like those input boxes. Well... it should because it is an input element but ... it's not very distinguishable is it!? We'll fix that by changing the border, font and background color with CSS by creating a class for our button and applying it to our input.

    CSS:
    HTML Code:
    .submit {
      border: 2px solid #333;
      background-color: #862222;
      font-family: Courier New, Courier New, Courier, monospace;
      color: #fff;
    }
    Add the submit class to the input element in your html
    HTML:
    HTML Code:
    <input type="submit" value="sumbit" name="submit" class="submit" />
    And there we are (see attachement form-5.jpg)! Now that's a better looking form.

    We're done

    I hope this was helpfull to some. If you have any question about this tutorial feel free to PM me or reply here.

    This was intended as a 2 parter so, hopefully I will have time to make part II which wouldl talk about display, fieldsets and customizing that sumbit button with an image created in Photoshop.

    Here is the complete HTML sources of the form
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-CA" lang="en-CA">
    
    <head>
    
      <title>[CSS] Customize your form with CSS - part 1</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	
      <style type="text/css">
      <!--
        input, select, textarea {
          border: 1px solid #000;
          background-color: #ccc;
        }
    	
        label {
          font-family: Tahoma, Geneva, sans-serif;
          font-weight: bold;
          font-size: 14px;
        }
        
        .submit {
          border: 2px solid #333;
          background-color: #862222;
          font-family: Courier New, Courier New, Courier, monospace;
          color: #fff;
        }
        -->
      </style>
    
    </head>
    
    <body>
    
    <form action="dothis.php" method="post">
      <p><label for="name">Name:</label><br />
      <input type="text" name="name" id="name" title="Type you name" /></p>
    
      <p><label for="website">Website:</lable><br />
      <input type="text" name="website" id="website" title="Type in you website" />
    
      <p><label for="markup">Markup</label><br />
      <select name="markup" id="markup">
        <option value="html">HTML</option>
        <option value="xhtml">XHTML</option>
      </select></p>
    	
      <p><label>CSS?</label><br />
      <input type="radio" name="css" value="yes"> Yes<br />
      <input type="radio" name="css" value="no"> No</p>
    
      <p><label for="description">Describe your site</lable><br />
      <textarea name="description" id="description" cols="30" rows="10"></textarea></p>
    
      <input type="submit" value="sumbit" name="submit" class="submit" />
    </form>
    
    </body>
    </html>
    Attached Images Attached Images
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Please keep the attachments in this thread instead of hosting them on your site.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Ok ... no problem. I've taken the disclaimer out. Thanks Filburt
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  5. #4
    Senior Member
    Join Date
    May 2005
    Location
    Essex, United Kingdom
    Posts
    200
    Member #
    10131
    Although I use a tiny bit of CSS on my forms, I do not think it's a good thing to style them heavily.

    I've seen many things with CSS and Javascript which create fancy browser tricks and to be honest I think they put a huge blow in the usability of the site. Users are used to seeing default form's in their browser and OS, and by styling them you are breaking the expected norm of users.

  6. #5
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    By "breaking" them, are we not defining new normalities for the users of tomorrow?

    CSS based forms are more and more on the web.

    I agree though, too much of a good thing is a bad thing, but adding some backgrounds to textareas and the like make your form stand out, and forms, by standard, look dull and bland.

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Great tutorial! A couple of little details were missing or slightly off; for example, Yes/No weren't set as labels for their radio buttons. I find it amazing that about a year ago I didn't even know about the `label' element, but being able to click the label and select the radio button is a huge boon. Something like this:
    HTML Code:
    <input type="radio" id="yes" name="yesNo" /> <label for="yes">Yes</label><br />
    <input type="radio" id="no" name="yesNo" /> <label for="no">No</label>
    Which brings me to the second one -- since you named the radio buttons `yes' and `no', they end up selecting separately. A detail, but someone inexperienced could get tripped up by it.

    And, finally, though using classes is great, there's also the coolness that is more advanced CSS selectors, such as:
    Code:
    input[type=submit]
    {
         border: 2px solid #333;
         background-color: #862222;
         font-family: "Courier New", "Courier New", Courier, monospace;
         color: #fff;
    }
    Unfortunately, this doesn't run in anything less than IE7 (thank you so much, Microsoft, for making our lives easier. Really.) Firefox and Safari, however, handle it with aplomb. If nothing else, these are useful to know *about*, even if they can't necessarily be used right now.

    Finally, it bears mentioning that radio buttons enjoy behaving strangely with the background-color and border settings when you're in IE. Specifically, the background of the radio button gets styled and it gets a border around it. It's one of those little quirks, but can be worked around by another quick hack where you add the `radio' class to the radio buttons and do this magic:
    Code:
    input.radio
    {
        background: none;
        border: none;
    }
    Once again, we'd be helped if IE supported input[type=radio], but there we have it.

    Again, great tutorial! Sorry if I'm nitpicky, this stuff makes me happy :-)

  8. #7
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Quote Originally Posted by Shadowfiend
    Which brings me to the second one -- since you named the radio buttons `yes' and `no', they end up selecting separately. A detail, but someone inexperienced could get tripped up by it.
    Yes ... I made a boo-boo in there. I fixed it

    HTML Code:
    <p><label>CSS?</label><br />
      <input type="radio" name="css" value="yes"> Yes<br />
      <input type="radio" name="css" value="no"> No</p>

    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  9. #8
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Nice tutorial, karinne, it could use a bump!

    Thanks shadowfiend for the square-bracket stuff, I didn't know that. And I agree that <label>s are great!

    I find myself styling forms a lot simply to control the length of textboxes and their alignment. For example a two-column form where the input box is on the same line as the as the label:

    HTML Code:
    <form>
      <p>
         <label class="lefttext">First name:</label><input type="text" name="first_name" class="leftbox" />
          <label class="righttext">Last name:</label><input type="text" name="last_name" class="rightbox" />
      </p>
      <p>
        <label class="lefttext">Phone Number:</label><input type="text" name="phone" class="leftbox" />
        <label class="righttext">Email:</label><input type="text" name="email" class="rightbox" />
      </p>
    e
    t
    c
    .
    </form>
    CSS:
    Code:
    .lefttext {position: absolute; /*relative will not work*/ left: 10px;}
    .leftbox {position: absolute; left: 100px; width: 120px;}
    .righttext {position: absolute; left: 250px;}
    .rightbox {position: absolute; left: 360px; width: 120px;}
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com