HTML5_KI9
476 pág.

HTML5_KI9


DisciplinaHtml5, Css3, Javascript201 materiais1.544 seguidores
Pré-visualização50 páginas
botões são definidos com o atributo value.
1 <input id=&quot;botao_id&quot; type=&quot;button&quot; value=&quot;botão&quot;>
Figura 2.66: Botões genéricos
Outra forma de adicionar um botão genérico em um documento HTML é utilizar o elemento
button com type igual a button. Diferentemente do elemento input, o elemento button permite a
criação de botões com imagens além de texto.
1 <button id=&quot;botao_id&quot; type=&quot;button&quot;>
2 Botão genérico
3 <img src=&quot;botao.png&quot; alt=&quot;Botão&quot;>
4 </button >
Figura 2.67: Botões genéricos
Botões de reset
Para adicionar um botão de reset em um formulário, podemos utilizar o elemento input com
type igual a reset. Esse tipo de botão reinicia os dados do formulário. Os textos desses botões são
definidos com o atributo value.
1 <input id=&quot;botao_id&quot; type=&quot;reset&quot; value=&quot;reiniciar&quot;>
Figura 2.68: Botões de reset
Outra forma de adicionar um botão de reset em um documento HTML é utilizar o elemento
button com type igual a reset. Diferentemente do elemento input, o elemento button permite a
criação de botões com imagens além de texto.
1 <button id=&quot;botao_id&quot; type=&quot;reset&quot;>
2 Botão de reset
3 <img src=&quot;reset.png&quot; alt=&quot;Reiniciar&quot;>
4 </button >
104 www.k19.com.br
105 HTML
Figura 2.69: Botões de reset
Botões de upload
Para adicionar um botão de upload em um formulário, podemos utilizar o elemento input com
type igual a file. Esse tipo de botão permite selecionar um arquivo para um eventual upload. O
formulário que contém esse botão deve possuir o atributo enctype com o valor multipart/form-
data.
1 <input id=&quot;botao_id&quot; name=&quot;file&quot; type=&quot;file&quot;>
Figura 2.70: Botões de upload
Imagem como botão de submit
Uma imagem pode funcionar como um botão de submit. Para isso, devemos utilizar o elemento
input com type igual a image. O caminho absoluto ou relativo da imagem que será utilizada deve
ser definida com o atributo src. Um texto alternativo deve ser definido com o atributo alt. Esse texto
pode ser utilizado caso ocorra algum problema no carregamento da imagem.
1 <form action=&quot;parametros.php&quot; method=&quot;post&quot; enctype=&quot;multipart/form -data&quot;>
2 <input id=&quot;botao_id&quot; alt=&quot;enviar&quot; type=&quot;image&quot; src=&quot;submit.png&quot;>
3 </form>
Figura 2.71: Imagem como botão de submit
Exercícios de Fixação
78 Crie um arquivo chamado botoes.html no projeto html em Site Root com o seguinte conteúdo.
1 <!DOCTYPE html>
2 <html lang=&quot;pt-br&quot;>
3 <head>
4 <meta http -equiv=&quot;Content -Type&quot; content=&quot;text/html; charset=UTF -8&quot;>
5 <title>Exercício de checkboxes </title>
6 </head>
7 <body>
8 <form action=&quot;parametros.php&quot; method=&quot;post&quot; enctype=&quot;multipart/form -data&quot;>
www.facebook.com/k19treinamentos 105
HTML 106
9 <input id=&quot;file_id&quot; type=&quot;file&quot; name=&quot;file&quot;>
10
11 <input id=&quot;b1&quot; type=&quot;button&quot; value=&quot;Botão genérico&quot;>
12
13 <button id=&quot;b2&quot; type=&quot;button&quot;>
14 Botão genérico
15 <img src=&quot;http ://www.k19.com.br/figs/botao -generico.png&quot; alt=&quot;Botão&quot;>
16 </button >
17
18 <input id=&quot;b3&quot; type=&quot;reset&quot; value=&quot;Reiniciar&quot;>
19
20 <button id=&quot;b4&quot; type=&quot;reset&quot;>
21 Botão de reset
22 <img src=&quot;http ://www.k19.com.br/figs/botao -reset.png&quot; alt=&quot;Reiniciar&quot;>
23 </button >
24
25 <input id=&quot;b5&quot;
26 type=&quot;image&quot;
27 alt=&quot;enviar&quot;
28 src=&quot;http ://www.k19.com.br/figs/submit.png&quot;>
29 </form>
30 </body>
31 </html>
Código HTML 2.121: botoes.html
Importante
No Windows, altere o código acima substituindo o trecho \u201cparametros.php\u201d pelo
trecho \u201cparametros.asp\u201d.
Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao78.zip
79 No Windows, utilize o Chrome para acessar o endereço:
http://localhost/html/public_html/botoes.html.
No Ubuntu, utilize o Chrome para acessar o endereço:
http://localhost/~<USUARIO>/html/public_html/botoes.html.
Utilize o Chrome DevTools ou o Firebug para verificar os parâmetros enviados através do for-
mulário. Chame o instrutor caso tenha alguma dúvida.
Drop-down list
Muitos formulários permitem que os usuários selecionem um ou mais itens de uma lista de op-
ções. Essa seleção pode ser realizada através de um drop-down list. Para adicionar esse tipo de com-
ponente, devemos utilizar o elemento select. Normalmente, o select é definido pelos navegadores
como inline-level element.
1 <select id=&quot;estados_id&quot; name=&quot;estado&quot;>
2 ...
3 </select >
106 www.k19.com.br
107 HTML
As opções devem ser definidas no conteúdo do elemento select e elas são adicionadas com o ele-
mento option. O conteúdo do elemento option é exibido para os usuários. Esse elemento possui um
atributo chamado value. Quando o formulário for enviado, o valor do atributo value é transmitido
ao Web Server se a opção correspondente foi selecionada pelo usuário. Se esse atributo não estiver
definido, o conteúdo do elemento option é transmitido ao Web Server se a opção correspondente foi
selecionada pelo usuário.
1 <select id=&quot;estados_id&quot; name=&quot;estado&quot;>
2 <option value=&quot;SP&quot;>São Paulo</option >
3 <option value=&quot;RJ&quot;>Rio de Janeiro </option >
4 <option value=&quot;RS&quot;>Rio Grande do Sul</option >
5 <option value=&quot;RN&quot;>Rio Grande do Norte</option >
6 </select >
Figura 2.72: Drop-down list
Por padrão, apenas um item de um drop-down list pode ser selecionado pelos usuários. Mas,
utilizando o atributo multiple, um ou mais itens podem ser selecionados. Geralmente, mantendo a
tecla CTRL pressionada, os usuários poderão escolher dois ou mais itens.
1 <select id=&quot;estados_id&quot; name=&quot;estado&quot; multiple=&quot;multiple&quot;>
2 <option value=&quot;SP&quot;>São Paulo</option >
3 <option value=&quot;RJ&quot;>Rio de Janeiro </option >
4 <option value=&quot;RS&quot;>Rio Grande do Sul</option >
5 <option value=&quot;PR&quot;>Paraná </option >
6 <option value=&quot;RN&quot;>Rio Grande do Norte</option >
7 <option value=&quot;BA&quot;>Bahia</option >
8 </select >
Figura 2.73: Drop-down list
Nos drop-down lists com muitas opções, é interessante agrupar as opções em categorias. Esse
agrupamento pode ser realizado com o elemento optgroup. Esse elemento possui um atributo cha-
mado label. O valor desse atributo é exibido no drop-down list.
1 <select id=&quot;estados_id&quot; name=&quot;estado&quot;>
2 <optgroup label=&quot;Região Sudeste&quot;>
www.facebook.com/k19treinamentos 107
HTML 108
3 <option value=&quot;SP&quot;>São Paulo</option >
4 <option value=&quot;RJ&quot;>Rio de Janeiro </option >
5 </optgroup >
6 <optgroup label=&quot;Região Sul&quot;>
7 <option value=&quot;RS&quot;>Rio Grande do Sul</option >
8 <option value=&quot;PR&quot;>Paraná </option >
9 </optgroup >
10 <optgroup label=&quot;Região Nordeste&quot;>
11 <option value=&quot;RN&quot;>Rio Grande do Norte</option >
12 <option value=&quot;BA&quot;>Bahia</option >
13 </optgroup >
14 </select >
Figura 2.74: Drop-down list
Drop-down list com itens pré-selecionados
Quando um drop-down list é exibido para os usuários, opções podem estar por padrão seleciona-
das. O atributo selected do elemento option define as opções que devem estar selecionadas quando
um drop-down list é exibido para os usuários. Esse atributo não precisa de valor.
1 <select id=&quot;estados_id&quot; name=&quot;estado&quot; multiple=&quot;multiple&quot;>
2 <optgroup label=&quot;Região Sudeste&quot;>
3 <option value=&quot;SP&quot; selected >São Paulo</option >
4 <option value=&quot;RJ&quot;>Rio de Janeiro </option >
5 </optgroup >
6 <optgroup label=&quot;Região Sul&quot;>
7 <option value=&quot;RS&quot; selected >Rio Grande do Sul</option >
8 <option value=&quot;PR&quot;>Paraná </option >
9 </optgroup >
10 <optgroup label=&quot;Região Nordeste&quot;>
11 <option value=&quot;RN&quot;>Rio Grande do Norte</option >
12 <option value=&quot;BA&quot;>Bahia</option >
13 </optgroup >
14 </select >
Exercícios de Fixação
80 Crie um arquivo chamado drop-down-list.html no projeto html em Site Root com o seguinte
conteúdo.
1 <!DOCTYPE html>
2 <html lang=&quot;pt-br&quot;>
108 www.k19.com.br
109 HTML
3 <head>
4 <meta http -equiv=&quot;Content -Type&quot; content=&quot;text/html; charset=UTF -8&quot;>
5 <title>Exercício de checkboxes </title>
6 </head>
7 <body>
8 <form action=&quot;parametros.php&quot; method=&quot;post&quot;>
9 <select id=&quot;estados_id&quot; name=&quot;estados&quot; multiple=&quot;multiple&quot;>
10 <option value=&quot;SP&quot;>São Paulo</option >
11 <option value=&quot;RJ&quot;>Rio de Janeiro </option