CODEWITHSUNDEEP
htmlformsvalidation
Adrian
Adrian

Reputation: 47

html forms and inputs not validating on w3c validator

I just started working with forms and inputs http://www.w3schools.com/html/html_forms.asp and they work fine as far as I can tell, but they cause a load of errors when I run it through W3C validation service. http://validator.w3.org/#validate_by_input The code validates fine when I remove the forms and inputs. The only thing I can think of, is that the forms and inputs are not entirely html, as I don`t yet know what the name= does Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>login</title>
    <link type='text/css' rel='stylesheet' href='css/login.css'>
</head>

<body>

    <div id ="header">
        <h1>log in</h1>
    </div>

    <div id ="name">
        <form>
            editors name: <input type="text" name="name">
        </form>
    </div>
    <div id="pswd">
        <form>
            password: <input type="password" name="pwd">
        </form>
    </div>

    <div id="options">
        <h3>Or</h3>
    </div>  
    <div id="wayBack">
        <a href="www.adrianhoulewebprojects.com/easyEdit.html">Return to page</a>   
    </div>

</body>

</html>

Upvotes: 0

Views: 243

Answers (1)

michael
michael

Reputation: 4483

I think what you're trying to achieve is this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>login</title>
    <link type='text/css' rel='stylesheet' href='css/login.css'>
</head>

<body>

    <div id ="header">
        <h1>log in</h1>
    </div>

    <form action="/">
        <div id ="name">
            editors name: <input type="text" name="name">
        </div>
        <div id="pswd">
            password: <input type="password" name="pwd">
        </div>
    </form>

    <div id="options">
        <h3>Or</h3>
    </div>  
    <div id="wayBack">
        <a href="www.adrianhoulewebprojects.com/easyEdit.html">Return to page</a>   
    </div>

</body>

</html>

The fields should be contained with in one form so that they get submitted together. The errors were raised because it's not valid to have text (editors name / password) as a direct child of a FORM element

A more semantic solution would be...

<form action="/">
    <div>
        <label for="input_name">editors name:</label>
        <input type="text" name="name" id="input_name" />

        <p>It's completely valid to have text here inside a P tag</p>

        <label for="input_password">password:</label>
        <input type="password" name="password" id="input_password" />
    </div>
</form>

This would allow the user to click on the label in order to focus the corresponding form field

Upvotes: 1

Related Questions