Dear Friends!
My trouble: My form display correct in IE & Firefox. But I think my code is not semantic enought.
Solution: Could we discuss about the way which is the best for form markup - Semantic.
Example login form:
_____Usename *:
____Passwords *:
________________[Submit button]
Source code Xhtml:
Use Break per line:
<form action="WebStandard.html" method="post">
<div id="strictDTD_cheat">
<label for="uName">Username:</label>
<input type="text" name="uName" id="uName" /><br />
<label for="pName">Password:</label>
<input type="text" name="pName" id="pName" /><br />
<input type="submit" name="Submit" value="Submit" />
</div>
</form>
Split form into Division(line)
<form action="WebStandard.html" method="post">
<div id="username">
<label for="uName">Username:</label>
<input type="text" name="uName" id="uName" />
</div>
<div id="password">
<label for="pName">Password:</label>
<input type="text" name="pName" id="pName" />
</div>
<div id="formActions">
<input type="submit" name="Submit" value="Submit" />
</div>
</form>For semantic writeup I would get rid of all the divs and brs since none of then are semantically part of the content. Use stylesheet commands to position the elements of the form.
<form action="WebStandard.html" method="post">
<label for="uName">Username:</label>
<input type="text" name="uName" id="uName" />
<label for="pName">Password:</label>
<input type="text" name="pName" id="pName" />
<input type="submit" name="Submit" value="Submit" />
</form>
The following CSS probably wont set up the table exactly as you want it but should give you an idea of how to do what you want.
form {width:300px;}
label {width:150px; float:left:display:block;}
input {width:150px; float:right;}Dear Stephen!
For semantic writeup I would get rid of all the divs and brs since none of then are semantically part of the content. Use stylesheet commands to position the elements of the form.
I knew this, but it is feel less messy than other when it display without stylesheet.
Regards.Myself, I use:
<style type="text/css">
label, button {display:block}
</style>
<form action="WebStandard.html" method="post">
<fieldset>
<legend>Log on</legend>
<label>Username:<input type="text" name="uName"></label>
<label>Password:<input type="text" name="pName"></label>
<button type="submit">Submit</button>
</fieldset>
</form>But as DIVs and BRs are semanticly neutral, conveying no meaning, you can stick them in where you please.I like the additional styling fodder provided by the div/label/input variation but that may just be due to inexperience with the label wrapped input.
My trouble: My form display correct in IE & Firefox. But I think my code is not semantic enought.
Solution: Could we discuss about the way which is the best for form markup - Semantic.
Example login form:
_____Usename *:
____Passwords *:
________________[Submit button]
Source code Xhtml:
Use Break per line:
<form action="WebStandard.html" method="post">
<div id="strictDTD_cheat">
<label for="uName">Username:</label>
<input type="text" name="uName" id="uName" /><br />
<label for="pName">Password:</label>
<input type="text" name="pName" id="pName" /><br />
<input type="submit" name="Submit" value="Submit" />
</div>
</form>
Split form into Division(line)
<form action="WebStandard.html" method="post">
<div id="username">
<label for="uName">Username:</label>
<input type="text" name="uName" id="uName" />
</div>
<div id="password">
<label for="pName">Password:</label>
<input type="text" name="pName" id="pName" />
</div>
<div id="formActions">
<input type="submit" name="Submit" value="Submit" />
</div>
</form>For semantic writeup I would get rid of all the divs and brs since none of then are semantically part of the content. Use stylesheet commands to position the elements of the form.
<form action="WebStandard.html" method="post">
<label for="uName">Username:</label>
<input type="text" name="uName" id="uName" />
<label for="pName">Password:</label>
<input type="text" name="pName" id="pName" />
<input type="submit" name="Submit" value="Submit" />
</form>
The following CSS probably wont set up the table exactly as you want it but should give you an idea of how to do what you want.
form {width:300px;}
label {width:150px; float:left:display:block;}
input {width:150px; float:right;}Dear Stephen!
For semantic writeup I would get rid of all the divs and brs since none of then are semantically part of the content. Use stylesheet commands to position the elements of the form.
I knew this, but it is feel less messy than other when it display without stylesheet.
Regards.Myself, I use:
<style type="text/css">
label, button {display:block}
</style>
<form action="WebStandard.html" method="post">
<fieldset>
<legend>Log on</legend>
<label>Username:<input type="text" name="uName"></label>
<label>Password:<input type="text" name="pName"></label>
<button type="submit">Submit</button>
</fieldset>
</form>But as DIVs and BRs are semanticly neutral, conveying no meaning, you can stick them in where you please.I like the additional styling fodder provided by the div/label/input variation but that may just be due to inexperience with the label wrapped input.