Index Page Page 1 Page 2 Page 3 Page 4 Page 5 This Page Homework

Martha's COIN 74 Week 7 Exercises

Day Six -Customized Form Elements

SOURCE: Robert D. Cormia's online text
my comments in blue

Here's a radio group I created, just for practice. Don;t expect it to do anything, or go anywhere!


to link to URL
Button

You have not yet learned to create classes for Cascading Style Sheets, but for those who do (and you all will after lessons 10 and 11), you can simply select a defined class from the Class dropdown menu and apply it to any form element or the entire form.... ...the Class does not display in the Document Window. You have to preview in browser to see the Class for the Textarea. View the Source Code of my form and change the parameters I used to customize some form elements in your homework sample. Make yours with different font, different background colors, etc. Different browsers display the form's CSS styling differently. In order for the styling to work on birth IE and Netscape, we have to use two external stylesheets, one for IE and one for Netscape. In doing so, you could adapt your font sizes, or background properties, or the other styles that NN4.xx can't interpret. To do that you can use the fact that NN 4.xx does not recognize the @import. Therefore you link two style sheets:
<link rel="stylesheet" href="StyleNN.css" type="text/css"> <style type="text/css"> @import url(Style.css); /*IE and NN6x styles*/</style>
I found this info on the Macromedia site...and tested it on my form, and it works great for both IE and Netscape. There are 3 types of CSS:

    1. Inline styles
    2. Embedded or global styles
    3. Linked or external style sheets
Well, here's the results of my following those instructions. I copied the code into the head, but I don't think it will do anything because I don't have any style sheet for it to link to! Well, as Robert says - CSS is week 10 and 11! So, come back later and see if I've solved this problem. What it DOES show is that eventually I'll be able to use CSS to "style" my forms like the pros do it. I can't wait... Hmm, the style sheet links show up as broken, so for now I've commented them out.
Make sure to include a form action. I left mine null in the example above using the pair of quotes: "" I inserted a style attribute in the tag for the submit button ...This displayed a larger button with larger text in Dreamweaver, IE, and Netscape. Adding this attribute to the combo box/menu list tag also worked, but only in Dreamweaver and IE. ...I tried enclosing the input button tag with (Martha's edit) font style=“font-size: 24px" This worked to make the button and text larger in Netscape 4.7 only. Please note that CSS is still not standardized amongst all browser/OS/flavor combinations. Test on as many systems as possible to see if the CSS works.

OK - now I think I'm ready to begin work on our assignment!


Page Created 11/12/06     Page Finished 11/13/06     Assignment Submitted 11/18/06
Document Last Modified:
© mjraup 2006
Webmaster