|
|
Updated: 03/27/2004 11:08:11 AM (Broken Link? Report It Here) |
|
|
Design Area
What is the purpose of the Design Hints and Tips area? Many times one has enough knowledge about a subject to be beyond the need of a tutorial but not enough to know exactly how to accomplish a certain task or reach a certain goal. Often one finds himself needing to learn how to do just one small thing instead of a receiving a full course instruction. And then there are times where you learn something interesting and useful just by browsing around; but without really intending to learn. That's the purpose of the Design Hints and Tips area - to teach you something small, but interesting and useful. To show you how to do just one thing at a time and help you reach your goal. More importantly, to provide you the opportunity to learn something new each day; which is a goal most people envision and strive for. Membership requirements for Giz Gears. This interactive area within Giz Gears does not require an active Giz-Net Network membership in order to participate.
Tired of the same old buttons on web forms that are grey by default? Or perhaps you don't want your visitors' desktop themes to control how your web pages look? Try this tip to dress up and take control of your web form buttons. Review the following HTML code, it generates a standard web form button that is rectangular and grey with a default font setting unless you are using a desktop theme that changes your defaults. <p align="center"><form method="post" action="gg-dres-hints.htm"><input type="submit" value="Click here to visit a page"></form></p> Now, consider this code. It forces the web form buttons page to be loaded as a blue rectangle with a bold, white font in Arial style. <form method="post" action="gg-dres-hints.htm"><input type="submit" value="Click here to visit a page" style="font-family:arial; color:FFFFFF; font-weight:bold; background-color:blue;"></form>
Copy the code below and add it between the <head> </head> tags of your webpage.
<script type="text/javascript"> Then add the bolded code below to your <body> tag. <body onload="setfocus()"> Note: I did not load an example for this JavaScript block because it conflicts with other JavaScript codes on my webpage. But feel free to copy the code and try it out on your own website!
To create this cool little form copy the script below to your webpage where you want the form to appear. In the script replace the email address, the subject and the message body with your own information. When your website visitor clicks the button an email form will open with all the date filled in. <form><input type="button" value="Email Me" onClick="location.href='mailto:you@yourdomain.com?subject=Your Subject&body=Message for the body'" style="font:11px verdana;color:#00C;background:#fff;"></form> Click the button below to try out this little wonder.
Here is a simple method to change the "default" appearance of your form elements. Using CSS, you can assign attributes to the different form elements to make the form conform to your overall design. You can assign different styles for fonts, background colors, etc. Copy the code below to your webpage and then modify the font style, font size and font color for the input box on the form and selection drop-down box on the form. And lastly, modify the font style, font size, font color and background color for the form button. <form>
Let your visitors copy text from your website with the click of a mouse. This tip is great when you want to issue code or any other text that you want your visitors to copy. Put
this part of the script between the <head> </head> tags of
your webpage.
Contributions for Giz Gears. If you have a great web design source you would like to share, please let me know! I give credit for all sources of contributions; links, tutorials, downloads, hints, tips, etc. If you would like to see other pages added to this area, please let me know either through email or through the Forum. |
||
|
|
||
-
Added 25 Mar
