HTML Forms Part 3
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
Changing attributes of form elements

EX 1: The code...

In HEAD:

<style>

input.red {

background-color: #CC0000;
font-weight: bold;
font-size: 16px;
color: #FFFFFF;

}

</style>

In BODY:

<form>

<input name="my_button" type="button" class="red" onclick="my_web()" value="go to my website">

</form>

NOTE: Only the parts of the style effecting the font size and boldness will show up in Safari and Netscape (in regards to form buttons). The background-color and color will show up in IE. Test both browsers.

This is what it looks like in Internet Explorer

IE Button

 

EX 2:

Type your name:


Type your address:


In HEAD:

<style>

//single line text box
input.blue {

background-color:#00FFFF;
font-size: 12px;
color:#000066;

}

//multi-line text area
textarea.black {

background-color:#000000;
font-size: 12px;
color:#99CC00;

}

</style>

In BODY:

<form>

<input name="namestring" type="text" class="blue" size="50">
<textarea name="address" cols="50" rows="4" class="black"></textarea>

</form>