Formularios
11
Click here to load reader
-
Upload
denise-lima -
Category
Education
-
view
1.090 -
download
4
description
apresentação
Transcript of Formularios
1
1
FormuláriosDesenvolvimento para Web IDenise Aristimunha de Lima | URCAMP | CCECATécnico em Informática | 2010
2
Para que serve?
� Manipulação de forma avançada, de um conjunto de dados específicos;
� Estabelece contato;
� Podem conter vários tipos de dados; � É um recurso indispensável em sites
dinâmicos.
2
3
4
3
5
Utilizando elementos estéticos através do CSS –Cascading Style Sheets
6
Comandos utilizados <form> </form>
� Determina início e o fim de um formulário.� Parâmetros:� Action - Define o endereço de recepção de
dados.
� Method – Define o método de envio de dados que pode ser:� Get ; � Post.
4
7
Sintaxe
<form action=“mailto:[email protected]”method=“post”>
.
.
.</form>
Entre o elemento form e seu fechamento /form vão
todos os outros elementos que irão compor o
formulário.
8
Formatações para entrada de dados:
Em especial, colocamos dentro da marcação de <FORM> as formatações para campos de entrada de dados, que são três:
� <INPUT>,� <SELECT>
� e <TEXTAREA>
5
9
<input> (elemento vazio)
Atributos�name=“nome”define o nome do campo a ser utilizado para guardar um determinado dado;
� type=“tipo”define o tipo do elemento; que pode ser: text, submit, reset, radio, checkbox, password, file;
� value=“valor”define o valor básico do elemento. Aquele que é identificado como padrão para o momento;
�Maxlength=“número”define quantos caracteres o campo pode aceitar;
� size= “número”define o tamanho do campo a ser exibido.
10
Type= “text”<html><head><title>Aula - Formulário</title></head><body><form action=“mailto:[email protected]" method="post">
<input type="text" name=“formulário” size=“20”maxlength=“15” value="campo">
</form></body></html>
6
11
Type=“radio”(permite escolher apenas uma opção em uma lista)<form action=“mailto:[email protected]” method=“post”><input type=“radio” name=“opção1”>Manhã<br><input type=“radio” name=“opção2” >Tarde<br><input type=“radio” name=“opção3” >Noite</form>
Com o rádio pode-se escolher só uma opção
12
Type=“checkbox”
<form action=“mailto:[email protected]”method=“post”>
<input type=“checkbox” name=“opção1”>Manhã<input type=“checkbox” name=“opção2”>Tarde <input type=“checkbox” name=“opção3”>Noite </form>
(Com o checkbox pode-se escolher mais de uma opção)
7
13
Type=“password”
<form action=“mailto:[email protected]” method=“post”>
<input type=“password" name=“senha" size="10" maxlength="5">
</form>
14
Type=“submit”
<form action="mailto:[email protected]" method=“post”> <p>Comentários:<br><textarea name="obs" value="vazio" rows="5" cols="80"></textarea></p><input type="submit" value="enviar"></form>
8
15
Select (elemento container -<select> </select>)
� Name=“nome” – indica um nome.� Size=“valor” – define quantas opções
aparecerão ex.: size=“5”;
� <Option> </option> – elemento usado para cada opção no combo.
16
Select/option<form action=“mailto:[email protected]”method=“post” ><select name=“dia_semana”><option>segunda</option><option>terça </option>...</select>
</form>
9
17
Textarea (elemento container -<textarea> </textarea>
� Name – define um nome.� Rows – define a altura com base no
número de linhas;
� Cols – define tamanho da largura com base em número de colunas.
18
TextareaPermite que o usuário escreva múltiplas linhas de texto
<form method=“post” action=“mailto:[email protected]"><p>Comentários:
<br><textarea name="observação" rows="5" cols="80"></textarea> </p>
</form>
10
19
Elemento TEXTAREA com os botões Elemento TEXTAREA com os botões Elemento TEXTAREA com os botões Elemento TEXTAREA com os botões de limpar campos e enviarde limpar campos e enviarde limpar campos e enviarde limpar campos e enviar
atravatravatravatravéééés do elemento INPUTs do elemento INPUTs do elemento INPUTs do elemento INPUT
<form action=“mailto:[email protected]=“post” >
<p>Comentários:<br><<<<textareatextareatextareatextarea namenamenamename="="="="obsobsobsobs" " " " valuevaluevaluevalue="vazio" ="vazio" ="vazio" ="vazio"
rowsrowsrowsrows="5" ="5" ="5" ="5" colscolscolscols="80"></="80"></="80"></="80"></textareatextareatextareatextarea>>>></p></p></p></p>
20
Exercício
11
21
� Bibliografia
� SILVA, Maurício Samy. Criando Sites com HTML. São Paulo: Novatec Editora, 2008.
