Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação... 5 SUBMIT... 5 RESET... 5 BUTTON... 5 IMAGE... 5 TEXTAREA... 6 SELECT... 6 SELECTED... 6 SIZE... 6 MULTIPLE... 7 Formulários sem tabelas... 7 display: block... 10 float: left... 10 clear: left... 10 1
FORMULÁRIO EM HTML FORM Que serve para envolver o formulário e enviar os dados através de seus métodos para outra URL. Os parâmetros do formulário são ACTION A URL que será enviado os dados METHOD Métodopelo qual será enviado os dados que são POST Método que envia os dados via POST, o limite de caracteres é ilimitado. GET Método que envia os dados via GET, ou seja, via URL e tem limite de dados a ser enviado, não é adequado. INPUT O campo <INPUT> tem um atributo TYPE, ao qual atribuímos seis valores diferentes para gerar seis tipos diferentes de entrada de dados. INPUT TYPE TEXT Campo de dados texto Quando INPUT não apresenta atributos, é assumido que TYPE=TEXT (default); a formatação: Nome: <input type="text" name="nome" /> Produz o resultado: Nome: INPUT TYPE PASSWORD Campo de dados senha Entrada de texto na qual os caracteres são escondidos por asteriscos, como se pode ver no exemplo. 2
Login: <input type="text" name="login" /><br /> Password: <input type="password" name="senha" /> Aula 05 HTML FORMULÁRIOS Login: meu_login Password: ********** ATRIBUTOS DOS CAMPOS TEXT E PASSWORD Alguns atributos para os campos de tipo TEXT e PASSWORD VALUE Pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o usuário não preencher este campo, será adotado este valor padrão. Se o usuário quiser entrar dados, ele simplesmente apaga o que já estiver escrito e escreve suas informações. NAME É o nome atribuído ao campo, o qual será recuperado pelo método post. Nome: <input type="text" name="nome" value="seu Nome" /> Nome: Seu nome SIZE Especifica o tamanho do espaço no display para o campo do formulário. Só é válido para campos TEXT e PASSWORD. O valor default (padrão) é 20. Endereço: <input type="text" name="nome" size="50" /> Endereço: MAXLENGHT é o número de caracteres aceitos em um campo de dados; este atributo só é válido para campos de entrada TEXT e PASSWORD. Dia do mês: <input type="text" name="mes" size="2"maxlenght="2" /> produz o resultado: Dia do mês: Apenas 2 caracteres serão lidos pelo formulário, não importa o quanto se escreva neste campo. 3
CHECKBOX - Múltipla escolha CHECKBOX insere um botão para escolha de opções. A cada alternativa corresponde um valor a ser manipulado pelo script que processa os dados. Note que o nome do campo (NAME) é o mesmo para toda a lista de valores. Pode ser escolhida mais de uma alternativa. <input type="checkbox" name="esporte" value="basquete" />Basquete <input type="checkbox" name="esporte" value="futebol" /> Futebol Uma diretiva CHECKED marca uma escolha inicial, isto é, se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida": <input type="checkbox" name="esporte" value="futebol" /> <input type="checkbox" name="esporte" value="volei" checked="checked" /> Esportes que você pratica: Futebol Vôlei RADIO - Escolha única RADIO insere um botão de escolha de valores para uma opção, isto é, somente uma alternativa pode ser escolhida. Note que o nome do campo (NAME) é o mesmo para toda a lista de valores. <INPUT TYPE=RADIO NAME="time" VALUE="palm">Palmeiras<br> <INPUT TYPE=RADIO NAME="time" VALUE="inte">Internacional Uma diretiva CHECKED marca uma escolha inicial - se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida": <input type="radio" name="time" value="palmeiras" /> Palmeiras <input type="radio" name="time" value="nautico" />Náutico <input type="radio" name="time" value="corinthians" checked="checked" /> Corinthians Seu time do coração: Palmeiras; Náutico; Flamengo; Grêmio; Santos; Atlético; Corinthians; Fluminense; Internacional; Cruzeiro; Botafogo; Santa Cruz; São Paulo; AEA. 4
Botões de ação SUBMIT apresenta o botão que causa o envio dos dados de entrada para o servidor: <input type="submit" value="enviar" /> Enviar É possível modificar o rótulo desse botão através do atributo VALUE <input type="submit" value="enviar mensagem" /> Envia mensagem RESET Restaura os valores iniciais das entradas de dados. <input type="reset" value="redefinir" /> Redefinir É possível modificar o rótulo desse botão através do atributo VALUE <input type="reset" value="apagatudo!" /> Apaga tudo! BUTTON Não tem ação, só funciona com a adição de script javascript. <input type="button" value="voltar" onclick="javascript:history.go(-1)" /> Redefinir IMAGE Quando eu quiser usar no local do submit uma imagem no botão. <input type="image" src="submit.gif" alt="submit" /> 5
TEXTAREA <TEXTAREA> abre uma área para entrada de texto, de acordo com atributos para número de colunas, linhas, e - se for o caso - um valor inicial. <textarea rows="5" cols="40" name="comentario"></textarea> SELECT <SELECT> apresenta uma lista de valores, através de campos OPTION. <select name="sabor"> <option value="abacaxi">abacaxi</option> <option value="creme">creme</option> <option value="morango">morango</option> <option value="chocolate">chocolate</option> </select> Abacaxi SELECTED Também é possível estabelecer uma escolha-padrão, através do atributo SELECTED <select name="sabor"> <option value="abacaxi" Abacaxi</option> <option value="creme" selected="selected">creme</option> <option value="morango">morango</option> <option value="chocolate">chocolate</option> </select> Creme SIZE Com o atributo SIZE, escolhe-se quantos itens da lista serão mostrados (no exemplo, SIZE=4): <select name="sabor" size="4"> 6
<option value="abacaxi" Abacaxi</option> <option value="creme" selected="selected">creme</option> <option value="morango">morango</option> <option value="chocolate">chocolate</option> </select> Abacaxi Creme Morango Chocolate MULTIPLE Com o atributo MULTIPLE, define-se que se pode selecionar mais de um item (pressionando a tecla Shift do teclado enquanto se selecionam os itens): <select name="sabor" size="4" multiple> <option value="abacaxi" Abacaxi</option> <option value="creme" selected="selected">creme</option> <option value="morango">morango</option> <option value="chocolate">chocolate</option> </select> Abacaxi Creme Morango Chocolate Formulários sem tabelas Se você é um cara antenado, já deve saber que não é correto utilizar tabelas para layouts de páginas HTML. Tabelas devem ser usadas apenas para seu propósito original: tabulação de dados. Para todo o restante, como alinhamento de textos, imagens e qualquer outro elemento em uma página, existem as folhas de estilo. Aprenda a montar corretamente um formulário web utilizando CSS, evitando o uso de tabelas para o alinhamento de textos e campos. Vamos começar falando de tags HTML esquecidas na grande maioria dos formulários encontrados na web, são elas: fieldset, legend e label. Observe o form abaixo: Login: Usuário: Senha: 7
enviar 1. <form> 2. <table> 3. <tr> 4. <tdcolspan="2">login:</td> 5. </tr> 6. <tr> 7. <tdcolspan="2"><hr/></td> 8. </tr> 9. <tr> 10. <td>usuário:</td> 11. <td><inputtype="text"name="usuario"/></td> 12. </tr> 13. <tr> 14. <td>senha:</td> 15. <td><inputtype="password"name="senha"/></td> 16. </tr> 17. <tr> 18. <tdcolspan="2"><inputtype="submit"value="enviar"/></td> 19. </tr> 20. </table> 21. </form> Agora vejamos o mesmo formulário utilizando as tags nativas do HTML para forms, eliminando o uso da tabela: Login:Usuário: Senha: enviar 1. <form> 2. <fieldset> 3. <legend>login:</legend> 4. <labelfor="usuario">usuário:</label> 5. <inputtype="text"name="usuario"id="usuario"/><br/> 8
6. <labelfor="senha">senha:</label> 7. <inputtype="password"id="senha"name="senha"/><br/> 8. </fieldset> 9. <inputtype="submit"value="enviar"/> 10. </form> A tag label vem acompanhada do parâmetro for (para) contendo o id do campo a que se refere (precisa ser o id e não o name ). Note que alguns tipos de input já vem com uma label embutida, como os botões. Neste caso você declara a label no parâmetrovalue, diretamente na tag. Fieldset indica um grupo de campos associados a um mesmo tema. No nosse exemplo, o fieldset login possui os campos usuário e senha. Finalizando, legend está para fieldsetcomo label está para input, ou seja, é um rótulo do conjunto de campos. O código ficou bem mais simples, mas ainda falta alinhar o texto com os campos, como no formulário com tabelas. Nada que um pouco de CSS não resolva: 1. label, input { 2. display:block; 3. float:left; 4. } 5. 6. label{ 7. text-align:right; 8. width:35px; 9. padding-right:20px; 10. padding-bottom:10px; 11. } 12. 13. fieldset{ 14. border:solid1px#000; 15. } 16. 17. br{ 18. clear:left; 19. } 9
Login:Usuário: Senha: enviar Parte inferior do formulário Observe as possibilidades de formatação com a utilização de CSS e das tags fieldset,legend e label. O formulário fica muito mais organizado e pode ter uma apresentação muito mais agradável, basta caprichar nas bordas e espaçamentos. Hora de conferir um pouco mais sobre algumas das propriedades CSS utilizadas neste exemplo: display: block - Como o próprio nome sugere, exibe o elemento como um bloco, permitindo maior flexibilidade na hora de alinhá-lo com outros elementos na página. float: left - A propriedade float move um elemento para a esquerda ou direita de seu elemento pai. Por exemplo, um elemento com a propriedade float:left é interpretado como um bloco e é sempre alinhado à esquerda (até encontrar um outro elemento com floatou clear). Caso você esteja iniciando agora na montagem de páginas com CSS, fique ligado nesta propriedade, pois ela será muito utilizada para criação de colunas, posicionamento de imagens etc. clear: left - No nosso caso, a tag br com a propriedade clear: left impede com que elementos com float: left sejam alinhados à sua esquerda. Funciona, basicamente, como o início de uma nova linha no que se refere a elementos flutuantes. 10