Aula formularios 1

4

Click here to load reader

Transcript of Aula formularios 1

Page 1: Aula formularios 1

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

FORMULÁRIOS – PARTE 1

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> INPUT O elemento input cria vários tipos de campos de formulários para entrada de dados. É um elemento vazio. O tipo de controle é definido pelo atributo type.

ATRIBUTOS ESPECÍFICOS Type= “text | password | checkbox | radio | submit | reset | file”

Type= “Text” Cria um campo para entrada de texto em uma linha

Type= “Password” Cria um campo para entrada de senha ou dados que devem permanecer ocultos quando digitados

Type= “Radio” Cria botões para seleção de apenas uma alternativa.

Page 2: Aula formularios 1

Type= “Checkbox” Cria caixas para seleção de mais de uma alternativa

Type= “Submit” Cria um botão para envio de formulário

Type= “Reset” Cria um botão que restaura o formulário a seu estado inicial

Type= “File” Cria um campo para entrada de um arquivo local que deva ser enviado ao servidor

Outros atributos Name Define um nome para o campo do elemento. O nome é usado para que scripts e outros programas façam referência ao elemento. Size Define a largura aparente do campo em número de caracteres. Maxlength Para input dos tipos text e password. Define o número máximo de caracteres que podem ser dados como entrada de campo. Value Define o valor inicial para o campo e também é usado nos campos tipos checkbox e rádio.

Page 3: Aula formularios 1

Exemplo <!-- Utilizando Formulários parao envio de dados --> <html> <head><title>Formulário</title></head> <body> <h2>Ficha cadastral | Preencha o formulário a seguir com seus dados:</h2> <form action="mailto:[email protected]" method="post" > Nome:<input type= "text" name="nome" size="80" value="nome completo"><br> <br> Endereço:<input type="text" name="end" size="50"> <br> <br> CEP:<input type="text" name="cep"><br> <br> Telefone:<input type="text" name="DDD" size="3" maxlength="3">-<input type="text" name="fone" size="6" maxlength="6"> <br><br> Celular:<input type="text" name="DDD" size="3" maxlength="3">-<input type="text" name="cel" size="6" maxlength="6"> <br><br> E-mail:<input type="text" name="mail" size="40"><br> <br> Sexo:<ol> <li><input type="radio" name="sexo" value="Masculino">Masculino <li><input type="radio" name="sexo" value="Feminino">Feminino </ol> <br> Foto <input type="file" name="foto" value="Foto"> <br> <br> Quais áreas você mais se interessa:<br> <br> <input type=checkbox name=“opção1”>Esporte <input type=checkbox name=“opção2”>Decoração <input type=checkbox name=“opção3”>Notícias <br><br> <input type=checkbox name=“opção4”>História <input type=checkbox name=“opção5”>Política <input type=checkbox name=“opção6”>Beleza <input type=checkbox name=“opção7”>Culinária <br> <br> Digite uma senha: <input type="password" name="senha" size="10" maxlength="6"> <br> <br> <input name="apaga" type="reset" value="Limpar Campos"> <input type="submit" value="Enviar Dados"> </form> </body> </html>

Page 4: Aula formularios 1

Resultado

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