7. Formulários em XHTML

Transcrição

1 Programação para Internet I 7. Formulários em XHTML Nuno Miguel Gil Fonseca [email protected]

2 Os formulários constituem uma das principais formas de interacção entre clientes e servidores. São um dos principais responsáveis pelo surgimento de sites dinâmicos, com informação dinâmica. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 2

3 Estrutura básica <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>base XHTML</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> <form name="formulario" id="formulario" method=" " action=" "...> ### elementos de formulário ### </form> </body> </html> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 3

4 A tag <form> Principais atributos id/name (opcional) Permite identificar o formulário para referenciação em JavaScript e CSS action (obrigatório em algumas situações) Usado para especificar o nome do recurso que irá ser chamado quando o formulário for submetido (Exemplo: action="processafrom.php") method (opcional) Permite especificar o método a ser usado na submissão deste formulário Pode assumir os valores GET e POST Por defeito assume o valor GET enctype (opcional) Usado para especificar o tipo dos dados submetidos usando o método POST Assume por defeito o valor application/x-www-form-urlencoded Em casos em que é necessário efectuar o upload de ficheiros o valor terá ser multipart/form-data (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 4

5 Linha de texto Usada quando se pretende inserir uma linha de texto <input type="text" id="nome" name="nome" value="valor inicial" size="20" maxlength="20" /> id, name - Permite identificar o elemento de formulário para referenciação em JavaScript, CSS, PHP, etc. type identifica o tipo de input value permite especificar um valor por defeito size permite especificar o tamanho visível da caixa de texto (em numero de caracteres) maxlength permite especificar o número máximo de caracteres que podem ser escritos na caixa de texto Aceder ao valor em JavaScript document.{id do form}.{id do elemento}.value (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 5

6 Caixa de texto Usada quando se pretende inserir uma ou mais linhas de texto <textarea id="morada" name="morada" cols="40" rows="4">valor inicial</textarea> id, nome - Permite identificar o elemento de formulário para referenciação em JavaScript, CSS, PHP, etc. cols permite especificar a largura da caixa de texto (em numero de caracteres) rows permite especificar a altura da caixa de texto (em número de linhas) Aceder ao valor em JavaScript document.{id do form}.{id do elemento}.value (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 6

7 Checkbox Escolher uma ou mais opção de uma lista <input type="checkbox" id="cb_a" name="cb_a" value="marcado" checked="checked" />opção a<br /> <input type="checkbox" id="cb_b" name="cb_b" value="marcado" />opção b<br /> <input type="checkbox" id="cb_c" name="cb_c" value="marcado" />opção c<br /> <input type="checkbox" id="cb_d" name="cb_d" value="marcado" />opção d<br 7> id, name - Permite identificar o elemento de formulário para referenciação em JavaScript, CSS, PHP, etc. type identifica o tipo de input value permite especificar o valor que é passado no caso da opção estar seleccionada checked usada quando se pretende seleccionar por defeito uma determinada opção Aceder ao valor em JavaScript document.{id do form}.{id do elemento}.checked (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 7

8 RadioButton Ideal para quando é necessário escolher apenas uma opção de uma lista sim <input type="radio" id="radiob" name="radiob" value="sim" checked="checked" /> não <input type="radio" id="radiob" name="radiob" value="nao" /> id, name - Permite identificar o elemento de formulário para referenciação em JavaScript, CSS, PHP, etc. type identifica o tipo de input value permite especificar o valor que é passado no caso da opção estar seleccionada checked usada quando se pretende seleccionar por defeito uma determinada opção Aceder ao valor em JavaScript document.{id do form}.{id do elemento}.checked document.{id do form}.{id do elemento}.value (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 8

9 SelectBox Ideal para quando é necessário escolher uma ou mais opções de uma lista O select define o grupo de opções, option define cada uma das opções <select id="selector" name="selector" [multiple="multiple"] [size="5"] > <option value="a" selected="selected">opção a</option> <option value="b">opção b</option> <option value="c">opção c</option> </select> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 9

10 SelectBox (cont.) de select id, name - Permite identificar o elemento de formulário para referenciação em JavaScript, CSS, PHP, etc. multiple Permite que sejam seleccionadas várias opções simultaneamente size Caso seja uma opção do tipo multiple, permite indicar o tamanho de option value permite especificar o valor que é passado no caso da opção estar seleccionada selected usada quando se pretende seleccionar por defeito uma determinada opção Aceder ao valor em JavaScript document.{id do form}.{id do elemento}.value document.{id do form}.{id do elemento}[i].value == selected (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 10

11 Botões Usados para submeter o formulário, e não só... <input type="submit" id="sub" name="sub" value="submit" /> <input type="reset" id="res" name="res" value="reset" /> <input type="button" id="b" name="b" value="button" /> id, name - Permite identificar o elemento de formulário para referenciação em JavaScript, CSS, PHP, etc. type identifica o tipo de input (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 11

12 Imagem com comportamento de botão <input type="image" src="pathdaimagem" id="sub" name="sub" value="submit" /> id, name - Permite identificar o elemento de formulário para referenciação em JavaScript, CSS, PHP, etc. type identifica o tipo de input src permite indicar o path da imagem (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 12

13 Campo de password Usados para introduzir palavras passe em que os caracteres inseridos são mascarados com * ou com. <input type="password" id="passwd" name="passwd" /> id, name - Permite identificar o elemento de formulário para referenciação em JavaScript, CSS, PHP, etc. type identifica o tipo de input Aceder ao valor em JavaScript document.{id do form}.{id do elemento}.value (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 13

14 Campo escondidos Permite que sejam passados valor como se elementos de formulário se tratassem, mas sem surgir ao utilizador qualquer elemento de formulário. <input type="hidden" id="secretkey" name="secretkey" value="12345" /> id, name - Permite identificar o elemento de formulário para referenciação em JavaScript, CSS, PHP, etc. type identifica o tipo de input Aceder ao valor em JavaScript document.{id do form}.{id do elemento}.value (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 14

15 Etiquetas dos campos de formulário Permitem colocar a designação do que se pretende pedir ao utilizador num determinado campo de formulário. Pode ser utilizado conjuntamente com a maioria dos campos de formulário. <label>nome: <input type="text" id="nome" name="nome" /> </label> ou <label for="nome">nome:</label> <input type="text" id="nome" name="nome" /> for permite especificar qual o campo de formulário ao qual esta etiqueta se aplica. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 15