Welcome Guest ( Log In | Register)



 
Reply to this topicStart new topic
> Formating Your Form "textarea" And "submit" Button, if you are fed up with default settings
rvovk
post Aug 15 2005, 11:28 AM
Post #1


Super Member
*********

Group: Members
Posts: 378
Joined: 13-October 04
From: Slovenia
Member No.: 1,731



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

This is code for textarea:

CODE
<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.

CODE
<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:
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: user posted image

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).







Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Form To Php Mail. Attachment(14)
  2. *** Click Here To Get Your Free Hosting ***(1)
  3. Converting Textarea Return Characters To <br />(7)
  4. Radio Button(4)
  5. On Line Proxies!(11)
  6. Refresh Page After Back Button Hit(10)
  7. Html Form!(4)
  8. Application Form [approved](2)
  9. What Is Mysql's Default Root Password?(8)
  10. List Of Free Directories To Submit Your Websites(7)
  11. How To Create Java Button Or Frame(12)
  12. Cd Drive Eject Button Problem(3)
  13. Gahhh This Isn't Going Well Please Help!(12)
  14. How Do I Change The Default Windows Font Size?(3)
  15. How To Make Form Nested In Internet Explorer ?(2)
  1. Psp Square Button Problem(12)
  2. Loop Through Form(8)
  3. Registration Form?!(6)
  4. Help With Form Actions.(1)
  5. Free Windowsxp Sp2 Cd From Microsoft(11)
  6. How To Make A Search Form And Php Code?(10)
  7. Form Not Returning Correct Email Address(5)
  8. Delphi Tutorial - Change Your Start Button Caption(4)
  9. Frontpage Problem(0)
  10. I Liked This Form Builder(4)
  11. Delaying The Time Until A Flash Button Can Be Pressed(3)
  12. Mail Settings To Configure Outlook Express(10)
  13. Download Files Off Esnips.com(0)
  14. Multiple Drop Down Menus W/ Submit Button(6)
  15. Ch Customer. - Need Help W/ Php/mysql Settings. System() Passthru() Mysqldump(1)


 



- Lo-Fi Version Time is now: 20th July 2008 - 08:38 PM