PDA

View Full Version : form layout using css

spybreak
04-11-2003, 11:06 PM
Hi!

I made a Form and I want it to look like this: click (http://www.spybreak.de/test.html)

This is the code:

<html>
<body>

<style type="text/css">
table { color: #000000; font-family: Verdana; font-size: 10pt; }
</style>

<table width="250">
<tr>
<td width="10"><span style="white-space: nowrap;">Real Name:</span></td>
<td><input name="realName" id="realName" style="width: 100%;"></td>
</tr>
</table>

<table width="250">
<tr>
<td width="10"><span style="white-space: nowrap;">Email:</span></td>
<td><input name="realName" id="realName" style="width: 100%;"></td>
</tr>
</table>

<table width="250">
<tr>
<td width="10"><span style="white-space: nowrap;">Location:</span></td>
<td><input name="realName" id="realName" style="width: 100%;"></td>
</tr>
</table>

</body>
</html>




Now the problem is: Can I do that in pure Css? You see, I need lots of tables to align the form labels and elements the way they are.

I tried it with CSS but it doesnt work: click (http://www.spybreak.de/test2.html)

<html>
<form>
<style>

.myForm {
background: #CCCCCC;
padding: 5px;
width: 400px;
max-width: 300px;
white-space: nowrap;
}
</style>
<span class="myForm">Real Name: <input name="realName" style="width: 100%;"></span><br>
<span class="myForm">email: <input name="email" style="width: 100%;"></span><br>

</form>
</html>

thanks, I appreciate it

- Robert
Quiet Storm
04-11-2003, 11:53 PM
How's this?:


<style type="text/css">
div { font-family:Verdana; font-size:10pt; padding:3px; width:250px; background-color:#ccc;}

input { color:#000; font-family:Verdana; font-size:10pt; margin-top:7px;}

#first {width:165px;}
#second {width:200px;}
#third {width:177px;}
</style>



<DIV>
Real Name: <INPUT id="first" TYPE="text"><br>
Email: <INPUT ID="second" TYPE="text"><br>
Location: <INPUT ID="third" TYPE="text">
</DIV>
spybreak
04-12-2003, 12:15 AM
you nicely formatted that :) very cool with all the colors and stuff.


but you know, thats not really flexible enough. there are lots of inputs and it would be difficult to work with it that way.


Thanks! though :thumbsup:
spybreak
04-12-2003, 03:03 PM
ok, this Issue has been resolved. dJomp at csscreator.com Forums told me how:


<html>
<body>

<style type="text/css">
.myForm { width: 300px; }
</style>

<div class="myForm">
<span style="float: left;">Real Name:</span>
<input name="realName" style="width: 100%;">
</div>

<div class="myForm">
<span style="float: left;">email:</span>
<input name="email" style="width: 100%;">
</div>

</body>
</html>


*happy*
brothercake
04-12-2003, 06:56 PM
Originally posted by spybreak
ok, this Issue has been resolved.
One small correction - those SPANs should be LABELs:

<label for="realName" style="float: left;">Real Name:</label>
<input name="realName" id="realName" style="width: 100%;">
Vladdy
04-12-2003, 07:11 PM
I prefer the following compromize as it reduces code by removing the need to give id for all form elements (to work with <label>). I persoally like my inputs to line up, but if you do not just remove the width attribute in span definition.

<style>
#myForm label
{ display: block;
}
#myForm span
{ display: block;
float: left;
width: 150px;
}
</style>
...
<form id="myForm">
<label><span>Input 1</span><input type="text" name="input1" value="" /></label>
<label><span>Input 2</span><input type="text" name="input2" value="" /></label>
</form>
brothercake
04-12-2003, 07:24 PM
Originally posted by Vladdy
I prefer the following compromize as it reduces code by removing the need to give id for all form elements (to work with <label>).
But the whole point of label is semantic association - if you don't associate the label with an element then there's no point in using a <label> at all. And anyway - iirc in XHTML Strict where name is still allowed, ID is compulsory - those elements must have IDs :p

There's a practical benefit you know - clicking a label focusses or checks its associated control - just like it would in an OS GUI.

As it goes though ... I'd actually given up on being able to line up form elements anymore - I was just resolved to not being bothered about it. Never occured to me to make the label a block-level element :rolleyes: :)
Vladdy
04-12-2003, 07:41 PM
Yes, and the code I suggested does just that (and works as it should in Moz).
HTML 4.01 (I have not checked if XHTML makes it different in this regard, but I do not think so) allows for implicit control association:

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

The only limitation is that only one control element can be withing the label element. There is nothing about the formating of the label text itself. So the following markups should be valid:

<label>label text <input type="text" name="input"></label>
<label>label text with <em>bold</em> word <input type="text" name="input"></label>
<label><span>label text</span><input type="text" name="input"></label>
brothercake
04-12-2003, 08:25 PM
Oh right ... cool - I didn't know the element could be inside the label ...