开发者

Is this HTML valid?

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 tds 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 colspans 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 :)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜