Page 35 - LoudOffice_Guide-to-HTML_Part-II_Advanced.PDF

Below is a very simple html form document with two input fields that is validated before
submission:

< h t m l >
< h e a d >
< t i t l e > S i m p l e F o r m w i t h V a l i d a t i o n < / t i t l e >
< s c r i p t l a n g u a g e = " J a v a S c r i p t " >
< ! - - / / H i d e
f u n c t i o n c h k F o r m ( ) {
i f ( d o c u m e n t . i n p u t F o r m . n a m e . v a l u e = = " " ) {
a l e r t ( " Y o u m u s t e n t e r y o u r n a m e . " ) ;
d o c u m e n t . i n p u t F o r m . n a m e . f o c u s ( ) ;
r e t u r n f a l s e ;
}
v a r p a s s W = d o c u m e n t . i n p u t F o r m . p a s s . v a l u e ;
i f ( p a s s W = = " " ) {
a l e r t ( " Y o u m u s t e n t e r y o u r p a s s w o r d . " ) ;
d o c u m e n t . i n p u t F o r m . p a s s . f o c u s ( ) ;
r e t u r n f a l s e ;
} e l s e {
i f ( p a s s W . l e n g t h < 4 | | p a s s W . l e n g t h > 8 ) {
a l e r t ( " Y o u r p a s s w o r d m u s t b e 4 t o 8 c h a r a c t e r s i n
l e n g t h . " ) ;
d o c u m e n t . i n p u t F o r m . p a s s . f o c u s ( ) ;
r e t u r n f a l s e ;
}
}
}
/ / u n h i d e
- - >
< / s c r i p t >
< / h e a d >
< b o d y >
< h 1 > P l e a s e L o g o n < / h 1 >
< f o r m a c t i o n = " h t t p : / / w w w . l o u d o f f i c e . c o m / c l a s s / s u b m i t . a s p "
m e t h o d = " P o s t " n a m e = " i n p u t F o r m " o n S u b m i t = " r e t u r n c h k F o r m ( ) ; " >
< p > N a m e : < i n p u t t y p e = " t e x t " s i z e = " 2 0 " n a m e = " n a m e " > < / p >
< p > P a s s w o r d : < i n p u t t y p e = " p a s s w o r d " s i z e = " 2 0 " n a m e = " p a s s " > < / p >
< p > < i n p u t t y p e = " s u b m i t " n a m e = " s u b m i t " v a l u e = " S u b m i t F o r m " > < / p >
< / f o r m >
< / b o d y >
< / h t m l >
Note: In order to use this method of form validation, you must name both the
form, and each field on the form.

V. An Introduction to Cascading Style Sheets
Cascading style sheets (CSS) are a recent addition to HTML pages. Web page designers
have long been frustrated at the lack of control they have over how a page will appear.
Cascading Style Sheets are a way of controlling the way the browser displays the page. For
the experienced designer, Cascading Style Sheets will be a welcome feature that will save a
lot of time normally spent on repetitive style formatting commands. With CSS, you can
control fonts, colors, sizes, item layout, and much more. There are three ways to add Style
information to you web page:

1. Inline styles

LoudOffice.com Guide to HTML – Part II Page 35