Programação Web Prof. Wladimir Linguagem HTML Listas e Formulários @wre2008 1
Sumário Listas Revisão da tag <form> Criação de formulários HTML @wre2008 2
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 3
Listas desordenadas Sã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 4
Listas desordenadas Colocar 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 5
Listas ordenadas Usa-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 6
Listas desordenadas Colocar 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 alfabeto i Ordenação por números romanos em minúsculas I Ordenação por números romanos em maiúsculas @wre2008 7
Listas de definição A 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 8
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 9
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 10
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 11
Criação de formulários HTML Passo 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 12
formulario.html @wre2008 13
Criação de formulários HTML Passo 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:wla@pucsp.br method="post"> </form> Executem o site HTML! </center> </body> @wre2008 14
Criação de formulários HTML Passo 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 15
Criação de formulários HTML Revisã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 16
Criação de formulários HTML Passo 3.1 <body> <center> <h2>criação de Formulários</h2> <br><br> <form action="mailto:wla@pucsp.br" method="post"> </form> </center> </body> <input type="text" name="formulario"> Onde iremos inserir a tag <input>?? @wre2008 17
Criação de formulários HTML formulario.html Passo 3 @wre2008 18
Criação de formulários HTML Passo 3.1 <body> <center> <h2>criação de Formulários</h2> <br><br> <form action="mailto:wla@pucsp.br" method="post"> <input type="text" name="formulario name="formulario"> size="60" maxlength="20"> </form> </center> </body> Inserir o parâmentro size e maxlength! @wre2008 19
Criação de formulários HTML formulario.html Passo 3 @wre2008 20
Criação de formulários HTML Passo 3.1 Qual a função do parâmetro value? <input type="text" name="formulario size="60" maxlength="20 value= Wladimir > @wre2008 21
formulario.html Wladimir @wre2008 22
Criação de formulários HTML Passo 3.2 Modifiquem o valor de type para password? <input type= password" name="formulario size="60" maxlength="20 value= Wladimir > @wre2008 23
formulario.html @wre2008 24
Criação de formulários HTML Passo 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 25
Criação de formulários HTML Passo 3.3 Insira uma textarea com 20 linhas e 10 colunas. <textarea rows="20" col="10"> </textarea> @wre2008 26
formulario.html @wre2008 27
Criação de formulários HTML Passo 3.3 Coloquem um texto inicial no textarea! <textarea rows="20" col="10"> Digite o texto aqui </textarea> @wre2008 28
formulario.html @wre2008 29
Criação de formulários HTML Passo 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 30
Criação de formulários HTML Passo 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 31
formulario.html @wre2008 32
Criação de formulários HTML Passo 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 marcado Checked - O estado inicial do elemento. Quando presente, o elemento já aparece marcado; @wre2008 33
Criação de formulários HTML Passo 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 34
formulario.html @wre2008 35
Criação de formulários HTML Passo 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 36
formulario.html @wre2008 37
Criação de formulários HTML Passo 3.6 Qual outra Tag utilizada para multiplas seleções? Revisão Checkbox: Value - o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar marcado Checked - O estado inicial do elemento. Quando presente, o elemento já aparece marcado; @wre2008 38
Criação de formulários HTML Passo 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 39
formulario.html @wre2008 40
formulario.html @wre2008 41