O documento discute os principais elementos usados para criar formulários na web, incluindo <form>, <input>, <select> e <textarea>. Explica como esses elementos funcionam e quais atributos eles suportam para coletar diferentes tipos de dados do usuário.
CD_B3_C_ Criar e editar conteúdos digitais em diferentes formatos_índice.pdf
Desenvolvimento de formulários para web
1. Formulários
Desenvolvimento para Web I
Denise Aristimunha de Lima | URCAMP | CCECA
Técnico em Informática | 2010
1
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
1
3. Utilizando elementos estéticos
através do CSS –
Cascading Style Sheets
5
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.
6
3
4. Sintaxe
<form action=“mailto:denise@urcamp.tche.br”
method=“post”>
.
.
.
</form>
Entre o elemento form e seu fechamento /form vão
todos os outros elementos que irão compor o
formulário.
7
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>
8
4
5. <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.
9
Type= “text”
<html>
<head>
<title>Aula - Formulário</title>
</head>
<body>
<form action=“mailto:denisealima@gmail.com" method="post">
<input type="text" name=“formulário” size=“20”
maxlength=“15” value="campo">
</form>
</body>
</html>
10
5
6. Type=“radio”
(permite escolher apenas uma opção em uma
lista)
<form action=“mailto:atendimento@urcamp.tche.br” 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>
11 Com o rádio pode-se escolher só uma opção
Type=“checkbox”
(Com o checkbox pode-se escolher mais de uma opção)
<form action=“mailto:atendimento@urcamp.tche.br”
method=“post”>
<input type=“checkbox” name=“opção1”>Manhã
<input type=“checkbox” name=“opção2”>Tarde
<input type=“checkbox” name=“opção3”>Noite
</form>
12
6
8. 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.
15
Select/option
<form action=“mailto:cadastro@urcamp.tche.br”
method=“post” >
<select name=“dia_semana”>
<option>segunda</option>
<option>terça </option>
...
</select>
</form>
16
8
9. 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.
17
Textarea
Permite que o usuário escreva múltiplas linhas de texto
<form method=“post” action=“mailto:denisealima@gmail.com">
<p>Comentários:
<br><textarea name="observação" rows="5"
cols="80"></textarea></p>
</form>
18
9
10. Elemento TEXTAREA com os botões
de limpar campos e enviar
atravé
através do elemento INPUT
<form action=“mailto:denisealima@gmail.com
method=“post” >
<p>Comentários:
19 < name="obs" value="vazio"
="obs
<br><textarea name="obs" value="vazio"
rows="5" cols="80"></textarea>
="80"></textarea
rows="5" cols="80"></textarea></p>
Exercício
20
10
11. Bibliografia
SILVA, Maurício Samy. Criando
Sites com HTML. São Paulo:
Novatec Editora, 2008.
21
11