Does this code contain anything invalid. I have a form with a table inside. Is that alright?
<form name="myForm" id="myForm">
<table id="myTab">
<tr>
开发者_运维问答 <td>
<label for="id">User ID:</label>
<input type="text" id="id" />
</td>
</tr>
<tr>
<td>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" />
</td>
<td>
<button type="button" class="submit">Submit</button>
</td>
</tr>
<tr><td><input type="reset" /></td></tr>
</table>
<div class="error"></div><div class="correct"></div>
</form>
For the result -- http://jsfiddle.net/mBwAh/
A <form>
can contain text and markup (paragraphs, lists, etc.), there are no restrictions listed for what it can contain. Here's the W3C spec which says so:
http://www.w3.org/TR/html4/interact/forms.html#h-17.3
As for you're <table>
usage, it's perfectly valid HTML, in fact the <table>
element is in the HTML5 spec Here's the W3C Spec for that:
http://www.w3.org/TR/html5/tabular-data.html#the-table-element
You'll want to also add a colspan
to your <tr>
which only contains one <td>
, You should also add a name
attribute to your <input>
as it won't do anything on submit without it.
<input type="text" id="id" name="id" />
You're not saying what the problem is, but one thing that catches the eye is the fact that you have differing numbers of td
s per row without a colspan
to even them out.
<tr>
<td colspan="2"> <--- makes column span across three columns in the other rows
<form name="myForm" id="myForm">
<table id="myTab">
<tr>
<td colspan="2">
<label for="id">User ID:</label>
<input type="text" id="id" />
</td>
</tr>
<tr>
<td>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" />
</td>
<td colspan="2">
<button type="button" class="submit">Submit</button>
</td>
</tr>
<tr><td colspan="2"><input type="reset" /></td></tr>
</table>
<div class="error"></div><div class="correct"></div>
</form>
Some colspan
s were missing.
You can check the code for HTML5 validity here: http://validator.w3.org/#validate_by_input
This might be "Valid", but you're using a table structure for layout purpose, which is not a great idea. If possible, you should change your stucture to something like this.
<form name="myForm" id="myForm">
<label for="id">User ID:</label>
<input type="text" id="id" /><br />
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" /><br />
<button type="button" class="submit">Submit</button><br />
<input type="reset" /><br />
<div class="error"></div><div class="correct"></div>
</form>
Hope this help :)
精彩评论