HTML5: Input multiple to allow multiple files upload

This entry is part 31 of 34 in the series HTML5

Using <input multiple>, we could allow multiple files upload.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Multiple Entries</title>
</head>
<body>
<form>
    <label for='upload'>Upload some files:</label>
    <br>
    <input multiple type='file' id='upload' name='upload'/>
    <br>
    <input type='submit' value='Go'/>
</form>

</body>
</html>

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>

HTML5: Playing video

This entry is part 33 of 34 in the series HTML5

HTML5 supports video tag to play video files but because of the different format of videos and browsers, not all formats are supported and I managed only to try out ogg video files.

Ogg video files can be played in Chrome and Firefox browsers.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Sample Video</title>
</head>
<body>
<video controls autoplay src='https://codecrawl.com/code/html/small.ogv'></video>
</body>
</html>

In the above video tag, I have put the video in autoplay so that once the browser is loaded, the video will play immediately.

The controls have been added to the player as well.

HTML5: Playing audio files

This entry is part 34 of 34 in the series HTML5

Audio tag is also supported in HTML5.

HTML5 is really a work in progress.  Not all browsers support audio tag.

The tag works now in Chrome and Safari.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Sample Audio</title>
</head>
<body>
<audio controls src='https://codecrawl.com/code/html/dance.mp3'></audio>
</body>
</html>