HTML5: <label> tag

This entry is part 17 of 34 in the series HTML5

In the earlier example, we have used a <label> tag which is new in HTML5.

Quick contact form

With this <label> tag, if we click on the text Email, the email input box will be selected.

Notice in line 14, we have used id=’email’ to bind the <input> textbox to the email label in line 13.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
</head>
<body>
<form>
    <fieldset>
        <legend>Contact information</legend>
        <ul>
            <li>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
            </li>
            <li>
                <label for='tel'>Telephone number:</label>
                <input required type='tel' id='tel' name='tel'/>
            </li>
            <li>
                <label for='url'>Website:</label>
                <input required type='url' id='url' name='url'/>
            </li>
        </ul>
        <input type='submit' value='Submit this' />
    </fieldset>
</form>
</body>
</html>

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>

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 Canvas: Using an image to fill the canvas background

This entry is part 17 of 17 in the series HTML5 Canvas

The canvas API provides a way for us to fill the background with an image.

Using the createPattern method, you can use an image to fill the background of a shape.

Syntax:

Context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Image in canvas</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    var canvasImage = new Image();
    function createImagePattern() {
        var pattern = canvas.createPattern(canvasImage, 'repeat');
        canvas.rect(0, 0, 640, 480);
        canvas.fillStyle = pattern;
        canvas.fill();
    }
        canvasImage.addEventListener('load',createImagePattern,false);
    canvasImage.src = 'https://codecrawl.com/code/images/ushuaia1.jpg';
</script>
</body>
</html>

The repeat parameter can have the following values:

  • repeat: Repeats the pattern horizontally and vertically
  • repeat-x: Repeats the pattern horizontally
  • repeat-y: Repeats the pattern vertically
  • no-repeat: Does not repeat the pattern

HTML5 Canvas: Cropping an image

This entry is part 16 of 17 in the series HTML5 Canvas

Using the drawImage method, we can have the image cropped.

The cropping properties are the start X and Y positions in the image and the width and height of the cropping frame.

Syntax:

ontext.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Cropping an image</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    var canvasImage = new Image();
    function cropImage() {
        canvas.drawImage(canvasImage,
                0, // position X inside the crop
                0, // position Y inside the crop
                457, // source image width
                343, // source image height
                110, //crop position X
                110, //crop position Y
                250, //crop width
                250 //crop height
        );
    }
    canvasImage.addEventListener('load', cropImage, false);
    canvasImage.src = 'https://codecrawl.com/code/images/ushuaia.jpg';
</script>
</body>
</html>

The original jpg image without cropping is located in this link.