-
Notifications
You must be signed in to change notification settings - Fork 0
/
formularios_parte_1.html
executable file
·249 lines (225 loc) · 10.8 KB
/
formularios_parte_1.html
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta name="keywords" content="XHTML,HTML,CSS" />
<meta name="author" content="Alexandre Gomes de Lima" />
<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="estilos/aulas.css" />
<title>IFRN/DIATINF/Design Web: Formulários - parte 1</title>
</head>
<body>
<div id="tudo">
<div id="cabecalho">
<img src="imagens/logo_ifrn.png" alt="IFRN" id="logoifrn" />
<h1 class="cabecalho">
Diretoria Acadêmica de Gestão e Tecnologia da Informação
</h1>
<h2 class="cabecalho">
Disciplina de Design Web e Arquitetura da Informação
</h2>
</div>
<div id="conteudo">
<p style="text-align: center;">
<img src="imagens/em_construcao.png" alt="Em construção" style="border: 0; width: 75px" />
</p>
<h1>Formulários - parte 1</h1>
<p>
Formulários permitem a uma página web coletar dados informados pelo usuário. A interação
entre o usuário e o formulário é realizada através de elementos denominados controles.
Os dados coletados pelo formulário são submetidos a um programa hospedado no servidor,
sendo que a criação deste tipo de programa foge ao escopo desta disciplina.
Aqui, nos limitaremos a conhecer os elementos HTML para a criação de formulários.
</p>
<h2>Formulários e controles</h2>
<p>
Um formulário é definido através da tag <span class="html">form</span>. Esta tag é
normalmente utilizada em conjunto com os atributos <span class="html">action</span>
e <span class="html">method</span>. <span class="html">action</span> é utilizado
para indicar o endereço (URL) de destino do formulário, enquanto <span class="html">method</span>
indica o método HTTP utilizado a ser utilizado na submissão do formulário (GET ou POST).
</p>
<p>
Um formulário contém campos para captação de dados. O exemplo a seguir, define um
formulário com dois campos de texto e um botão de submissão.
</p>
<pre class="html">
<form action="pagina.html" method="get">
Nome: <input type="text" name="nome" /> <br/>
E-mail: <input type="text" name="email" /> <br/>
<input type="submit" />
</form>
</pre>
<img src="formularios_parte_1/exemplo01.png" alt="Visualização do exemplo 1." />
<p>
Normalmente cada campo é usado em conjunto com o atributo <span class="html">name</span>.
O valor deste atributo é utilizado pelo programa no lado servidor para identificação
do campo.
</p>
<p>
A seguir, são apresentados os tipos de controles e campos disponíveis junto com seus
respectivos elementos HTML.
</p>
<h3>Campo de texto de uma linha</h3>
<p>
É definido pelo elemento <span class="html">input</span> em conjunto com o atributo
<span class="html">type="text"</span>. É utilizado para captar digitação do usuário.
Seu uso foi demonstrado no exemplo anterior.
</p>
<h3>Campo de senha</h3>
<p>
Similar ao campo de texto de uma linha, mas não exibe os caracteres informados
pelo usuário. É definido pelo elemento <span class="html">input</span> em conjunto com o atributo
<span class="html">type="password"</span>.
</p>
<pre class="html">
<form action="pagina.html" method="post">
Login: <input type="text" name="login" /><br/>
Senha: <b><input type="password" name="senha" /></b><br/>
<input type="submit" />
</form>
</pre>
<h3>Botões</h3>
<p>
Podem ser do tipo submit ou do tipo reset. O tipo submit, envia os campos do formulário,
junto com seus respectivos valores, para o endereço definido no atributo <span class="html">action</span>
do formulário. O do tipo reset remove os valores informados pelo usuário, deixando
os campos com seus valores iniciais.
</p>
<p>
Botões podem ser definidos pelo elemento <span class="html">input</span> em conjunto com o
atributo <span class="html">type</span> (valores <span class="html">submit</span> ou
<span class="html">reset</span>) como no exemplo abaixo. O uso do atributo <span class="html">value</span>
permite personalizar o texto exibido pelo botão.
</p>
<pre class="html">
<form action="pagina.html" method="post">
Login: <input type="text" name="login" /><br/>
Senha: <input type="password" name="senha" /><br/>
<b><input type="submit" value="OK" />
<input type="reset" value="Limpar" /></b>
</form>
</pre>
<p>
Botões também podem ser definidos através do elemento <span class="html">button</span>.
A diferença, em relação ao elemento <span class="html">input</span>, é que
<span class="html">button</span> permite a inserção de conteúdo HTML para enriquecer
a visualização do botão.
</p>
<pre class="html">
<form action="pagina.html" method="post">
Nome: <input type="text" name="nome" /><br/>
<b><button type="submit">
<img src="formularios_parte_1/accept.png" /> OK
</button></b>
</form>
</pre>
<img src="formularios_parte_1/exemplo02.png" alt="Visualização do exemplo 2." />
<h3>Checkbox</h3>
<p>
Controle que possibilita a definição e seleção de várias opções (valores) pré-definidas
para um mesmo campo. O atributo <span class="html">name</span> identifica o campo em questão.
Deve-se utilizar um elemento <span class="html">input</span> com o atributo
<span class="html">type="chekbox"</span> para cada opção disponível ao campo.
</p>
<pre class="html">
<form action="pagina.html" method="post">
Gêneros: <br/>
<b><input type="checkbox" name="genero" value="terror" />Terror <br/>
<input type="checkbox" name="genero" value="comedia" />Comédia <br/>
<input type="checkbox" name="genero" value="aventura" />Aventura <br/>
<input type="checkbox" name="genero" value="drama" />Drama <br/></b>
<button type="submit">OK</button>
</form>
</pre>
<img src="formularios_parte_1/exemplo03.png" alt="Visualização do exemplo 3." />
<h3>Radio button</h3>
<p>
Semelhante ao checkbox, mas permitindo a seleção de apenas uma única opção.
É definido pelo elemento <span class="html">input</span> com o atributo
<span class="html">type="radio"</span>.
</p>
<pre class="html">
<form action="pagina.html" method="post">
Gênero: <br/>
<b><input type="radio" name="genero" value="M" />Masculino <br/>
<input type="radio" name="genero" value="F" />Feminino <br/></b>
<button type="submit">OK</button>
</form>
</pre>
<img src="formularios_parte_1/exemplo04.png" alt="Visualização do exemplo 4." />
<h3>Lista de seleção</h3>
<p>
Controle que exibe uma relação pré-definida de valores disponíveis para seleção.
Deve-se inserir um elemento <span class="html">option</span> para cada opção
disponível. Para inserir uma lista de seleção devemos utilizar o elemento
<span class="html">select</span>.
</p>
<pre class="html">
<form action="pagina.html" method="post">
Gênero
<b><select name="genero">
<option>Masculino</option>
<option>Feminino</option>
</select></b>
</form>
</pre>
<img src="formularios_parte_1/exemplo05.png" alt="Visualização do exemplo 5." />
<p>
Por padrão, só é permitida a seleção de uma única opção. O atributo
<span class="html">multiple="multiple"</span> altera este comportamento e faz
com que o controle seja renderizado no formato de lista com rolagem, ao invés
de lista escamoteável.
</p>
<pre class="html">
<form action="pagina.html" method="post">
Gênero <br/>
<select name="genero" <b>multiple="multiple"</b>>
<option>Terror</option>
<option>Comédia</option>
<option>Ação</option>
<option>Drama</option>
</select>
</form>
</pre>
<img src="formularios_parte_1/exemplo06.png" alt="Visualização do exemplo 6." />
<p>
Caso se deseje este último formato de lista, mas com seleção de somente uma opção,
basta utilizar o atributo <span class="html">size</span> para indicar a quantidade
de itens visualizados.
</p>
<h3>Campo de texto de múltiplas linhas</h3>
<p>
Controle destinado a receber textos longos, incluindo quebras de linha. Os atributos
<span class="html">rows</span> e <span class="html">cols</span> podem ser utilizados
para ajustar, respectivamente, a quantidade de linhas e a quantidade
de colunas do controle exibidas pelo controle. É inserido através do elemento
<span class="html">textarea</span>.
</p>
<pre class="html">
<form action="pagina.html" method="post">
E-mail do destinatário
<input type="text" name="email"> <br>
Mensagem<br/>
<b><textarea name="msg" rows="6" cols="40">
</textarea></b>
</form>
</pre>
<img src="formularios_parte_1/exemplo07.png" alt="Visualização do exemplo 7." />
<h2>Exercícios</h2>
<div class="exercicios">
<p>
1) Escreva uma página web com o formulário ilustrado na figura abaixo.
</p>
<img src="formularios_parte_1/exercicio01.png" alt="Formulário desejado para o exercício 1."/>
</div>
<h2 class="referencias">Referências</h2>
<ul>
<li class="referencia">
SILVA, Maurício Samy. <em class="referencia">Construindo sites com CSS e (X)HTML: sites controlados
por folhas de estilo em cascata</em>. São Paulo: Novatec, 2008.
</li>
</ul>
</div>
</div>
</body>
</html>