Desenvolvimento de formulários para web

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

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

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

<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

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

Type=“password”

<form action=“mailto:atendimento@urcamp.tche.br” method=“post”>
<input type=“password" name=“senha" size="10" maxlength="5">

</form>

13

Type=“submit”

<form action="mailto:secretaria@urcamp.tche.br"
method=“post”> <p>Comentários:
<br><textarea name="obs" value="vazio" rows="5"
cols="80"></textarea></p>
<input type="submit" value="enviar">
</form>

14

7

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

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

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

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

21

11

Desenvolvimento de formulários para web

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (7)

Destaque

Destaque (20)

Semelhante a Desenvolvimento de formulários para web

Semelhante a Desenvolvimento de formulários para web (20)

Mais de Denise Lima

Mais de Denise Lima (20)

Último

Último (20)

Desenvolvimento de formulários para web