| Criadores |
| Fábio
Azevedo, 28 anos, paulistano, webmaster. Veja mais. |
| |
| Felipe
Braga de Oliveira, 26 anos, paulistano, contador. Veja mais. |
| |
| Luisa
Haddad, 22 anos, paulista, webdesigner. |
| |
| Ludmila Simões, 28 anos, jacareiense, webdesigner. Veja mais. |
| |
| Objetivo |
| Este
projeto foi desenvolvido como atividade curricular da materia 'Fundamentos
Web' do primeiro semestre do curso de graduação 'Sistemas para internet / Desenvolvimento web' da faculdade de tecnologia IBTA. |
| |
| Desenvolvimento |
| Utilizamos como ferramenta para a construção deste site o Dreamweaver. Este site foi desenvolvido totalmente em HTML como sendo um dos pré-requisitos para este trabalho. |
| |
|
| |
9.
formulário
|
Um dos recursos mais fascinantes é poder criar um formulário eletrônico para interagir com o servidor enviando dados que serão processados criando assim a troca de comunicação entre o cliente e servidor. Eles podem ser usados em qualquer atividade como: imagine agência de emprego onde você digita seu currículo on-line e se cadastra para vagas ou em um site para receber malas diretas, comprar ou vender produtos ou até mesmo fazer um pedido de pizza. Isso é o que dá vida a nossa interativa web.
Vamos agora demonstrar como montar um formulário e seus recursos. Porém, para que o formulário funcione é necessário que do lado do servidor exista um programa ou linguagem de programação que irá interpretar e processar os dados enviados, que será um futuro assunto que iremos tratar.
definindo um formulário
Assim como as tabelas, os formulários também precisão ser delimitados o comando responsável é <FORM> ... </FORM>. Esse comando tem duas funções importantes uma: especificar o local do programa que controlará o formulário e definir a forma ou método como os dados serão enviados.
O
comando <FORM> usa os seguintes parâmetros:
ACTION="URL" : que especifica o local (URL) do servidor e do programa, por exemplo CGI, que vai processar o formulário.
METHOD="método de troca de dados" que indica o método usado pelo servidor para receber o formulário. As opções possíveis para esse parâmetro são GET e POST
O método POST é o mais utilizado e transmite toda a informação do formulário imediatamente após o URL. O método GET faz com que o conteúdo do formulário seja anexado ao endereço do URL.
| exemplo: |
| |
<FORM METHOD="POST" ACTION="http://aprendahtml_form.asp">... </FORM>
|
|
definindo os campos de um formulário
INPUT - Esse comando define um campo de entrada em que o usuário digita as informações do formulário. Cada campo de um formulário atribui seu conteúdo para uma variável que possui nome e tipo específicos.
Os parâmetro do INPUT são:
| |
Type = "tipo de variável" - Especifica o tipo de dado para a variável. Podendo ser: |
|
| |
TYPE = "TEXT" - Aceita dados do tipo caractere
TYPE = "PASSWORD" - Aceita dados do tipo caractere.
TYPE = "CHECKBOX" - Aceita campos do tipo
sim/não.
TYPE = "RADIO" - Mostra várias opções
e aceita uma delas.
TYPE = "SUBMIT" - Cria um botão que envia,
ao ser pressionado, o conteúdo do formulário.
TYPE = "RESET" - Cria um botão
que, ao ser pressionado, apaga o conteúdo de todos
os campos.
TYPE = "HIDDEN" - Define um campo invisível,
cujo conteúdo é enviado junto com os demais.
|
|
| |
Name="nome
da variável"
Especifica o nome da variável que receberá
o conteudo do campo. |
|
| |
Value="valor padrão"
Para os campos TEXT ou PASSWORD determina o valor padrão para o campo.
Para os campos do tipo CHECKBOX ou RADIO, representa o valor que será enviado se não for especificado outro.
Para os tipos SUBMIT ou RESET, indica o rótulo (label) que apqrece no botão.
|
|
| |
Checked
Para campos do tipo CHECKBOX indica que
o campo deve ficar marcado como padrão |
|
| |
Size="tamanho"
É o tamanho do campo tipo TEXT
ou PASSWORD. Este tamanho não
delimita a quantidade de dados digitados pelo usuário.
par isso usamos o MAXLENGTH. |
|
| |
Maxlength="comprimento" - Comprimento é o valor que define o número de caracteres permitido para variáveis do tipo TEXT ou PASSWORD. |
|
Bem, até aqui
muitos conceitos foram abordados e agora vamos ver como os formulários
funcionam com exemplos práticos.
type = text
Aceita dados do tipo caractere. Neste exemplo armazena o nome digitado na variável "Nome_Usuario".
| |
<input type="text" name="" size=""> |
|
| exemplo: |
| |
<form>
<input type="text" name="Nome_Usuario" size="40">
</form> |
|
| |
|
|
type = text com valor padrão (value)
Como já mencionamos podemos prédefinir um valo para ser apresentado no campo text. Veja o exemplo.
| |
<input name="" type="text" value="valor padrão" size=""> |
|
| exemplo: |
| |
<form>
Newsletter:
<input name="e-mail" type="text" value="valor padrão" size="40">
</form> |
|
| |
|
|
type = hidden
O campo hidden (invisível) é muito usado quando criamos um formulário e queremos enviar um valor pelo formulário mas não queremos que o usuário veja este campo. Por exemplo par identificar o número do formulário.
| |
<input type="hidden" name="" value=""> |
|
| exemplo: |
| |
<form>
Newsletter:
<input name="e-mail" type="text" value="" size="60">
<input type="hidden" name="formulario" value="001">
</form>
Obs:Embora o o comando input type="hidden" esteja no código ele não aparecera para o usuário. |
|
| |
|
|
type = password
Aceita dados do tipo caractere e é mais apropriado para digitação de senhas, pois os valores digitados não serão visíveis na tela.
| |
<input type="password" name=""
size=""> |
|
| exemplo: |
| |
<form>
Informe
sua senha:
<input type="password" name="senha"
size="20">
</form> |
|
| |
|
|
type = radio
Cria campos tipo radio button (botão de opção), que é associado a uma única variável e apenas uma opção pode ser marcada. Quando um campo é marcado o anterior é desmarcado automaticamente.
| |
<input name="" type="radio"
value="" checked>
<input name="" type="radio"
value=""> |
|
| exemplo: |
| |
<form>
Você é:
<input name="estadocivil" type="radio"
value="casado" checked >
Casado |
<input name="estadocivil" type="radio"
value="solteiro">
Solteiro |
<input name="estadocivil" type="radio"
value="divorciado">
Divorciado |
<input name="estadocivil" type="radio"
value="viuvo">
Viúvo
</form> |
|
| |
|
|
|
type = checkbox
o comando checkbox é semelhante ao botão de opção porém a diferença é que nele pode ser selecionando uma o mais opção. Veja o exemplo comparando os dois.
| |
<input type="checkbox" name=""
value="" checked>
<input type="checkbox" name=""
value=""> |
|
| exemplo: |
| |
<form>
Documentos apresentados:
<input type="checkbox" name="cpf"
value="true" checked>
CPF
<input type="checkbox" name="rg"
value="true">
RG
<input type="checkbox" name="cnh"
value="true">
CNH
</form> |
|
| |
|
|
type = submit
Cria um botão para enviar os dados do formulário. O submit quando é pressionado acessa o URL do programa de script especificado no comando form e envia os dados de acordo como foi determinado no Method Get ou Post.
| |
<input type="submit" value=""> |
|
| exemplo: |
| |
<form>
Nome:
<input name="seunome" type="text"
size="40">
<input type="submit" value="Enviar">
</form> |
|
| |
|
|
type = reset
Limpa os campos do formulário.
| |
<input type="reset" value="">
|
|
| exemplo: |
| |
<form>
Nome:
<input name="seunome" type="text"
size="40">
<input type="reset" value="Limpar
Campos">
</form> |
|
| |
|
|
textarea
Define uma caixa de digitação onde o usuário pode inserir livremente textos mais longos como por exemplo endereços ou mensagens.
O parâmetro ROWS define a quantidade de linhas e COLS é o número que especifica a largura.
| |
<textarea name="textarea" cols=""
rows=""></textarea> |
|
| exemplo: |
| |
<form>
Mensagem:
<textarea name="textarea" cols="40"
rows="5"></textarea>
</form> |
|
| |
|
|
select
Este comando exibe uma lista de itens que pode ser selecionado pelo usuário onde o parãmetro NAME é o nome da variável que receberá o valor selecionado, SIZE é um parâmetro opcional e representa a quantidades de itens que serão exibidos na tela e MULTIPLE também é opcional e indica que podem ser escolhidos vários itens da lista.
| |
<select name="">
<option></option>
<option selected></option>
</select> |
|
| exemplo: |
| |
<form>
Cargo Pretendido:
<select name="cargos">
<option>Analista Sênior</option>
<option>Programador Java</option>
<option selected>Webmaster</option>
<option>Gerente de Sistemas</option>
</select>
</form> |
|
| |
|
|
select com size e multiple
| |
Size:
<select name="" size="">
<option></option>
<option selected></option>
</select>
Multiple:
<select name="" size=""
multiple>
<option></option>
<option></option>
</select>
</form> |
|
| exemplo: |
| |
<form>Cargo Pretendido:<br>
<select name="select" size="3">
<option>Analista Sênior</option>
<option>Programador Java</option>
<option selected>Webmaster</option>
<option>Gerente de Sistemas</option>
</select> |
|
| |
|
|
| |
|
|
| |
Liguagens:<br>
<select name="linguagens" size="5"
multiple>
<option>JAVA</option>
<option>ASP</option>
<option>VBSCRIPT</option>
<option>JAVASCRIPT</option>
<option>C++</option>
<option>HTML</option>
<option>C#</option>
</select>
</form> |
|
| |
|
|
Fieldset
Este comando serve para deixar os formulários mais atraentes, embora não seja implementado em todos os browsers. Ele cria uma moldura em volta do formúlários agrupando campos.
Agora que já temos conhecimento para montar um formulário completo, vamos treinar.
| |
<fieldset><legend></legend> </fieldset>
|
|
| exemplo: |
| |
<fieldset><legend>Cadastro</legend></fieldset>
<fieldset><legend>Cartão de Crédito</legend></fieldset> |
|
| |
|
|
|
|
|
