I am creating a form maker with HTML and JavaScript. I am splitting the form areas using an unordered list. Like so.
HTML Code:
<form>
<ul>
<li>
<label for="first">Name: </label>
<input type="text" name="first" id="first" value="" maxlength=""/>
<label for="first">First</label>
<input type="text" name="last" id="last" value="" maxlength=""/>
<label for="last">Last</label>
</li>
</ul>
</form>
Fine?
However they need to be separated to provide the result I want. So should I use a span or fieldset? Here is an example...
HTML Code:
<form>
<ul>
<li>
<span>
<label for="first">Name: </label>
</span>
<span>
<input type="text" name="first" id="first" value="" maxlength=""/>
<label for="first">First</label>
</span>
<span>
<input type="text" name="last" id="last" value="" maxlength=""/>
<label for="last">Last</label>
</span>
</li>
</ul>
</form>
This is what I want...
HTML Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
li{
list-style:none;
}
li span{
float:left;
margin: 0 5px 0 0;
}
label{
clear:both;
display:block;
margin:0;
}
input[type="text"]**
margin:0;
center top;
}
</style>
</head>
<body>
<form>
<ul>
<li>
<span>
<label for="first">Name: </label>
</span>
<span>
<input type="text" name="first" id="first" value="" maxlength=""/>
<label for="first">First</label>
</span>
<span>
<input type="text" name="last" id="last" value="" maxlength=""/>
<label for="last">Last</label>
</span>
</li>
</ul>
</form>
</body>
I do not know if there are any advantages or disadvantages when it comes to search engines etc... What is the best way to code this? Is there a way to do this without separating it? Is doing this with a list good? etc..