Aula formularios 2

Universidade da Região da Campanha – Curso Técnico em Informática Desenvolvimento para Web - Professora Denise A. de Lima / 2010

FORMULÁRIOS – PARTE 2 Relembrando...

Elemento FORM É um elemento que marca o início e o fim de um formulário, as tags de abertura e fechamento são obrigatórias. ACTION Identifica o endereço na web, onde está hospedada a aplicação script que irá processar o formulário. Esse atributo é obrigatório.

METHOD Este atributo destina-se a definir o método a ser usado no envio dos dados do formulário. Pode ser GET ou POST.

Exemplo <form action=“http://maujor.com/prog/processa-form.php” method=“post”> Campos do formulário… </form> ELEMENTO SELECT Elemento seleção que se destina a criar uma lista de opções. O elemento select é um controle de formulário. As tags de abertura e fechamento são obrigatórias.

ALGUNS ATRIBUTOS ESPECÍFICOS Name | Size

<select name=“frutas”> <option>morango</option> <option>banana</option> <option>melão</option> <option>abacaxi</option> <option>amora</option> </select>

O atributo name coloca um nome no formulário.

ATRIBUTO SIZE Pode especificar o número de opções que estarão visíveis para o usuário. <select name=“dia_semana” size=“5”> <option>segunda</option> <option>terça </option> <option>quarta </option> <option>quinta </option> <option>sexta </option> </select>

Neste exemplo possui o mesmo número de opções.

<select name=“dia_semana” size=“3”> <option>segunda</option> <option>terça </option> <option>quarta </option> <option>quinta </option> <option>sexta </option> </select>

Neste outro possui menos opções visíveis e acrescenta barra de rolagem.

ELEMENTO TEXTAREA Elemento para área de texto. É um campo que permite criar uma área multilinhas para entrada de texto pelo usuário. As tags de abertura e fechamento são obrigatórias.

Atributos Name | Rows | Cols

ATRIBUTO NAME Atribui um nome a área de texto. ATRIBUTO ROWS Define o número de linhas da área. ATRIBUTO COLS Define o número de colunas.

<html> <head> <title>Aula - Formulário</title> </head> <body> <form method="post" action="mailto:[email protected]"> <p>Comentários: <br><textarea name="obs" rows="5" cols="50"> </textarea></p> </form> </body> </html>

Para deixar o formulário mais organizado: FIELSET Elemento conjunto de campos – destina-se a criar um container para um conjunto de campos de um formulário. Por exemplo agrupar todos os campos que tenham por objetivo colher dados pessoais do usuário. Tags de abertura e fechamento são obrigatórias. LEGEND Se destina a criar uma legenda para o elemento Fielset de um formulário. As tags de abertura e fechamento são obrigatórias. LABEL Elemento rótulo. Destina-se a criar uma etiqueta/rótulo para um campo de formulário que não tenha um rótulo implícito. As tags de abertura e fechamento são obrigatórias. Exemplo: <form action=“mailto:[email protected]” method=“post”> <fieldset> <legend> Dados pessoais</legend> <label for=“nome”>Nome:</label><br> <input type= "text" name="nome" size=”80” value="nome completo"><br> <br> <label for=“end”>Endereço:</label><br> <input type="text" name="ender" size="50" > <br> <br> <label for=“cep”>Cep:</label><br> <input type="text" name="cep"><br> <br> </fielset> </form>

Resultado:

Exemplo com select, textarea, fielset, legend e label: <html> <head> <Title>Aula - Formulário</Title> </head> <body> <form action=“mailto:[email protected]” method=“post”> <fieldset> <legend> Dados pessoais</legend> <label for=“nome”>Nome:</label><br> <input type="text" name="nome" size=”80” value="nome completo"><br> <br> <label for=“end”>Endereço:</label><br> <input type="text" name="ender" size="50"> <br> <br> <label for=“cep”>Cep:</label><br> <input type="text" name="cep"><br> <br> <label for=“DDD”>DDD:</label><input type="text" name="DDD" size="3" maxlength="3" id="ddd"><label for=“fone”>Fone:</label><input type="text" name="fone" size="6" maxlength="6"> <br><br> <label for=“DDD”>DDD:</label><input type="text" name="DDD" size="3" maxlength="3" id="DDD"><label for=“fone”>Cel:</label><input type="text" name="cel" size="6" maxlength="6"> <br><br> <label for=“email”>E-mail:</label><br><input type="text" name="email" size="40"><br> </fieldset> <fieldset> <legend>Cursos</legend> <label for=“curso”>Escolha o curso:</label><br> <select name=“curso”> <option>HTML</option> <option>CSS</option> <option>PHP</option> <option>DELPHI</option> <option>JAVA</option> </select> </fieldset> <br> <input name="apaga" type="reset" value="Limpar Campos">

<input type="submit" value="Enviar Dados"> </form> </body> </html> Resultado

Bibliografia SILVA, Maurício Samy. Criando Sites com HTML. São Paulo: Novatec Editora, 2008.

Aula formularios 2

Documents

Transcript of Aula formularios 2