Embed Size (px)
Citation preview
@wre2008 1
Programação WebProf. Wladimir
Linguagem HTML – Listas e Formulários
@wre2008 2
Sumário
ListasRevisão da tag <form>Criação de formulários HTML
@wre2008 3
Listas
As listas são utilizadas para citar, numerar e definir objetos. Também são utilizadas correntemente para deslocar o começo da linha para a direita.Podemos distinguir três tipos de listas:
Listas desordenadas;Listas ordenadas;Listas de definição.
@wre2008 4
Listas desordenadasSão delimitadas pelas etiquetas <ul> e </ul> (unordered list). Cada um dos elementos da lista é citado por meio de uma etiqueta <li> (sem fechamento, ainda que exista nenhum inconveniente em colocá-lo). Então, fica assim:
<p>Países do mundo</p> <ul> <li>Brasil</li> <li>Espanha</li> <li>Austrália</li> </ul>
O resultado:
@wre2008 5
Listas desordenadasColocar marcadores:
<ul type="tipo de marcador">
E o tipo de marcador pode ser um dos seguintes:
Circle;Disc;Square.
Em alguns navegadores não funciona a opção de mudar o tipo de marcador e por mais que nos empenhemos, sempre sairá a bolinha preta.
@wre2008 6
Listas ordenadasUsa-se as etiquetas <ol> (ordered list) e seu fechamento. Cada elemento será igualmente precedido de sua etiqueta <li>.Como exemplo:
<p>Regras de comportamento no trabalho</p> <ol> <li>O chefe sempre tem a razão</li> <li>Em caso de dúvida, aplicar a regra 1</li> </ol> O resultado é:
@wre2008 7
Listas desordenadasColocar marcadores:
<ol type="tipo de marcador">
E o tipo de marcador pode ser um dos seguintes:
1 Para ordenar por números;a Por letras do alfabeto;A Por letras maiúsculas do alfabetoi Ordenação por números romanos em minúsculasI Ordenação por números romanos em maiúsculas
@wre2008 8
Listas de definiçãoA definição principal é <dl> e </dl> (definition list). As etiquetas do elemento e sua definição são <dt> (difinition term) e <dd> (definition definition) respectivamente.
<p>Dicionário da Língua Portuguesa</p> <dl>
<dt>Açougue</dt> <dd>Estabelecimento onde se vendem carnes
frescas</dd> <dt>Colheita</dt>
<dd>Ato de colher os produtos agrícolas</dd> </dl>
O efeito produzido:
@wre2008 9
Listas de definição<dl>
<dd>Primeiro nível de deslocamento <dl> <dd>Segundo nível de deslocamento <dl> <dd>Terceiro nível de deslocamento </dl> </dl>
</dl>
@wre2008 10
Combinando listas<p>Cidades do mundo</p>
<ul> <li>Brasil <ol> <li>Rio de Janeiro <li>Salvador </ol> <li>Espanha <ol> <li>Madrid <li>Barcelona </ol>
</ul>
@wre2008 11
Revisão da tag <form>Revisão da tag <form>:name: o identificador do formulário.action: serve para definir o tipo de ação que o formulário deve seguir, ou seja, podemos enviar o formulário para um endereço de correio ou uma página de script.method: fica encarregado de especificar a forma que o mesmo é enviado.enctype: formato em que os dados serão enviados. O default é urlencoded.
Se for utilizado um elemento do tipo upload de arquivo (file) é preciso utilizar o tipo multipart/form-data.
@wre2008 12
Criação de formulários HTMLPasso 1 = Criar o código base da página HTML e salvar com o nome formulário.html.
<html><head><title>Criação de Formulários</title></head>
<body><center><h2>Criação de Formulários</h2><br><br></center></body>
</html>
@wre2008 13
formulario.html
@wre2008 14
Criação de formulários HTMLPasso 2 = Criar as tags <form></form> e inserir botões e campos que fazem parte do formulário entre as mesmas.
<body><center><h2>Criação de Formulários</h2><br><br>
<form action="mailto:[email protected]” method="post">
</form>
</center></body>
Executem o site HTML !
@wre2008 15
Criação de formulários HTMLPasso 3.1 = Inserir as caixas de texto, ou seja, os campos de texto onde o usuário irá digitar a informação.
Qual é a tag que insere um campo de texto ?
@wre2008 16
Criação de formulários HTMLRevisão input:Parâmetros:
Value - o valor pré-definido do elemento, que aparecerá quando a página for carregada;Size - O tamanho do elemento na tela, em caracteres;Maxlength - O tamanho máximo do texto contido no elemento, em caracteres;
@wre2008 17
Criação de formulários HTMLPasso 3.1
<body><center><h2>Criação de Formulários</h2><br><br>
<form action="mailto:[email protected]" method="post">
</form>
</center></body>
Onde iremos inserir a tag <input> ??<input type="text" name="formulario">
@wre2008 18
Criação de formulários HTMLPasso 3formulario.html
@wre2008 19
Criação de formulários HTMLPasso 3.1
<body><center><h2>Criação de Formulários</h2><br><br>
<form action="mailto:[email protected]" method="post"><input type="text" name="formulario">
</form>
</center></body>
Inserir o parâmentro size e maxlength !
<input type="text" name="formulario“ size="60" maxlength="20">
@wre2008 20
Criação de formulários HTMLPasso 3
formulario.html
@wre2008 21
Criação de formulários HTMLPasso 3.1
Qual a função do parâmetro value ?
<input type="text" name="formulario“ size="60" maxlength="20“value=“Wladimir”>
@wre2008 22
Wladimir
formulario.html
@wre2008 23
Criação de formulários HTMLPasso 3.2
Modifiquem o valor de type para password ?
<input type=“password" name="formulario“ size="60" maxlength="20“ value=“Wladimir”>
@wre2008 24
formulario.html
@wre2008 25
Criação de formulários HTMLPasso 3.3 – Se precisar de textos grandes com diversas linhas qual é tag a ser utilizada ??Revisão Textarea:Parâmetros:
Cols - número de colunas do campo, em caracteres;Rows - número de linhas do campo, em caracteres;
@wre2008 26
Criação de formulários HTMLPasso 3.3 – Insira uma textarea com 20 linhas e 10 colunas.
<textarea rows="20" col="10"> </textarea>
@wre2008 27
formulario.html
@wre2008 28
Criação de formulários HTMLPasso 3.3 – Coloquem um texto inicial no textarea !
<textarea rows="20" col="10"> Digite o texto aqui </textarea>
@wre2008 29
formulario.html
@wre2008 30
Criação de formulários HTMLPasso 3.4 – Como criar uma lista de opções ?Revisão Select:Parâmetros:
size - número de linhas exibidas. Default: 1;multiple - parâmetro que, se presente, permite que sejam selecionadas duas ou mais linhas, através das teclas Control ou Shift;option - Cada item do tipo "option" acrescenta uma linha ao select;value - Valor a ser enviado ao servidor se aquele elemento for selecionado. Default: o texto do item;text - valor a ser exibido para aquele item. Não é definido por um parâmetro, mas pelo texto que fica entre as tags<option> e </option>
@wre2008 31
Criação de formulários HTMLPasso 3.4
<select name="diaSemana"><option> Segunda </option><option> Terça </option><option> Quarta </option><option> Quinta </option><option> Sexta </option><option> Sábado </option><option> Domingo </option>
</select>Inserir os parâmetros size e multiple !
<select name=“diaSemana” size=“3” multiple >
@wre2008 32
formulario.html
@wre2008 33
Criação de formulários HTMLPasso 3.5 – Qual a Tag utilizada para realizar uma enquete ?Revisão Radio:Parâmetros:
Value - o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar marcadoChecked - O estado inicial do elemento. Quando presente, o elemento já aparece marcado;
@wre2008 34
Criação de formulários HTMLPasso 3.5 – Exemplo:
<input type="radio" name="serie" value="1"> Heroes<input type="radio" name="serie" value="2"> Prison Break<input type="radio" name="serie" value="3"> 24 horas<input type="radio" name="serie" value="4"> Jericho<input type="radio" name="serie" value="5"> Lost<input type="radio" name="serie" value="6"> Dexter
@wre2008 35
formulario.html
@wre2008 36
Criação de formulários HTMLPasso 3.5 – Teste: Modifiquem os names
<input type="radio" name="serie" value="1"> Heroes<input type="radio" name="serie" value="2"> Prison Break<input type="radio" name="serie" value="3"> 24 horas<input type="radio" name="serie2" value="4"> Jericho<input type="radio" name="serie2" value="5"> Lost<input type="radio" name="serie2" value="6"> Dexter
@wre2008 37
formulario.html
@wre2008 38
Criação de formulários HTMLPasso 3.6 – Qual outra Tag utilizada para multiplasseleções ?Revisão Checkbox:
Value - o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar marcadoChecked - O estado inicial do elemento. Quando presente, o elemento já aparece marcado;
@wre2008 39
Criação de formulários HTMLPasso 3.6 – Exemplo:
<input type="checkbox" name="serie" value="1"> Heroes<input type="checkbox" name="serie" value="2"> Prison Break<input type="checkbox" name="serie" value="3"> 24 horas<input type="checkbox" name="serie" value="4"> Jericho<input type="checkbox" name="serie" value="5"> Lost<input type="checkbox" name="serie" value="6"> Dexter
@wre2008 40
formulario.html
@wre2008 41
formulario.html
