Navigate to other page:

You know these textfields that will clear the content when you click in it.
You can have a default text in it, like *Enter you name here", and then clear it when clicked. Or you can change this so when clicked it will write in some completly different text.

CSS

Here I use the same two form fields, a simple text field and a submit button.
The Basic Style for all the examples are these;

width:420px;
height:32px;

STYLE='border:1px solid black;background-color:white;color:blue;'

STYLE='border:1px solid black;background-color:white;color:blue;border-radius:12px 12px 12px 12px;'

<INPUT TYPE='text' VALUE='Some text here for the example..' CLASS='basic_style' STYLE='border:1px solid black;background-color:white;color:blue;border-radius:8px 8px 32px 32px;padding-left:32px;'>

<INPUT TYPE='text' VALUE='Some text here for the example..' CLASS='basic_style' STYLE='border:1px solid black;background-color:orange;color:blue;'>

<INPUT TYPE='text' VALUE='Some text here for the example..' CLASS='basic_style' STYLE='border:1px solid black;background-color:white;color:blue;'>

<INPUT TYPE='text' VALUE='Some text here for the example..' CLASS='basic_style' STYLE='border:1px solid black;background-color:white;color:blue;'>

<INPUT TYPE='text' VALUE='Some text here for the example..' CLASS='basic_style' STYLE='border-bottom:2px solid black;border-left:2px solid black;border-right:none;border-top:none;background-color:#f5f2f0;'>

Javascript

Here are the two examples.
I have removed the styling. Make your own.
If you need to know more baout styling, find how to do f.eks here:


<input type="text" onfocus="this.value=''" value="Click me to watch me disappear...">



<input type="text" onfocus="this.value='I changed the text'" value="Click me to watch me change...">