How To Create Those Fancy Forms?

[webgyrl]

I've always wondered how people customize their forms to integrate them into the design of thier sites.

 

For examples of what I am talking about check out these sites:

 

www.popyoularity.com/variables/newsection.shtml

 

www.starshrine.com/

 

If I find more examples, I'll post thm.

 

Basically, how do you create other kinds of buttons used to submit forms and unify the color scheme of a form or use dotted lines instead of solid ones.

 

Thanks,

Nat

[TCH-Bruce]

Nat,

 

You can do something like this:

 

     

 

Also, I am moving this to the HTML & CSS forum for organization.

[btrfld]

You can create a link, style it with CSS any way you want, and use it to fire the form. Let's see if I can make a simple generic example:

in java script:

function fireForm {

  document.getElementById('myForm').submit();

}

 

in HTML:

<form id="myForm">

...

<a href="java script:;" onclick="fireForm()">Go</a>

</form>

In the script you can do error checking, etc. and then decide whether or not to submit.

 

Hope this helps some. If anything is not clear, just keep asking.

[kaseytraeger]

Hi Nat,

 

Great question!

 

In addition to using CSS the way Bruce has described, you can also use a custom graphic (say, for example, a gradient that flows from grey to white or one shade of blue to another shade of blue) as the background for any text input boxes or textareas. All you have to do is specify them specially in your CSS file. For example,

>input.text1{
 background-image: url('/path/to/your/image/graphic.gif');
 background-repeat: no-repeat; /* you can also choose 'repeat' */
 color: #fcf; /* setting the color of the text as the user types in this field */
 border: 1px dashed #cfc; /* setting the border of the text input area to 1 pixel dashed */
}

 

Then, you just add the class name "text1" to each <input> in your form For example:

><input type="text" class="text1" id="field1" name="field1" length="15" maxlength="30" value="Sample text for the first field" />
<textarea name="textarea1" class="text1" cols="10" rows="5">Users can enter messages and/or comments here</textarea>

 

You can also create background colors for <select> boxes and checkboxes, as in ...

><select size="1">
<option style="background:#abc;">Option #1 in a dropdown menu</option>
<option style="background:#cba;">Option #2 in a dropdown menu</option>
<option style="background:#111;">Option #3 in a dropdown menu</option>
</select>

<input type="checkbox" style="background:#1f1;" name="box1" id="box1" value="Box1_checked" />

<!-- or you could declare the checkbox to be of class "text1" -->
<input type="checkbox" class="text1" name="box2" id="box2" value="Box2_checked" />

 

I haven't yet figured out a way to put a background color inside a radio button, but you can put a border around them!

 

Did you know that you can also create your own custom graphics and use them for buttons? You aren't limited to CSS. If you want to make a "submit" button with a green unicorn, you can. Just create the image in your favorite graphics program and save it. Then code the submit button as follows:

><input type="image" src="/path/to/your/graphic/greenunicorn.gif" value="Only enter something here if you want to overlay text on top of your graphic" />

 

A reset button can be similarly created.

><input type="image" src="/path/to/your/graphic/greenunicornreset.gif" value="Enter text here if you want to create overlay text on top of your reset button" />

 

There are so many things you can do with forms. Just play around. CSS will let you use your own custom graphics, create borders, change colors, text sizes, colors and fonts, just about anything visual to go along with the graphic.

 

I also suggest using a javascript to preliminarily check the form while it's still on the user's computer before sending the form data to the server for processing. There are many form validation scripts available all over the web. Two of my favorite JavaScript web sites are Dynamic Drive and JavaScript Kit. To use them, just do as Jim suggested ...

><input type="submit" ... onclick="fireForm()" ... />

 

Don't forget that HTML and XHTML have many features available for creating forms, such as <legend>s, <fieldset>s, <border>s (multiple pixels and multiple effects such as "double" -- you can see an example of "double" at http://kaseyscreations.com/villagepantry/test-contactus.htm ), <label>s and <optgroup>s.

 

Hopefully these are a few ideas to get you going on your way. Forms are actually fun to create once you know that you're not limited to the default settings provided by your browser of choice. Have fun!

 

[TCH-Don]

You can also define the form elements in your stylesheet

 

 

 

 

INPUT, SELECT, BUTTON, TEXTAREA {

BACKGROUND-COLOR: transparent;

COLOR: #cccccc;

FONT: normal 10px Veranda,Arial,Sans-Serif;

padding: 1px;

border: 1px #000000 solid;

}

[webgyrl]

Hey gang!

 

Thanks for all the great suggestions, links and snippets of code.

 

What happens to a CSS designed forms when someone is using a browser that does not fully support CSS? Does the design default to the older standard colors and formatting or does the form become unstable in any way?

 

Bruce, sorry for posting this in the wrong place. I wasn't sure where to put it... also the PHP thread. Thanks so much for moving the topics. Now I know where those kinds of things belong!

 

 

You guys are all so helpful and I really appreciate your input!

 

Nat

[TCH-Don]

What happens to a CSS designed forms when someone is using a browser that does not fully support CSS?

 

Yes a non css browser will see the default colors, but will remain usable.

Edited April 4, 2004 by TCH-Don

[webgyrl]

Cool! Thanks Don!

[webgyrl]

Kasey,

 

Just a quick question regarding this:

 

In addition to using CSS the way Bruce has described, you can also use a custom graphic (say, for example, a gradient that flows from grey to white or one shade of blue to another shade of blue) as the background for any text input boxes or textareas. All you have to do is specify them specially in your CSS file. For example,

 

CODE 

input.text1{

background-image: url('/path/to/your/image/graphic.gif');

background-repeat: no-repeat; /* you can also choose 'repeat' */

color: #fcf; /* setting the color of the text as the user types in this field */

border: 1px dashed #cfc; /* setting the border of the text input area to 1 pixel dashed */

}

 

 

 

Then, you just add the class name "text1" to each <input> in your form For example:

 

CODE 

<input type="text" class="text1" id="field1" name="field1" length="15" maxlength="30" value="Sample text for the first field" />

<textarea name="textarea1" class="text1" cols="10" rows="5">Users can enter messages and/or comments here</textarea>

 

Do I have to put this CSS style in a seperate style sheet from my sitewide text stylesheet or can it all go into the one main CSS style sheet?

 

I have just started using CSS and have it on only one of my sites, but it really only styles the text. I created the sheet in Dreamweaver MX. I didn't see that Dreamweaver had any styling 'wizards' for other elements, but I just got DW MX and am still learning it. I guess I would have to hand write the CSS for any form elements? Is that correct, or is there a program that would help me do that better?

 

Thanks for that very helpful info you posted

 

Nat

 

PS:

Are you in Los Altos? I used to live in the Bay Area- even took some classes at Foothill College in 1998. I miss the Bay SO much!

[kaseytraeger]

Hi Nat,

 

You can put the CSS code for input.text anywhere you like. Just make sure that it will be accessible by the page your form sits on. On the site I'm currently developing, there is only one form, so I've placed the CSS for styling that particular form between <head> and </head> only on the page that uses the form.

 

If you'll have multiple little forms scattered throughout your site, you can certainly put the declaration within your sitewide text stylesheet. In fact, I would actually recommend this method because then it (the CSS for your forms) will be available to you on every page you create.

 

Since Dreamweaver doesn't give you any CSS options for things like forms, you'll probably end up hand-coding them unless you find a web page building application that will do it for you. I code all my pages in a plain text editor, so I'm not sure what's available out there except for FrontPage (ick) and DreamWeaver MX.

 

I think you'll find, however, that once you begin coding them by hand, you'll have a much better understanding of how the stylesheets work and it will become almost intuitive and faster for you to create them by opening your favorite text editor rather than opening DreamWeaver and dealing with the point/choose/click style interface. Once you get good, creating stylesheets will be faster simply by typing them out by hand.

 

Actually, I don't live in Los Altos, but I work very near there at SLAC. Ever heard of it? My husband and I would love to live in Los Altos, but it's far too pricey for our modest incomes. As a matter of fact, the sister of one of my ex-boyfriends lives in Los Altos. She and her husband bought their house in 1992 for about $275K. It now appraises at just under $1M!! With house prices like that in Los Altos, hubby and I have opted to live in the much more affordable area of San Jose (not that a city with average home price of $500K is "affordable," but it's certainly much more affordable than a $1M home in Los Altos). I commute about 25 minutes to work, but I get to enjoy the nice scenery of 280 heading up the mid-peninsula. It's quite beautiful, especially in the spring when the daffodils sprout on the highway just North of Page Mill Road.

 

How long since you've been in the Bay Area? Are you still in California?

 

Sorry to hear that you're not in the area any more. We could have gotten together for coffee and chatted about how great it is here at TCH!!!

 

[webgyrl]

Kasey,

 

Thanks for the clarification on where the CSS coding can go. I am actually in the midst of learning CSS and have a few books. Just taking it one bite at a time for now!

 

I haven't heard of SLAC.

 

You are right about Los Altos being mucho $$$$! In fact the whole Bay became waaaaay to expensive after a few years of being there. My apartment in San Jose went from 1300-2200 per month in only 18 months. I lived all over- Cupertino, San Jose, Fremont, San Rafael and then finally in Rohnert Park in Sonoma. I left in 2001 because I was doing more concerts on the East Coast and it just became silly to have an apt. in CA and keep commuting to the East. So- here I am in the cold by the Atlantic. Gotta be where I gotta be for now tho. I do hope to go back to the Bay some day. It would be fun to have coffee and chat about how much TCH rawks!

 

And it's so funny you mentione the daffodils off Page Mill.... i nearly got myself killed there picking some of them. Ha Ha! I am such a silly! I learned my lesson about picking wildflowers off freeway exits! It sure is pretty over there.

 

Thanks for the help!

 

Nat

[roadmap]

You can also define the form elements in your stylesheet

 

 

 

 

INPUT, SELECT, BUTTON, TEXTAREA {

BACKGROUND-COLOR: transparent;

COLOR: #cccccc;

FONT: normal 10px Veranda,Arial,Sans-Serif;

padding: 1px;

border: 1px #000000 solid;

}

I would like to use this example also, how do I code that exactly just for the form color and nothing else? Is that even possible?

[TCH-Don]

You can drop this in just before your form,

it covers most form elements, and will only affect the forms following the code.

Or if you put it in an external style sheet if will affect all forms.

It will only color the background color in the areas where you type and the face color of the submit buttons.

 

><!-- style form elements --> 
<!-- if you use an external style sheet, move the following there --> 
<STYLE TYPE="text/css"> 
<!-- 
INPUT, SELECT, BUTTON, TEXTAREA, OPTION, SELECT{ 
BACKGROUND-COLOR: #ffff99; 
COLOR: #000000; 
FONT: normal 80% Veranda,Arial,Sans-Serif; 
} 
--> 
</STYLE>