🚀 HTML5 Features

<!-- Email with validation -->
<input type="email" placeholder="email@example.com">

<!-- URL with validation -->
<input type="url" placeholder="https://example.com">

<!-- Number with min/max -->
<input type="number" min="0" max="100" step="5">

<!-- Date picker -->
<input type="date">

<!-- Time picker -->
<input type="time">

<!-- Color picker -->
<input type="color">

<!-- Range slider -->
<input type="range" min="0" max="100" value="50">

<!-- Search with clear button -->
<input type="search" placeholder="Search...">

<!-- Telephone -->
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

<!-- Datalist (autocomplete) -->
<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

<!-- Output element -->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0"> =
    <output name="result" for="a b">0</output>
</form>

<!-- Progress bar -->
<progress value="70" max="100">70%</progress>

<!-- Meter (gauge) -->
<meter value="6" min="0" max="10">6 out of 10</meter>

<!-- Canvas for drawing -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 150, 80);
</script>

<!-- SVG (Scalable Vector Graphics) -->
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
</svg>

<!-- Video -->
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    Your browser doesn't support video.
</video>

<!-- Audio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser doesn't support audio.
</audio>

<!-- Local Storage (JavaScript) -->
<script>
    // Store data
    localStorage.setItem('username', 'John');
    
    // Retrieve data
    const user = localStorage.getItem('username');
    
    // Remove data
    localStorage.removeItem('username');
</script>

<!-- Session Storage -->
<script>
    sessionStorage.setItem('temp', 'value');
    const temp = sessionStorage.getItem('temp');
</script>

<script>
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;
                console.log(`Lat: ${lat}, Lon: ${lon}`);
            },
            (error) => {
                console.error('Error getting location:', error);
            }
        );
    }
</script>