---
# System prepended metadata

title: exercício front-end 23/07

---

# exercício front-end 23/07

## exercício 01 & 02 

``` html
<form>
    <div>
        <label>
          Nome
          <input name="name">
        </label>
    </div>
    <div>
        <label>
          E-mail
          <input name="email">
        </label>
    </div>
    <div>
        <label>
          Telefone de contato
          <input name="tel">
        </label>
        
        <label>
          <button type="button" id ="modal">
            Saiba mais sobre porque pedimos telefone
          </button>
        </label>
    </div>
    
    <button>Enviar</button>
</form>
```

## exercício 03

### html
``` html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>exercício 03</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
      <form>
        <label>
          Nome Completo
          <input name ="nome">
        </label>

        <label>
          E-mail
          <input type = "email">
        </label>

        <label>
          Senha
          <input type = "password">
        </label>

        <label>
          Usuário
          <input name = "usuário">
        </label>

        <label>
          Linkedin
          <input type = "url">
        </label>

        <label>
          Telefone
          <input type = "tel">
        </label>

        <label>
          CPF
          <input inputmode="numeric">
        </label>

        <label>
          Endereço
          <input name = "endereco">
        </label>

        <label>
          Cidade
          <input name = "cidade">
        </label>

        <label>
          Estado
          <input name = "estado">
        </label>

        <label>
          Bairro
          <input name = "bairro">
        </label>

        <label>
          Número da residência
          <input inputmode="numeric">
        </label>

        <label>
          CEP
          <input inputmode="numeric">
        </label>

        <label>
          <input type = "checkbox" class="checkbox">
          Aceita os termos de uso?
        </label>

        <label>
          Mensagem
          <textarea></textarea>
        </label>

        <div class="radio">
          <p>
            Como ficou sabendo dessa oportunidade?
          </p>
        <label>
          <input type="radio" name = "oportunidade">Instagram
        </label>
        <label>
          <input type="radio" name = "oportunidade">E-mail
        </label>
        <label>
          <input type="radio" name = "oportunidade">LinkedIn
        </label>
        <label>
          <input type="radio" name = "oportunidade">Facebook
        </label>
        <label>
          <input type="radio" name = "oportunidade">Outros
        </label>
        </div>

        <label>
          Observações de pedido
          <textarea></textarea>
        </label>
      </form>
    </body>
</html>
```

### css 

``` css
input, textarea {
  display: block;
}

.checkbox, .radio input {
  display: inline-block;
}
```

