Free Web Hosting Provider - Web Hosting - E-commerce - High Speed Internet - Free Web Page
Search the Web

cascading style sheet example html forms
 

cascading style sheets and html forms

with a cascading style sheet used to alter the value of any html form tag even the buttons
although not as effective in netscape, html forms can look spectacular with stylesheets
 :Your URL
 :Your Username
 :Your E-mail

when viewed with an internet explorer the form above has lime colored text on a teal colored background
below are the style commands that where used to achieve these effects 

 <STYLE>
  TEXTAREA {
            background-color: #009999;
            color: #00FF00;
            font-family: garamond, tahoma, arial;
            font-weight: bold;
  }

  .field {
          background-color: #009999;
          color: #00FF00;
          font-family: garamond, tahoma, arial;
          font-weight: bold;
  }

 .formbutton {
              color: #009999;
              text-transform: capitalize;
              cursor: hand;
 }

 SELECT {
         background-color: #009999;
         color: #00FF00;
         font-family: garamond, tahoma, arial;
         font-weight: bold;
 }
 </STYLE>

'TEXTAREA' obviously alters the textarea, 'SELECT' alters the dropdown menu and the class '.field' alters the 'text input'
<INPUT type=text class="field">
if style commands where added to the 'INPUT' tag the form buttons would also appear to have lime text on a teal background, so the class 'formbutton' is used
<INPUT type=submit value=Send class="formbutton">
this gives the form buttons teal coloured text and capitalizes the first letter of each word and for users with Internet Explorer the cursor changes to a hand when the mouse is over a button

[ the form as seen in IE ]

here is an image of the form for the benefit of users unable to see the effect

home
home
 		next: stylesheets & html links
previous: stylesheets & cursors

html tutorial css tutorial javascript webmaster articles link exchange

css tutorial