HTML5_KI9
476 pág.

HTML5_KI9


DisciplinaHtml5, Css3, Javascript199 materiais1.534 seguidores
Pré-visualização50 páginas
>
12 <option value=&quot;RS&quot;>Rio Grande do Sul</option >
13 <option value=&quot;PR&quot;>Paraná </option >
14 <option value=&quot;RN&quot;>Rio Grande do Norte</option >
15 <option value=&quot;BA&quot;>Bahia</option >
16 </select >
17
18 <select id=&quot;estado_id&quot; name=&quot;estado&quot;>
19 <optgroup label=&quot;Região Sudeste&quot;>
20 <option value=&quot;SP&quot;>São Paulo</option >
21 <option value=&quot;RJ&quot;>Rio de Janeiro </option >
22 </optgroup >
23 <optgroup label=&quot;Região Sul&quot;>
24 <option value=&quot;RS&quot;>Rio Grande do Sul</option >
25 <option value=&quot;PR&quot;>Paraná </option >
26 </optgroup >
27 <optgroup label=&quot;Região Nordeste&quot;>
28 <option value=&quot;RN&quot;>Rio Grande do Norte</option >
29 <option value=&quot;BA&quot;>Bahia</option >
30 </optgroup >
31 </select >
32
33 <input type=&quot;submit&quot; value=&quot;Enviar&quot;>
34 </form>
35 </body>
36 </html>
Código HTML 2.127: drop-down-list.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-fixacao80.zip
81 No Windows, utilize o Chrome para acessar o endereço:
http://localhost/html/public_html/drop-down-list.html.
No Ubuntu, utilize o Chrome para acessar o endereço:
http://localhost/~<USUARIO>/html/public_html/drop-down-list.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.
Fieldset
www.facebook.com/k19treinamentos 109
HTML 110
Os campos de um formulário muito longo podem ser agrupados logicamente com o elemento
fieldset. No conteúdo desse elemento, podemos utilizar o elemento legend para definir a legenda do
fieldset. Normalmente, o fieldset é definido pelos navegadores como block-level element.
1 <fieldset >
2 <legend >Dados Pessoais </legend >
3 ...
4 </fieldset >
5 <fieldset >
6 <legend >Formação </legend >
7 ...
8 </fieldset >
9 <fieldset >
10 <legend >Experiência </legend >
11 ...
12 </fieldset >
Figura 2.75: Fieldset
Exercícios de Fixação
82 Crie um arquivo chamado fieldset.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 fieldset </title>
6 </head>
7 <body>
8 <form action=&quot;parametros.php&quot; method=&quot;post&quot;>
9 <fieldset >
10 <legend >Dados Pessoais </legend >
11 <label for=&quot;nome_id&quot;>Nome: </label>
12 <input id=&quot;nome_id&quot; type=&quot;text&quot; name=&quot;nome&quot;>
13 </fieldset >
14 <fieldset >
15 <legend >Formação </legend >
16 <label for=&quot;curso_id&quot;>Curso: </label>
17 <input id=&quot;curso_id&quot; type=&quot;text&quot; name=&quot;curso&quot;>
18 </fieldset >
19 <fieldset >
20 <legend >Experiência </legend >
21 <label for=&quot;empresa_id&quot;>Empresa: </label>
22 <input id=&quot;empresa_id&quot; type=&quot;text&quot; name=&quot;empresa&quot;>
110 www.k19.com.br
111 HTML
23 </fieldset >
24
25 <input type=&quot;submit&quot; value=&quot;Enviar&quot;>
26 </form>
27 </body>
28 </html>
Código HTML 2.129: fieldset.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-fixacao82.zip
83 No Windows, utilize o Chrome para acessar o endereço:
http://localhost/html/public_html/fieldset.html.
No Ubuntu, utilize o Chrome para acessar o endereço:
http://localhost/~<USUARIO>/html/public_html/fieldset.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.
Autocomplete
Para melhorar a usabilidade, podemos utilizar o recurso do autocomplete nas caixas de entrada.
Para utilizar esse recurso, devemos criar uma lista de sugestões com o elemento datalist. É funda-
mental identificar as listas de sugestões com o atributo id.
1 <datalist id=&quot;comidas_id&quot;>
2 ...
3 </datalist >
As opções devem ser definidas no conteúdo do elemento datalist e elas são adicionadas com o
elemento option. O atributo value de um elemento option define uma sugestão.
1 <datalist id=&quot;comidas_id&quot;>
2 <option value=&quot;Lasanha&quot;>
3 <option value=&quot;Pizza&quot;>
4 <option value=&quot;Sopa&quot;>
5 <option value=&quot;Salada&quot;>
6 </datalist >
Com a lista de sugestões criada, podemos associá-la a uma caixa de entrada através do atributo
list do elemento input.
1 <input id=&quot;comida_id&quot; name=&quot;comida&quot; type=&quot;text&quot; list=&quot;comidas_id&quot;>
2
www.facebook.com/k19treinamentos 111
HTML 112
3 <datalist id=&quot;comidas_id&quot;>
4 <option value=&quot;Lasanha&quot;>
5 <option value=&quot;Pizza&quot;>
6 <option value=&quot;Sopa&quot;>
7 <option value=&quot;Salada&quot;>
8 </datalist >
Figura 2.76: Autocomplete
Exercícios de Fixação
84 Crie um arquivo chamado autocomplete.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 autocomplete </title>
6 </head>
7 <body>
8 <form action=&quot;parametros.php&quot; method=&quot;post&quot;>
9 <input id=&quot;comida_id&quot; name=&quot;comida&quot; type=&quot;text&quot; list=&quot;comidas_id&quot;>
10
11 <datalist id=&quot;comidas_id&quot;>
12 <option value=&quot;Lasanha&quot;>
13 <option value=&quot;Pizza&quot;>
14 <option value=&quot;Sopa&quot;>
15 <option value=&quot;Salada&quot;>
16 </datalist >
17
18 <input type=&quot;submit&quot; value=&quot;Enviar&quot;>
19 </form>
20 </body>
21 </html>
Código HTML 2.133: autocomplete.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-fixacao84.zip
85 No Windows, utilize o Chrome para acessar o endereço:
http://localhost/html/public_html/autocomplete.html.
112 www.k19.com.br
113 HTML
No Ubuntu, utilize o Chrome para acessar o endereço:
http://localhost/~<USUARIO>/html/public_html/autocomplete.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.
Campos ou botões desabilitados
Eventualmente, determinados campos ou botões de um formulário devem ser desabilitados.
Para desabilitar um campo ou botão, podemos utilizar o atributo disabled dos elementos input,
select, textarea e button. Esse atributo não precisa de valor.
1 <input id=&quot;nome_id&quot; name=&quot;nome&quot; type=&quot;text&quot; disabled >
Figura 2.77: Campos desabilitados
1 <select id=&quot;nomes_id&quot; disabled >
2 ...
3 </select >
Figura 2.78: Campos desabilitados
1 <textarea disabled >
2 </textarea >
Figura 2.79: Campos desabilitados
1 <button type=&quot;button&quot; disabled >
2 Botão desabilitado
3 <img src=&quot;botao.png&quot; alt=&quot;Botão desabilitado&quot;>
4 </button >
www.facebook.com/k19treinamentos 113
HTML 114
Figura 2.80: Botões desabilitados
Campos fixos
Eventualmente, determinados campos de um formulário devem ser fixo, ou seja, os usuários não
podem alterar o conteúdo. Para fixar o conteúdo de um campo, podemos utilizar o atributo readonly
dos elementos input e textarea. Esse atributo não precisa de valor.
1 <input id=&quot;nome_id&quot; name=&quot;nome&quot; type=&quot;text&quot; value=&quot;Marcelo Martins&quot; readonly >
Figura 2.81: Campos fixos
1 <textarea readonly >
2 Gostaria de efetuar a matrícula no K10 - Formação Desenvolvedor Java.
3 </textarea >
Figura 2.82: Campos fixos
Exercícios de Fixação
86 Crie um arquivo chamado disabled-readonly.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 autocomplete </title>
6 </head>
7 <body>
8 <form action=&quot;parametros.php&quot; method=&quot;post&quot;>
9 <label for=&quot;nome_id&quot;>Nome: </label>
10 <input id=&quot;nome_id&quot; name=&quot;nome&quot; type=&quot;text&quot; value=&quot;Marcelo Martins&quot; readonly >
11
12 <label for=&quot;email_id&quot;>Email: </label>
13 <input id=&quot;email_id&quot; name=&quot;email&quot; type=&quot;email&quot; disabled >
114 www.k19.com.br
115 HTML
14
15 <input type=&quot;submit&quot; value=&quot;Enviar&quot;>