Download to read offline
Aula formularios 2
- 1. Universidade da Regiãoda 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 METHOD Identifica o endereço na web, onde está Este atributo destina-se a definir o hospedada a aplicação script que irá método a ser usado no envio dos dados processar o formulário. Esse atributo é do formulário. Pode ser GET ou POST. obrigatório. 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 ALGUNS ATRIBUTOS uma lista de opções. O elemento select é ESPECÍFICOS um controle de formulário. As tags de Name | Size abertura e fechamento são obrigatórias. <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.
- 2. ATRIBUTO SIZE Pode especificaro número de opções que estarão visíveis para o usuário. <select name=“dia_semana” size=“3”> <select name=“dia_semana” size=“5”> <option>segunda</option> <option>segunda</option> <option>terça </option> <option>terça </option> <option>quarta </option> <option>quarta </option> <option>quinta </option> <option>quinta </option> <option>sexta </option> <option>sexta </option> </select> </select> Neste outro possui menos opções visíveis e Neste exemplo possui o mesmo acrescenta barra de rolagem. número de opções. ELEMENTO TEXTAREA Elemento para área de texto. É um campo que permite criar uma área Atributos multilinhas para entrada de texto pelo Name | Rows | Cols usuário. As tags de abertura e fechamento são obrigatórias. ATRIBUTO NAME <html> Atribui um nome a área de texto. <head> <title>Aula - Formulário</title> </head> ATRIBUTO ROWS <body> Define o número de linhas da área. <form method="post" action="mailto:denisealima@gmail.com"> <p>Comentários: ATRIBUTO COLS <br><textarea name="obs" rows="5" Define o número de colunas. cols="50"> </textarea></p> </form> </body> </html>
- 3. Para deixar oformulá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:cadastro@urcamp.tche.br” 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>
- 4. Resultado: Exemplo com select,textarea, fielset, legend e label: <html> <head> <Title>Aula - Formulário</Title> </head> <body> <form action=“mailto:cadastro@urcamp.tche.br” 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">
- 5. <input type="submit" value="EnviarDados"> </form> </body> </html> Resultado Bibliografia SILVA, Maurício Samy. Criando Sites com HTML. São Paulo: Novatec Editora, 2008.