Estilizando uma formulário

Descrição:

Neste exercício, você irá criar uma página web que exibe um formulário usado para coletar as informações de contato de um usuário.

O objetivo deste exercício é praticar maneiras de estilizar um formulário usando seletores CSS.

Instruções:

  1. Crie uma página web com o formulário a seguir:
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone">
  
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>
  
  <button type="submit">Submit</button>
</form>

Usando seletores CSS, aplique os estilos a seguir:

  • Altere o tamanho da fonte de todas as label para 1.1em.
  • Altere a cor de plano de fundo de todos os elementos de entrada, incluindo o de entrada de texto, para #f4f4f4.
  • Altere a borda de todos os elementos de entrada de modo que elas fiquem arredondadas.
  • Altere a cor do texto e do plano de fundo do botão de envio do formulário para white e #007bff respectivamente.

Certifique-se de validar seu código HTML usando um validador como o W3C Markup Validation Service, para garantir que seu código esteja sem erros e bem formado.

Experimente validar o seu código CSS em sites como:

Gostou? Não esqueça de avaliar o exercício:

Abra o formulário de avaliação