Curso-Frontend_CodeBlue/aula2.1.html at master · oliheitor/Curso-Frontend_CodeBlue · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/aula2.1.css" />
    <title>Formulários</title>
  </head>
  <body>
    <form action="" method="">
       <!--
        Sempre declarar action e method

        Existem dois valores mais utilizados para method , get e post. Get serve para formulários mais rápidos e menos sensiveis, vão para o link do site. e Post é mais adequado para dados como informações Pessoais e dados sensíveis.
        -->
      <fieldset>
        <legend>Dados Pessoais</legend>
        <!--A tag legend serve apenas para dar título a regiões de formulários-->
      <ul>
        <li>
            <label for="nome">Nome:</label>
            <input type="text" id="nome" name="nome"/>
        </li>

        <li>
            <label for="email">Email:</label>
            <input type="text" id="email" name="email"/>
        </li>

        <li>
            <label for="telefone">Telefone:</label>
             <input type="text" id="telefone" name="telefone"/>
        </li>

        <li>
            Gênero:
          <input type="radio" id="masculino" name="genero" value="masculino"/>
          <label for="masculino">Masculino</label>

          <input type="radio" id="feminino" name="genero" value="feminino"/>
          <label for="feminino">Feminino</label>

          <input type="radio" id="outros" name="genero" value="outros"/>
          <label for="outros">Outros</label>
        </li>

        <li>
            Conhecimentos:

          <input type="checkbox" id="html" name="conhecimentos" value="html"/>
          <label for="html">HTML</label>

          <input type="checkbox" id="css" name="conhecimentos" value="css"/>
          <label for="css">CSS</label>

          <input type="checkbox" id="js" name="conhecimentos" value="js"/>
          <label for="js">JS</label>

          <input type="checkbox" id="bootstrap" name="conhecimentos" value="bootstrap"/>
          <label for="bootstrap">Bootstrap</label>

          <input type="checkbox" id="jquerry" name="conhecimentos" value=" jquerry"/>
          <label for="jquerry">jQuerry</label>

          <input type="checkbox" id="github" name="conhecimentos" value="github"/>
          <label for="github">GitHub</label>
        </li>

        <li>
            <label for="estado">Estado:</label>
          <select id="estado" name="estado">
            <option>Selecione</option>
            <option value="AC">Acre</option>
            <option value="AL">Alagoas</option>
            <option value="AP">Amapá</option>
            <option value="AM">Amazonas</option>
            <option value="BA">Bahia</option>
            <option value="CE">Ceará</option>
            <option value="DF">Distrito Federal</option>
            <option value="ES">Espírito Santo</option>
            <option value="GO">Goiás</option>
            <option value="MA">Maranhão</option>
            <option value="MT">Mato Grosso</option>
            <option value="MS">Mato Grosso do Sul</option>
            <option value="MG">Minas Gerais</option>
            <option value="PA">Pará</option>
            <option value="PB">Paraíba</option>
            <option value="PR">Paraná</option>
            <option value="PE">Pernambuco</option>
            <option value="PI">Piauí</option>
            <option value="RJ">Rio de Janeiro</option>
            <option value="RN">Rio Grande do Norte</option>
            <option value="RS">Rio Grande do Sul</option>
            <option value="RO">Rondônia</option>
            <option value="RR">Roraima</option>
            <option value="SC">Santa Catarina</option>
            <option value="SP">São Paulo</option>
            <option value="SE">Sergipe</option>
            <option value="TO">Tocantins</option>
          </select>
        </li>

        <li>
            <label for="mensagem">Mensagem</label>
             <textarea id="mensagem" name="mensagem"></textarea>
        </li>
      </ul>
      </fieldset>

        <!--
            Botão enviar
            Ao atribur "value" o mesmo contepudo aparecerá em todos os navegadores.

            Quando alguém clica no "<input type="submit"" é executado o "action" daquela tag form
        -->
      <input type="submit" value="Enviar o formulário"/>
    </form>
  </body>
</html>