View source

Form layout aligned with CSS
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Home Page 1</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
    <form action="#">
        <fieldset>
            <legend>This is my form</legend>
            <p><label for="name">Name</label> <input type="text" id="name" /></p>
            <p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /><br /></p>
            <p class="submit"><input type="submit" value="Submit" /></p>
        </fieldset>
    </form>
</body>
</html>
 
label {
    width: 4em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block
}
.submit input {
    margin-left: 4.5em;
}
input {
    color: #781351;
    background: #fee3ad;
    border: 1px solid #781351
}
.submit input {
    color: #000;
    background: #ffa20f;
    border: 2px outset #d7b9c9
}
fieldset {
    border: 1px solid #781351;
    width: 20em
}
legend {
    color: #fff;
    background: #ffa20c;
    border: 1px solid #781351;
    padding: 2px 6px
}

</pre>

----
Back to [[HTML]]