HTML5: Styling a form

This entry is part 32 of 34 in the series HTML5

There are 3 states to a form field and using the 3 states, we could style a form accordingly.

  • valid: A form element receives this class when its contents are valid according to the element type and the validation.
  • invalid: If the form element has incorrect content, then the invalid class is applied.
  • required: Any form element that has this attribute will be assigned this class.
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Form Styling</title>
    <style>
        * {
            margin: 0;
            font: 13px tahoma, verdana, sans-serif;
            padding: 0;
        }

        form {
            padding-top: 10px;
            width: 310px;
        }

        li {
            clear: both;
            list-style-type: none;
            margin: 0 0 10px;
        }

        label {
            display: block;
            float: left;
            margin: 0 10px 0 0;
            padding: 5px;
            text-align: right;
            width: 100px
        }

        input {
            background-position: 3px 5px;
            background-repeat: no-repeat;
            border-radius: 5px;
            padding: 5px 5px 5px 25px;
            width: 155px;
        }

        input:focus {
            outline: none;
        }

        input:invalid:required {
            background-image: url(//codecrawl.com/code/images/asterisk.png);
            box-shadow: 0px 0px 5px #f0bb18;
            border: 2px solid #f0bb18;
        }

        input:focus:invalid {
            background-image: url(//codecrawl.com/code/images/invalid.png);
            box-shadow: 0px 0px 5px #b01212;
            border: 2px solid #b01212;
        }

        input:valid {
            background-image: url(//codecrawl.com/code/images/accept.png);
            border: 2px solid #7ab526;
        }

        input[type=submit] {
            background: #7ab526;
            border: none;
            box-shadow: 0px 0px 5px #7ab526;
            color: #fff;
            cursor: pointer;
            float: right;
            font-weight: bold;
            padding-left: 5px;
            width: auto;
        }
    </style>
</head>
<body>
<form>
    <ol>
        <li><label for='tel'>Tel:</label><input placeholder='eg: 012345' required type='tel' id='tel' name='tel'/></li>
        <li><label for='website'>Website:</label><input required type='url' id='website' name='website'/></li>
        <li><label for='email'>Email:</label><input required type='email' id='email' name='email'/></li>
        <li><input type='submit' value='Send the form'/></li>
    </ol>
</form>

</body>
</html>
Series Navigation<< HTML5: Input multiple to allow multiple files upload
HTML5: Playing video >>