help validate this please

[xcoderx]

its the login form i made but according to w3 its not valid

 

Validation Output: 16 Errors

Line 350, Column 14: ID "inputbox" already defined

    <div id="inputbox"><input type="text" name="fname"  /></div>

 

✉

 

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 347, Column 14: ID "inputbox" first defined here

    <div id="inputbox"><input type="text" name="username"  /></div>

Line 353, Column 14: ID "inputbox" already defined

    <div id="inputbox"><input type="text" name="lname"  /></div>

 

✉

 

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 347, Column 14: ID "inputbox" first defined here

    <div id="inputbox"><input type="text" name="username"  /></div>

Line 356, Column 14: ID "inputbox" already defined

    <div id="inputbox"><input type="text" name="email"  /></div>

 

✉

 

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 347, Column 14: ID "inputbox" first defined here

    <div id="inputbox"><input type="text" name="username"  /></div>

Line 359, Column 14: ID "inputbox" already defined

    <div id="inputbox"><input type="password" name="password"  /></div>

 

✉

 

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 347, Column 14: ID "inputbox" first defined here

    <div id="inputbox"><input type="text" name="username"  /></div>

Line 362, Column 14: ID "inputbox" already defined

    <div id="inputbox"><input type="password" name="password"  /></div>

 

✉

 

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 347, Column 14: ID "inputbox" first defined here

    <div id="inputbox"><input type="text" name="username"  /></div>

Line 377, Column 14: ID "inputbox" already defined

    <div id="inputbox"><input type="text" name="tcity" id="mail" /></div>

 

✉

 

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 347, Column 14: ID "inputbox" first defined here

    <div id="inputbox"><input type="text" name="username"  /></div>

Line 380, Column 73: end tag for element "textarea" which is not open

<div id="textbox"><textarea name="desc"rows="10" cols="30" /></textarea> </div>

 

✉

 

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

 

If this error occurred in a script section of your document, you should probably read this FAQ entry.

Line 380, Column 40: attributes construct error

<div id="textbox"><textarea name="desc"rows="10" cols="30" /></textarea> </div>

 

✉

Line 380, Column 40: Couldn't find end of Start Tag textarea line 380

<div id="textbox"><textarea name="desc"rows="10" cols="30" /></textarea> </div>

 

✉

Line 380, Column 73: Opening and ending tag mismatch: div line 380 and textarea

<div id="textbox"><textarea name="desc"rows="10" cols="30" /></textarea> </div>

 

✉

Line 380, Column 80: Opening and ending tag mismatch: fieldset line 345 and div

<div id="textbox"><textarea name="desc"rows="10" cols="30" /></textarea> </div>

 

✉

Line 385, Column 12: Opening and ending tag mismatch: form line 343 and fieldset

</fieldset>

 

✉

Line 386, Column 7: Opening and ending tag mismatch: div line 339 and form

</form>   

 

✉

Line 411, Column 6: Opening and ending tag mismatch: body line 25 and div

</div>

 

✉

Line 430, Column 7: Opening and ending tag mismatch: html line 2 and body

</body>

 

✉

Line 431: Extra content at the end of the document

</html>

 

✉

 

 

[xcoderx]

sorry its registration form

 

here the codes

<div id="content">
    <h1>Registration Form</h1>  
<br/>

<form action="#" method="get">

<fieldset>
    <label>Username:</label>
    <div id="inputbox"><input type="text" name="username"  /></div>
    <br /><br />
 <label>First Name:</label>
    <div id="inputbox"><input type="text" name="fname"  /></div>
    <br /><br />
 <label>Last Name:</label>
    <div id="inputbox"><input type="text" name="lname"  /></div>
    <br /><br />
    <label>E-mail:</label>
    <div id="inputbox"><input type="text" name="email"  /></div>
    <br /><br />
<label>Password:</label>
    <div id="inputbox"><input type="password" name="password"  /></div>
    <br /><br />
<label>Repeat Password:</label>
    <div id="inputbox"><input type="password" name="password"  /></div>
    <br /><br />
<label>Country:</label>
    <select name="country">
<option>India</option>
<option>USA</option>
</select>
<br /><br />
 <label>State:</label>
    <select name="state">
<option>Assam</option>
<option>South Carolina</option>
</select>
<br /><br />
    <label>City/Town:</label>
    <div id="inputbox"><input type="text" name="tcity" id="mail" /></div>
<br /><br />
<label>Textarea:</label>
<div id="textbox"><textarea name="desc"rows="10" cols="30" /></textarea> </div>
<br /><br />

<input type="image" src="style/images/submit.gif" name="reg" value="submit" />
<br />
</fieldset>
</form>    

</div>

the css

fieldset { 
  border:0px 
  }
label {
  float:left;
  width:16%;
  margin-right:2.5em;
  padding-top:0.2em;
  text-align:right;
  font-size:15px;
  }
#inputbox{
   float:left;
           margin-top: 2px;
	   margin-left:8px;
   height:21px;
           width:180px;
           background:url("images/input.gif") no-repeat;
  }
  
#inputbox input {
 background:none;
 border:none;
 width:165px;
 height:18px;
 margin:0;
 margin-left:7px;
 margin-top:2px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:15px;
 color: #999999;
  }
#textbox{
   float:left;
           margin-top: 2px;
	   margin-left:8px;
   height:160px;
           width:310px;
           background:url("images/textarea.gif") no-repeat;
  }
  
#textbox textarea {
 background:none;
 border:none;
 width:300px;
 height:160px;
 margin:0;
 margin-left:5px;
 margin-top:2px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:15px;
 color: #999999;
     overflow: hidden;
     resize: none;
     display:inline;
  }	  
  
select {
  font-style:normal;
          background-color:#F8F8F8;
          color:#FF6600;
  margin-left:9px;
  }	  
submit{
          width:85px;
          height:22px;
          border:none;
          float:right;
}	 

 

can someone help me make it valid? even my submit button display weirdly not in the bottom

[haku]

You can only use IDs once in a document. You are using the ID 'inputbox' multiple times. If you want to use it multiple times, you need to make it a class, not an ID.

[trq]

You can only use IDs once in a document. You are using the ID 'inputbox' multiple times. If you want to use it multiple times, you need to make it a class, not an ID.

 

Funnilly enough, that's pretty much exactly what the error says.

[xcoderx]

ah now got it. yup thrope for people who are experienced for them sure would be funny. but not for beginers, yes i did realize i could not use the same id twice or more but just it did not click my mind that class would be used multiple times.

[xcoderx]

ok i made it valid but its not displaying properly, the submit buttom do not wish to come down it stays in the same line with textarea, it just wont come down even if i add br

 

<div id="formarea">
<form action="#" method="get">
<fieldset>
    <label>Username:</label>
    <div class="inputbox"><input type="text" name="username"  /></div>
    <br /><br />
 <label>First Name:</label>
    <div class="inputbox"><input type="text" name="fname"  /></div>
    <br /><br />
 <label>Last Name:</label>
    <div class="inputbox"><input type="text" name="lname"  /></div>
    <br /><br />
    <label>E-mail:</label>
    <div class="inputbox"><input type="text" name="email"  /></div>
    <br /><br />
<label>Password:</label>
    <div class="inputbox"><input type="password" name="password"  /></div>
    <br /><br />
<label>Repeat Password:</label>
    <div class="inputbox"><input type="password" name="password"  /></div>
    <br /><br />
<label>Country:</label>
    <select name="country">
<option>India</option>
<option>USA</option>
</select>
<br /><br />
 <label>State:</label>
    <select name="state">
<option>Assam</option>
<option>South Carolina</option>
</select>
<br /><br />
    <label>City/Town:</label>
    <div class="inputbox"><input type="text" name="tcity" id="mail" /></div>
<br /><br />
<label>Textarea:</label>
<div id="textbox"><textarea name="desc" rows="10" cols="30"></textarea> </div>
<br /><br />	
<div class="submit"><input type="image" src="style/images/submit.gif" name="reg" value="submit" /></div>
	</fieldset>
</form>    
</div>

The css


fieldset { 
	border : 0; 
} 
label { 
	float : left; 
	width : 16%; 
	margin-right : 2.5em; 
	padding-top : 0.2em; 
	text-align : right; 
	font-size : 15px; 
} 

.inputbox { 
	float : left; 
	margin-top : 2px; 
	margin-left : 8px; 
	height : auto; 
	width : 180px; 
	background : url("images/input.gif") no-repeat; 
} 
.inputbox input { 
	background : none; 
	border : none; 
	width : 165px; 
	height : 18px; 
	margin : 0; 
	margin-left : 7px; 
	margin-top : 2px; 
	font-family : Verdana, Arial, Helvetica, sans-serif; 
	font-size : 15px; 
	color : #999999; 
} 
#textbox { 
	float : left; 
	margin-top : 2px; 
	margin-left : 8px; 
	height : 160px; 
	width : 310px; 
	background : url("images/textarea.gif") no-repeat; 
} 
#textbox textarea { 
	background : none; 
	border : none; 
	width : 300px; 
	height : 160px; 
	margin : 0; 
	margin-left : 5px; 
	margin-top : 2px; 
	font-family : Verdana, Arial, Helvetica, sans-serif; 
	font-size : 15px; 
	color : #999999; 
	overflow : hidden; 
	display : inline; 
} 
select { 
	font-style : normal; 
	background-color : #f8f8f8; 
	color : #ff6600; 
	margin-left : 9px; 
} 
.submit { 
	width : 85px; 
	height : 22px; 
	border : none; 
	float : left; 
} 
#twitter { 
	position : fixed; 
	top : 280px; 
	width : 48px; 
	height : 48px; 
	z-index : auto; 
	cursor : pointer; 
	left : 0; 
} 
#facebook { 
	position : fixed; 
	top : 280px; 
	width : 48px; 
	height : 48px; 
	z-index : auto; 
	cursor : pointer; 
	right : 0; 
}
#formarea{
width:auto;
height:auto;
}

 

 

now could someone help make it display and in a proper manner?

[haku]

It's almost definitely a CSS issue.

 

You really shouldn't ever need br tags honestly. Or at least, almost never. I very, very rarely use them. Between floats and clears, you should be able to do whatever it is you need to do.

[xcoderx]

bro help me out with these form im just unable to do it. when i place them between my main container it gives error the torder of this form is shorter than the form. tghe textarea moves out of the main form. im sure its not perfect that is why im getting all the errors :-(

[haku]

First fix the errors, THEN work on the layout.