Exemplos Interativos de HTML e CSS - Parte 4

<form>
  <label for="birthdaytime">Aniversário (data e hora):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
      

<form>
  <label for="email63">Digite seu e-mail:</label>
  <input type="email" id="email63" name="email">
</form>

<form>
  <input type="image" src="https://via.placeholder.com/48x48?text=Enviar" alt="Enviar" width="48" height="48">
</form>
      

<form>
  <label for="myfile">Selecione um arquivo:</label>
  <input type="file" id="myfile" name="myfile" multiple>
</form>

<form>
  <input type="hidden" id="custId" name="custId" value="3487">
</form>
      

<form>
  <label for="bdaymonth">Aniversário (mês e ano):</label>
  <input type="month" id="bdaymonth" name="bdaymonth"><br><br>
  <label for="num65">Número:</label>
  <input type="number" id="num65" name="num65" value="10">
</form>
      

<form>
  <label for="quantity">Quantidade (0 a 100, passo 10):</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
      

<form>
  <label for="vol">Volume:</label>
  <input type="range" id="vol" name="vol" min="0" max="100">
</form>

<form>
  <label for="gsearch">Pesquisar:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>
      

<form>
  <label for="phone68">Telefone:</label>
  <input type="tel" id="phone68" name="phone" placeholder="123-45-678"><br><br>
  <label for="time68">Tempo:</label>
  <input type="time" id="time68" name="time"><br><br>
  <label for="url68">URL:</label>
  <input type="url" id="url68" name="url" placeholder="https://exemplo.com">
</form>
      

<form>
  <label for="week69">Selecione uma semana:</label>
  <input type="week" id="week69" name="week">
</form>
      

<form>
  <label for="fname70">First name:</label><br>
  <input type="text" id="fname70" name="fname" value="John" size="50" maxlength="50">
</form>
      

<form>
  <label for="country_code">Código do país (3 letras):</label>
  <input type="text" id="country_code" name="country_code"
         pattern="[A-Za-z]{3}" title="Três letras" placeholder="Ex: BRA">
</form>
      

<form>
  <label for="fname72">First name:</label><br>
  <input type="text" id="fname72" name="fname" autofocus><br>
  <label for="pin72">PIN (4 dígitos):</label><br>
  <input type="number" id="pin72" name="pin" min="0" max="9999" step="1" size="4">
</form>
      

<form>
  <input list="browsers73" id="browser73" placeholder="Digite ou escolha">
  <datalist id="browsers73">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>
      

<canvas id="canvas74" width="300" height="150" style="border:1px solid #000;"></canvas>
<script>
  var c = document.getElementById("canvas74");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(20, 20, 150, 100);
</script>
      

// Exemplo de gradiente linear:
var c = document.getElementById("canvas75");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, c.width, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, c.width - 20, c.height - 20);
      

<svg width="400" height="120">
  <rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>
      

<video id="video77" width="320" height="240" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Seu navegador não suporta o vídeo.
</video>
      

<audio id="audio78" controls>
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  Seu navegador não suporta o áudio.
</audio>
      

<div id="div79" ondrop="drop79(event)" ondragover="allowDrop79(event)" style="width:200px; height:100px; border:1px solid black;">
  Solte aqui
</div>

<img id="drag79" src="https://via.placeholder.com/200x100?text=Drag+Me" draggable="true" ondragstart="drag79(event)" width="200" height="100">

<script>
function allowDrop79(ev) {
  ev.preventDefault();
}
function drag79(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
function drop79(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
      

// Exemplo com localStorage
localStorage.setItem("nome80", "João");
document.getElementById("resultado80").innerHTML = localStorage.getItem("nome80");
      

if (sessionStorage.clicks) {
  sessionStorage.clicks = Number(sessionStorage.clicks) + 1;
} else {
  sessionStorage.clicks = 1;
}
document.getElementById("resultado81").innerHTML = "Você clicou " + sessionStorage.clicks + " vez(es).";
      

<!-- Exemplo com Web Worker usando Blob -->
<script>
  var worker82;
  function createWorker82() {
    var blob = new Blob([`
      var i = 0;
      function timedCount() {
        i++;
        postMessage("Contador: " + i);
        setTimeout(timedCount, 500);
      }
      timedCount();
    `], { type: "application/javascript" });
    return new Worker(URL.createObjectURL(blob));
  }
  
  function startWorker82() {
    if (typeof(Worker) !== "undefined") {
      if (typeof(worker82) == "undefined") {
        worker82 = createWorker82();
      }
      worker82.onmessage = function(event) {
        document.getElementById("outputWorker82").innerHTML = "Worker diz: " + event.data;
      };
    } else {
      document.getElementById("outputWorker82").innerHTML = "Web Workers não são suportados.";
    }
  }
  
  function stopWorker82() {
    if (worker82) {
      worker82.terminate();
      worker82 = undefined;
      document.getElementById("outputWorker82").innerHTML = "Worker parado.";
    }
  }
</script>