Formating Your Form "textarea" And "submit" Button if you are fed up with default settings

[rvovk 0]

This is gonna be short tutorial about formating textarea and submit button in forms.

 

This is code for textarea:

 

<p class="inputs">Comment: * </p><div class="besedilo"><textarea name="comments" cols="35" rows="5" style="border:1px solid #cccccc; background:#EDF4ED;" onfocus="style.borderColor='#999999', style.background='#ffffff';" onblur="style.borderColor='#cccccc', style.background='#EDF4ED';"></textarea></div>

Explanation of code for textarea.

 

<p class="inputs">Komentar: * </p>

This code formates the text above textarea. It must be defined in CSS prior.

 

Textarea is defined for sending some form with its name, but this is not point of this tutorial, cause we are working on looks of a form.

 

So what we need is define STYLE of textarea (or input for name, etc).

 

Style is defined with next code:

<input name="submit" type="submit" style="background-image:url(images/layout/send.jpg); width:60px; height:23px; border:1px solid #cccccc;" onfocus="style.borderColor='#999999';" onblur="style.borderColor='#cccccc';" class="logon" id="objavi" value="Submit"/>

Name is defined with "Submit", type is "submit" which means button will be rendered with its default settings (grey button), if type is "image" then we can define button as image, but I have bad experience with this type, cause visitors weren't able to Submit form in Opera or Internet Explorer. I made bad coding in that situation. So let go futher with this tutorial.

 

We define "style" which is idle state of button. We defined background image (not image but background image).

 

Background:

 

Button is actually functioning with its parameter "Value", which is defined as Submit. Again background and borders are defined for different states like "onfocus" and "onblur". I didn't make background change in submit button, but it is possible to make nice bending of button when clicking on it.

 

So that a short explanation of formating the form and its elements in it.

 

Here is example of this tutorial (in slovenian language).