XML text alignment without using tables / div's

[sweenster]

I have an old HTML page:

http://www.whatsinmypocket.co.uk/sweenster/html/reg-orig.html

that i want to convert to XML - i.e. using no tables.

My converted page currently looks like:
http://www.whatsinmypocket.co.uk/sweenster/html/reg-new.html

BUT on the original page you'll notice that the text and the input boxes are all nicely aligned. I want to create this same effect on the XML page.

I have used:

<p>Your Name:&amp;nbsp;<input type="text" name="name"></p>


for each input line, but i was wondering if there was some way of adding a 'tab' in place of the &amp;nbsp ;

any suggestions??
:)

[me']

Just a little point: you can have a valid XML layout built solely on tables. Semantics is nothing to do with Standards.

How about margin-left: on the input? Unless you want all your inputs to line up, then it gets a bit trickier, but not impossible, try this:form p { position: relative }
form p input { position: absolute; left: 20em }Finally, remember to close the input tag with /> and not just >.

Oh, and to display &amp;nbsp; on these boards, use &amp;amp;nbsp;.

[ReadMe.txt]

in moz the Why register box is floating around over things for some reason, i dont think it's supposed to be like that.

As for doing and XHTML form, you should really be using fieldset, label and input, like so:


<style type="text/css">
label {
display block;
width: 400px;
}
label input {
float: right;
}
fieldset {
border-width: 0;
}
input#submit {
width: 50px;
margin: 5px auto;
}

</style>

<form action="index.php" method="POST">
<fieldset>
<input type="hidden" name="login" value="2">
<input type="hidden" name="loadval" value="regcheck">
<p>Please Complete The Form Below. ALL FIELDS are required.</p>
<label>Chosen Username:<input type="text" size="20" name="username" class="FORM"></label>
<label>E-mail Address:<input type="text" size="20" name="email" class="FORM"></label>
<label>Forename:<input type="text" size="20" name="firstname" class="FORM"></label>
<input type="submit" name="submit" value="Submit Form" class="FORM" id="submit">
</fieldset>
</form>

[coder_seth]

can you explain the semantics of wrapping the form contents in that <fieldset> tag? especially since the style associated with it does nothing, essentially, i wonder of its purpose.

as for laying out forms without tables, this is a method i got from another site:


form {
margin: 10px 0px;
padding: 0px;
}

form div {
display: block;
margin: 10px 0px;
padding: 0px;
}

label {
margin: 0px 5px 0px 0px;
padding: 0px;
}

input, textarea {
margin: 0px;
padding: 2px;
border: solid 1px #999;
}

.button { /* seperate class for "submit" buttons and the like */
border: solid 1px #2D5F4F;
background: #2B70B6;
color: #FFF;
font-weight: bold;
}

.input_width {
width: 200px;
}



<form method="post" action="index.cfm?p=contact&action=submit" id="dsm_contact">
<h2>Contact Form</h2>
<div><label for="name">Name:</label><input name="name" type="text" id="name" class="input_width" /></div>
<div><label for="phone">Phone:</label><input name="phone" type="text" id="phone" class="input_width" /></div>
<div><label for="email">Email:</label><input name="email" type="text" id="email" class="input_width" /></div>
<div><label for="comments">Comments:</label><textarea name="comments" cols="" rows="6" class="input_width" id="comments"></textarea></div>
<div><label>&nbsp;</label><input name="submit" type="submit" value="Send" class="button" />&nbsp;<input name="reset" type="reset" value="Clear" class="button" /></div>
</form>


this site is in progress, and i think i'll end up changing the name of that "input_width" class to be something specific to this particular form, as other forms do not beg the same layout necessarily.

but yes.. this lays out spiffy. the thing that irks me about it is that you have to find out how wide your widest LABEL will be first, and then set your LABEL rule accordingly. if it could simply be dynamic based on the contained text, that would be ideal.

the wrapping DIVS for each row seem excessive in light of the code posted in this thread, but even if you set the LABELs as block level to achieve a clean row-by-row look, how would you ensure that each INPUT's left side lines up nicely? of course presuming that's what you want, but what else would you do? most forms are as such because it's a form, and it makes sense that way.