HTML PRIMER

by Jim Gordley
2008-2016

Using CSS to add styles to forms

Forms are very functionlnal but left to their default settings can be kind of bland. Fortunately CSS can be used to add custom styles to forms.

Styling Input Fields

Defaults for input fields are a white background and a monspaced font such as Courier. Forms can be styled using CSS.

input {background-color:#555555; font-weight:bold; color:#ffff00;}

Name:

In the example code above the style would apply to all input fields. Class selectors can be used to create different looks for differerent input fields.

.colr1 {background-color:#ff0000; color:#0000ff;}
.colr2 {background-color:#00ff00; color:#ffffff;}
.colr3 {background-color:#0000ff; color:#ff0000;}

Name:

Name:

Name:

CLASS LAB
CREATING A FORM
DO THISWHY YOU DID IT
  1. Add the following highlighted code to the internal style sheet,

    input {background-color:#cccccc;}

  2. Save the changes and refresh the browser to verify your work.

  3. Did you notice that the input fields now have a light gray background? Why do the select lists still have a white background?

  4. Add the following text to the internal style sheet.

    input, select {background-color:#cccccc;}

  5. Save the changes and refresh the browser to verify your work.

  6. Add the following highlighted text into the internal style sheet.

    input, select {background-color:#cccccc;
    color:#003333;
    font-weight:bold;
    }

  7. Save the changes and refresh the browser to verify your work.

To change the background color of the input element.

Changes the background color of the input element to light gray.



Name:









Month:








Name:

Adding Style to Fieldsets and Legends

In the same way colors, sizes, padding, spacing, and most every attribute of elements are controlled by style sheets, fieldsets and legends can also be controlled by CSS.

CSS Borders

Using CSS it is possible to add borders to any HTML element. Fieldsets create a simple border automatically. CSS provides the tools to modify the default appearance in many ways.

    border-style
  • dashed - Defines a dashed border

     

  • double - Defines a double border

     

  • dotted - Defines a dotted border

     

  • groove - Defines a 3D grooved border

     

  • hidden - Defines a hidden border

     

  • inset - Defines a 3D inset border

     

  • none - Defines no border

     

  • outset -Defines a 3D outset border

     

  • ridge - Defines a 3D ridged border.

     

  • solid - Defines a solid border

     

border-color- Sets the border color any valid color value can be used.

border-width - Defines the width of the border usually expressed using a pixel value. Keywords can also be used thin medium and thick. Keywords do not provide a consistent result with different browsers.

All of these properties used together produce a custom border that enhance the design and look of a web site. The example below uses a shorthand property to make a blue dashed border 600 pixels wide.

.customborder {border: blue dashed 3px; width:600px;}

 

Customizing fieldset borders and legends

CLASS LAB
CUSTOMIZING FIELDSET BORDERS AND LEGENDS
DO THISWHY YOU DID IT
  1. In the internal style sheet add the following text

    legend {color:#003333; font-weight:bold;}

    Save the changes and refresh the browser to verify your work.





  2. Add the follow highlighted text

    legend {color:#003333; font-weight:bold;
    padding:6px;}


    Save the changes and refresh the browser to verify your work.









  3. Add the following highlighted text

    fieldset {width:420px; border: 3px double #ff6600;}
To add a new CSS rule to the style sheet




Account Information
First Name:
Last Name:
Notice the legend text is now dark green and bold.




Account Information The legend is now bold and dark green
First Name:
Last Name:
Notice the padding in the fieldset has increased by 6 pixels.


Account Information

Password:
Last Name:
Email:

Payment Information
MasterCard
Account number: Expiration:
  1. Add the following highlighted text

    fieldset {width:420; border:3px double #ff6600; padding:6px;}

    Save the changes and refresh the browser to verify your work.

  2. Close the order.html file in both FIrefox and Notepad.

 

Tab Index

Tab index controls the focus area for the next input field. Many users enter data into an input field then press the tab key to move on to the next logical input field. By default the tab index moves from left to right top to bottom. This may or may not be the we the form was designed to logically be filled out. Setting the tab index is used to follow the logically layout of the form.

CLASS LAB
TAB INDEX
DO THISWHY YOU DID IT
  1. In the Unit 4 folder open order2.html with Notepad and Firefox.

  2. Place your cursor in the First Name input field. Press the Tab key.

To observe tab behavior and edit the file.

  1. In the Notepad orders2.html file enter the following highlighted text.

    <table>
     <tr>
      <td>First Name: <br><input tabindex="1" type="text"
              name="fname"></td>
      <td>Password: <br><input tabindex="3" type="password"
              name="pass"></td>
     </tr>
     <tr>
        <td>Last Name: <br><input tabindex="2" type="text"
                name="lname"></td>
       <td>Email: <br><input tabindex="4" type="text"
               name="email"></td>
      </tr>
    </table>


  1. Save the changes and refresh the browser to verify your work.

    Place your cursor in the First Name input field. Press the Tab key.

  2. Set the tab index order form all remaining input and select tags.

    Save the changes and refresh the browser to verify your work.