HTML Parte III André Tavares da Silva andre.silva@udesc.br
Formulários São estruturas que permitem que usuários submetam dados a uma página. Esses dados podem ser tratados e/ou armazenados dependendo da aplicação. Os formulários são caixas de texto e botões que podemos encontrar em muitas páginas web. São muito utilizados em sites de comércios eletrônico e cadastros.
Formulários Os formulários são definidos por meio das tags <form> e </form>. Entre estas duas tags colocaremos todos os campos e botões que compõem o formulário. Dentro de <form> devemos especificar alguns atributos como action e method.
Formulários - Atributos Method - Informa como os dados são enviados, podendo ser de dois tipos: Get expõe o nome e valor das variáveis, podendo ser utilizado por pessoas com más intenções (deve ser evitado). Post passa as variáveis de maneira transparente para o usuário. É o método mais aconselhável.
Formulários - Atributos Action: define o tipo de ação a realizar com o formulário. Existem duas possibilidades: O formulário é enviado a um endereço de correio eletrônico. <form action="mailto:endereço@correio.com" > O formulário é enviado a um programa ou página que processa seu conteúdo. <form action="cria_cadastro.php" >
Exemplo (formulário vazio) <form action="pagina.php" method="post">... conteúdo do formulário... </form>
Elementos do Formulário Os elementos do formulário devem ser inseridos entre as tags <form> e </form>. Podemos inserir vários tipos de entrada de dados em um formulário, a maioria delas definida pela tag input. Todo elemento possui um parâmetro name que é utilizado para identificar a variável onde o dado está contido.
Elementos do Formulário Campo de Texto (text): Campo para entrada de texto comum. <input type="text" name="cidade" value="joinville" size="15" maxlenght="15"> Parâmetros: value - atribui um valor inicial para o campo; size - especifica o tamanho do campo; maxlenght - especifica o número máximo de caracteres aceitos pelo campo.
Elementos do Formulário Campo Senha (password): Tipo de campo similar ao anterior, mas quando o usuário digita, os caracteres são substituídos por *. <input type="password" name="minhasenha" size="15" maxlenght="15"> Parâmetros: size - especifica o tamanho do campo; maxlenght - especifica o número máximo de caracteres aceitos pelo campo.
Elementos do Formulário Campo Oculto (hidden): semelhante ao text, porém, invisível para o usuário. Usado para passar informações ao servidor (quando o formulário for submetido) sem que o usuário tome conhecimento. <input type="hidden" name="pname" value="test"> Parâmetros: name - nome do campo; value - atribui um valor para o campo;
Elementos de Formulário Botão de Checagem (CheckBox): utilizado para entradas de múltipla escolha onde o usuário pode escolher várias opções. Cada opção deve ter um nome independente. Obs.: Apenas a caixa de checagem é mostrada. Para colocar um texto, basta escrever o texto após a tag. <input type="checkbox" name="disciplina1" value="matematica"> Matemática <input type="checkbox" name="disciplina2" value="estatistica"> Estatística <input type="checkbox" name="disciplina3" value="fisica" checked> Física Parâmetros Checked - Se for declarado, o elemento terá seu estado inicial marcado. Value - É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver marcado.
Elementos de Formulário Radio é mais um formulário de múltipla escolha, mas nesse caso o usuário poderá escolher apenas uma opção. Os parâmetros seguem o mesmo roteiro do checkbox. <input type="radio" name="sexo" value="f" checked>feminino <input type="radio" name="sexo" value="m">masculino Parâmetros Checked - Se for declarado o elemento terá seu estado inicial como marcado. Value - É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver marcado.
Elementos de Formulário Tanto CheckBox quanto Radio não são modificados ao clicar no texto, já que ele não faz parte do elemento de formulário. Para solucionar este problema, é possível utilizar os seguintes exemplos: <input type="radio" name="sexo" id="sexof" value="f" checked> <label for="sexof">feminino</label> <input type="radio" name="sexo" id="sexom" value="m"> <label for="sexop">masculino</label> ou <input type="radio" name="sexo" id="sexom" value="m"> <a href="javascript:;" onclick="javascript:document. getelementbyid('sexom').checked=true;">masculino</a> ou <input type="radio" name="sexo" id="sexom" value="m"> <span onclick="javascript:document. getelementbyid('sexom').checked=true;">masculino</span> Obs.: os elementos usados acima serão vistos mais adiante nesta disciplina.
Botões Botão (button): Utilizado para chamar funções que rodam no browser (Javascript). Submeter (submit): enviará as opções ou informações digitadas ao servidor/email (definido no parâmetro action do formulário). Restaura (reset): restaura o valor padrão de todos os campos de um formulário. <input type="button" value="botão"> <input type="reset" value="restaura Valores"> <input type="submit" value="envia Valores"> Parâmetros: Value texto do botão
Área de texto A tag <textarea> permite a entrada de um texto no estilo Memo, com várias linhas. Obs.: não existe o parâmetro value, o texto inicial deve ser definido entre as tags <textarea> e </textarea>. <textarea name="opiniao" rows="5" cols="40"> digite aqui sua avaliação deste curso </textarea> Parâmetros: Cols Número e caracteres por linha. Rows Número de linhas do campo.
Caixas de texto Listbox e Combobox são definidos pela tag <select>. A diferença básica entre eles consiste na existência ou não do parâmetro size (que especifica o número de linha exibidas). Se inserirmos esse parâmetro, estaremos construindo um listbox; senão especificarmos um combobox. Cada tag <option> acrescenta uma linha (opção) ao componente.
Caixa de texto padrão. Combobox <select name="paisfavorito"> <option value="alemanha">alemanha</option> <option value="espanha">espanha</option> <option value="franca">frança</option> <option value="inglaterra">inglaterra</option> <option value="italia">itália</option> <option value="portugal">portugal</option> </select>
Listbox <select name="paises" size = "4" multiple> <option value="alemanha">alemanha</option> <option value="espanha">espanha</option> <option value="franca">frança</option> <option value="inglaterra">inglaterra</option> <option value="italia">itália</option> <option value="portugal">portugal</option> </select> Parâmetro: Em uma listbox, o parâmetro multiple permite a seleção de mais de uma linha (usando a tecla control)
Exercício 1 reproduzir exemplo abaixo
Exercício 2 reproduzir exemplo abaixo