O HTML permite adicionar conteúdos multimídia, como imagens, áudio, vídeo.

Atributo Valor Descrição
autoplay autoplay Especifica que o áudio começará a tocar assim que estiver pronto
controls controls Especifica que os controles de áudio devem ser exibidos (como botão de play/pause, etc.)
loop loop Especifica que o áudio será reproduzido novamente sempre que terminar
muted muted Especifica que a saída de áudio deve estar no mudo
preload autometadatanone Especifica se e como o autor deseja que o áudio seja carregado quando a página for carregada
src URL Especifica a URL do arquivo de áudio

Exemplo de uso da tag <audio>

Copy to Clipboard

Vídeo

Podemos adicionar vídeo no HTML 5.

Copy to Clipboard
Atributo Valor Descrição
autoplay autoplay Especifica que o vídeo começará a ser reproduzido assim que estiver pronto
controls controls Especifica que os controles do vídeo devem ser exibidos (como botão de play/pause, etc.)
height pixels Define a altura do reprodutor de vídeo
loop loop Especifica que o vídeo será reproduzido novamente sempre que terminar
muted muted Especifica que o áudio do vídeo deve estar no mudo
poster URL Especifica uma imagem a ser exibida enquanto o vídeo está sendo carregado ou até que o usuário clique em play
preload autometadatanone Especifica se e como o autor deseja que o vídeo seja carregado quando a página for carregada
src URL Especifica a URL do arquivo de vídeo
width pixels Define a largura do reprodutor de vídeo

Imagem

Copy to Clipboard

Criando um formulário em HTML

Um formulário em HTML serve pra coletar informações do usuário — como nome, e-mail, preferências, ou qualquer outro dado. A ideia básica é envolver os campos dentro da tag <form>, e dentro dela colocar os elementos de entrada, como <input>, <textarea>, <select>, etc.

Um exemplo simples seria assim:

<form action="/enviar" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Enviar</button>
</form>

Aqui, o formulário envia os dados para o endereço indicado em action (no caso, /enviar) quando o botão de envio é clicado.
O atributo method="post" indica que os dados vão ser enviados de forma mais reservada, sem aparecer na URL.

Usando diferentes tipos de campos

Além do campo de texto, dá pra usar vários tipos de <input> pra coletar diferentes informações.
Por exemplo, campos de senha, datas e números:

<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha">

<label for="data">Data de nascimento:</label>
<input type="date" id="data" name="data">

<label for="idade">Idade:</label>
<input type="number" id="idade" name="idade">

Cada tipo de campo muda a forma como o navegador mostra o controle pro usuário.

Usando botões de rádio com imagens

Agora vem uma parte mais interessante: usar botões de rádio pra deixar o usuário escolher entre imagens.
Os botões de rádio são aqueles círculos que permitem marcar apenas uma opção dentro de um grupo.

A ideia aqui é associar cada botão de rádio a uma imagem, pra que o usuário escolha visualmente.

Um exemplo:

<form>
  <p>Escolha o seu animal favorito:</p>

  <label>
    <input type="radio" name="animal" value="gato">
    <img src="gato.jpg" alt="Gato" width="120">
  </label>

  <label>
    <input type="radio" name="animal" value="cachorro">
    <img src="cachorro.jpg" alt="Cachorro" width="120">
  </label>

  <label>
    <input type="radio" name="animal" value="pássaro">
    <img src="passaro.jpg" alt="Pássaro" width="120">
  </label>

  <label>
    <input type="radio" name="animal" value="peixe">
    <img src="peixe.jpg" alt="Peixe" width="120">
  </label>

  <button type="submit">Confirmar</button>
</form>

O importante aqui é que todos os <input type="radio"> têm o mesmo valor no atributo name (animal), pra que apenas uma opção possa ser marcada.
Cada imagem representa uma escolha, e quando o usuário clicar em uma delas, o botão de rádio correspondente será selecionado.

Atividade

Atividade em grupo de até 3 pessoas no máximo, se 1 pessoa ficar sem grupo podem fazer 2 duplas ou 1 trio e uma pessoa sozinha.
Faça um formulário tml para enviar uma telemensagem virtual.
Coloque os campos nome (texto), e-mail (email), telefone (text) e dê opção de escolher uma de 3 utilizando o campo rádio, e escolhendo entre 4 imagens usando o campo rádio.