Linux Hosting
NT/2000 Hosting
DYO Internet Access
HTMLez.com
PHPez.com
ASPez.com

Select a Domain
    

Javascripting css Form Fields




The above form demonstrates the integration of HTML forms and CSS styles. We first have an ordinary <input type="text"> form field. It looks and displays normally.
Following the normal form text field we have a form field that looks differently <input type="text" style="border:1px black solid;border-bottom:3px navy double"> . It has a double underscore at the bottom. I use this on a page that indicates something special about this input area.
And then we have the form field that is blurred <input type="text" name="grayedField" style="background-color:#dddddd" onFocus="document.theForm.grayedField.blur()"> . This grayed (blurred) field can receive values via javascript but cannot be updated manually Press the button in the example above to see this javascript action.. The background gray visually informs the web user that he/she cannot type into this field. Of course, for this sample to work, the form must be named grayForm (referenced on the onFocus setting).

If you wish to have a field variably focused or blurred then the action must occur from another event. Thus we can have
<input type="text" name="optionalBlur" onClick="if (toggle=='blur') document.grayForm.optionalBlur.blur(); else document.grayForm.optionalBlur.focus();"> to create this optionally blurred input field and this code <input type="button" value="focus" onClick="toggle='focus'; document.grayForm.optionalBlur.className='w';"> <input type="button" value="blur" onClick="toggle='blur'; document.grayForm.optionalBlur.className='g';">
to produce these buttons Try entering data alternately after clicking either of these 2 buttons.
This code depends on some code in the <head> section of the page. <style> input.d { border: 1px black solid; border-bottom: 3px navy double } input.g { background-color: #dddddd } input.w { background-color: #ffffff } </style> <script language="javascript"> var toggle; toggle="blur"; </script> This initializes the field as blurred. Clicking on the focus button sets the toggle to "focus" and sets the input style to w (for white). Clicking on the blur button sets the toggle to "blur" and sets the input style to g (for gray).

You can create other effects using stylesheets. This example is a common occurrence and should be useful pretty much as is. But you can use the ideas as a template to perform other tricks using CSS and HTML forms along with some simple javascript.

If you also have a website assisting web authors, please feel free to link to either this page or to link to JAVASCRIPTez.com. If you would like to contribute code to any of the EZ pages referenced on the left, Please email me here. You may also email me if you would like to exchange links (compatible sites only).

cover
Avg. Customer Review:
April 2001
http://www.hungryminds.com
cover
Avg. Customer Review:
April 2001
http://www.htmlgoodies.com
cover
Avg. Customer Review:
April 2001
http://www.microsoft.com
cover
Avg. Customer Review:
April 2001
http://www.wrox.com

PHP Copyright Notice