Fieldset or Span?

Arminius · 06-10-2009, 07:09 PM

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..

WebDesignTuts · 06-11-2009, 08:17 AM

The span tag won't actually do anything visually to the page unless you add styles to it - it's just like a DIV.

Fieldset would generally be used. Is this something like what you want?

Code:

<form>
     <fieldset>
          <legend>Name</legend>
	  <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>
      </fieldset>
</form>

Arminius · 06-11-2009, 08:25 AM

the look that i am wanting is what you would see if you looked at the third html box in a browser

WebDesignTuts · 06-11-2009, 12:25 PM

Can you not use that exact code?

06-11-2009, 08:17 AM	#2 (permalink)
WebDesignTuts Registered User Join Date: Jun 2009 Location: Ireland Posts: 12 OS: Vista HP SP1 My System	Re: Fieldset or Span? The span tag won't actually do anything visually to the page unless you add styles to it - it's just like a DIV. Fieldset would generally be used. Is this something like what you want? Code: <form> <fieldset> <legend>Name</legend> <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> </fieldset> </form> __________________ Kieran C

06-11-2009, 08:25 AM	#3 (permalink)
Arminius Registered User Join Date: Feb 2009 Posts: 5 OS: Vista	Re: Fieldset or Span? the look that i am wanting is what you would see if you looked at the third html box in a browser

06-11-2009, 12:25 PM	#4 (permalink)
WebDesignTuts Registered User Join Date: Jun 2009 Location: Ireland Posts: 12 OS: Vista HP SP1 My System	Re: Fieldset or Span? Can you not use that exact code? __________________ Kieran C