XHTML/CSS Forms

All Forums >> [Web Development] >> Cascading Style Sheets

Message

BobbyDouglas -> XHTML/CSS Forms (10/7/2004 12:11:56)
Anyone have good examples of forms made in xhtml/css?

bobby -> RE: XHTML/CSS Forms (10/7/2004 12:22:29)
not personally... but a google search brought up quite a few... heres one from the list: http://webdesign.about.com/cs/websitetemplates/p/blformlayout.htm

BobbyDouglas -> RE: XHTML/CSS Forms (10/7/2004 12:24:37)
I searched on Google and didn't quite get good results. I would think XHTML / CSS Form would bring up some good pages. Google is slipping. Time for class now, but hopefully others will have some more examples when I get back. Thanks Bobby.

Giomanach -> RE: XHTML/CSS Forms (10/7/2004 15:14:22)
You really don't need to search for this Bobby.... Just make sure you apply CSS to the following HTML elements: input select textarea radio checkbox Or apply classes to each of them....Then you can code the form in XHTML as you would normally... http://giomanach.wm-talk.com/misc/webs/iog-new/contact.php - the form there is XHTML formatted with CSS... (PHP generated) HTH

BobbyDouglas -> RE: XHTML/CSS Forms (10/7/2004 15:56:50)
The formatting for the link you posted is a very simple form. I was going to do something rather complex. I figured a table would need to be used for what I want to do, but hoped there would be some online examples of what others accomplished.

Giomanach -> RE: XHTML/CSS Forms (10/7/2004 16:19:55)
Simple or complex...the CSS implentation process is the same.

d a v e -> RE: XHTML/CSS Forms (10/7/2004 16:20:18)
there's a snippet here http://www.alistapart.com/articles/practicalcss/ scroll down a wee bit... there might be something on eric meyers site

c1sissy -> RE: XHTML/CSS Forms (10/8/2004 9:03:35)
http://academ.hvcc.edu/~kantopet/xhtml/index.php?page=xhtml+forms http://www.picment.com/articles/css/funwithforms/ The above link comes from a site called the css vault. This is an excellent site and has TONS of information on it. I highly suggest a walk through their material. http://webdesign.about.com/library/layouts/zformlayout.htm Not sure if these will help you out or not, but they have some pretty great information on them. And keep the CSSvalut bookmarked, there is a ton of information in there to read.

BobbyDouglas -> RE: XHTML/CSS Forms (10/8/2004 10:05:30)
All these links help so far. I guess instead of using tables/cells you can just use <p>'s for everything- or so it seems. Thanks for the help!

caz -> RE: XHTML/CSS Forms (10/8/2004 12:26:23)
The source of all knowledge[;)] W3C Real life:- NN4 problems: http://www.mako4css.com/cssforms.htm sample which doesn't work in IE5:- http://www.quirksmode.org/css/forms.html other examples:- http://realworldstyle.com/forms.html http://www.dutchcelt.nl/blogged/204_0_1_5_C/ tutorial:- http://www.designplace.org/tutorials.php?page=1&cid=9 http://www.sitepoint.com/article/style-web-forms-css discussions elsewhere:- http://www.webmasterworld.com/forum83/3758.htm http://www.webmasterworld.com/forum83/222.htm And our own Katherine Nolan has a tutorial on styling forms with CSS Here I don't think that I have duplicated any of the links given by others, but I would really suggest that you start with the ALA reference given by Dave. Cheers Carol PS. Give Teoma a try sometime[:D]

c1sissy -> RE: XHTML/CSS Forms (10/8/2004 18:14:03)
thanks for the links Carol, they are all pretty good ones.

BobbyDouglas -> RE: XHTML/CSS Forms (10/11/2004 1:45:40)

Here is what I am working with right now, however I would like to have three columns to place information in. Maybe someone has a suggestion for this.

CODE

<html>

<head>
	<title></title>
<style>
div#titlenav { 
    background-color:#EFF4F8;
    text-align:left;
    margin-top:0px;
    padding:5px;
    border:1px solid #375A8B;
}
    </style>
</head>

<body>
<div id="titlenav">		
<p>City:</p>
<p><input type="text" name="City" size="20"></left></p>
<p>Square Footage:</p>
<p><select size="1" name="SquareFootage">
<option selected>Any Square Footage</option>
<option>1+</option>
<option>2+</option>
<option>3+</option>
<option>4+</option>
<option>5+</option>
<option>Studio/Lot</option>
</select></left></p>
<p># of Beds:</p>
<p><select size="1" name="Beds">
<option selected>Any Number</option>
<option>1+</option>
<option>2+</option>
<option>3+</option>
<option>4+</option>
<option>5+</option>
<option>Studio/Lot</option>
</select></left></p>
<p>Price:</p>
<p><left> <select size="1" name="Price1">
<option>$0.00</option>
<option>$25,000</option>
<option>$50,000</option>
<option>$75,000</option>
<option>$100,000</option>
<option>$125,000</option>
<option>$150,000</option>
<option>$175,000</option>
</select> to: <select size="1" name="Price1">
<option>$0.00</option>
<option>$25,000</option>
<option>$50,000</option>
<option>$75,000</option>
<option>$100,000</option>
<option>$125,000</option>
<option>$150,000</option>
<option>$175,000</option>
</select></p>
</div>

</body>

</html>

Giomanach -> RE: XHTML/CSS Forms (10/13/2004 0:15:15)

Try something like this:

<html>

<head>
	<title></title>
<style>
div#titlenav { 
    background-color:#EFF4F8;
    text-align:left;
    margin-top:0px;
    padding:5px;
    border:1px solid #375A8B;
}

p{
	display: inline;
	}

p.column{
	padding-right: 50px;
}
    </style>
</head>
<body>
<div id="titlenav">		
<p>City:</p>
<p class="column"><input type="text" name="City" size="20"></left></p>
<p>Square Footage:</p>
<p class="column"><select size="1" name="SquareFootage">
<option selected>Any Square Footage</option>
<option>1+</option>
<option>2+</option>
<option>3+</option>
<option>4+</option>
<option>5+</option>
<option>Studio/Lot</option>
</select></left></p>
<p># of Beds:</p>
<p class="column"><select size="1" name="Beds">
<option selected>Any Number</option>
<option>1+</option>
<option>2+</option>
<option>3+</option>
<option>4+</option>
<option>5+</option>
<option>Studio/Lot</option>
</select></left></p>
<br><br>
<p>Price:</p>
<p class="column"><select size="1" name="Price1">
<option>$0.00</option>
<option>$25,000</option>
<option>$50,000</option>
<option>$75,000</option>
<option>$100,000</option>
<option>$125,000</option>
<option>$150,000</option>
<option>$175,000</option>
</select> to: <select size="1" name="Price1">
<option>$0.00</option>
<option>$25,000</option>
<option>$50,000</option>
<option>$75,000</option>
<option>$100,000</option>
<option>$125,000</option>
<option>$150,000</option>
<option>$175,000</option>
</select></p>
</div>
</body>
</html>

Page: [1]

0.0625