EchoEcho.Com Homepage
Web Hosting - As Reliable As It Gets!
   Home > Tools > Custom Forms


 Tutorials 
 D-Zine Articles 
 Online Tools 
 Free Resources 
 References 
 Quiz 
 Hosting 

















  ONLINE TOOLS :
CUSTOM FORMS








This tool let's you add a customized formstyles to your pages.

The code will only work on Internet Explorer - since IE is the only browser that support custom formstyles.

The code will not cause any harm if viewed on older Netscape browsers - it just won't have any effect, so a normal formstyle will appear if viewed with Netscape.

Fill in the fields and let this page do the programming for you.

Then copy and paste the code into your own HTML document.

As easy as it gets!




Please note: This tool creates codes and examples on the fly. In order to do this the page makes use of complex dynamic HTML that is only supported by newer versions of Internet Explorer.




1: FILL IN THE FORM


OPTIONSSETTINGS
Background Color =
Font =
Font Size =
Font Color =
Padding between border/content =
Border Color =
Border Thicknes =
Border Type =



2: LOOK AT THE SAMPLE BASED ON YOUR TEST

Sample text field:


radio 1   radio 2   radio 3

checkbox 1 checkbox 2


NOTE:
When you click the "Test New Scrollbar" button, the code for the scroll bar is generated below. If the test scrollbar is okay, you can copy the code from this page and insert it into your own.

You can enter color values using pre defined names (green, blue, etc) or HEX values (#FFCC00, #CC9900, etc).




3: COPY THE CODE THAT FITS YOUR NEED

3a: CODE TO CHANGE ALL FORMFIELDS ON THE PAGE

Copy This To The <HEAD> Section Of Your Page
No Code Available! - Click The Above Button To Generate The Code


3b: CODE TO CHANGE ALL FIELDS WITHIN A SINGLE FORM

Insert the following code right above your <form> tag
After that, add </div> right after your </form> tag.
No Code Available! - Click The Above Button To Generate The Code



3c: CODE TO CHANGE SINGLE FORMFIELDS

Copy This To The <HEAD> Section Of Your Page
After that, add class="customform1" to the desired fields.
For example: <input type="text" class="customform1">
No Code Available! - Click The Above Button To Generate The Code






Using multiple styles on same page
The code produced with this tool creates a CSS class called customform1.

If you want to use the tool for several different styles used on the same page you should simply change the name customform1 to customform2, customform3 etc.




Setting width and height of form elements
The code produced with this tool does not specify attributes for width and height. That is because it's rare that ALL form elements on a form should have the same width and height.

However, you can specify the width and height of single fields similar to this example: <input type="text" style="width:120px; height:30px;">


 << BACK TO MENU
READ MORE >>  



















     "Better Than Books - As Easy As It Gets!"


On EchoEcho: D-Zine Articles | Tutorials | Online Tools | Free Resources | References | Quiz | HostingAbout EchoEcho