Scribd
Carregar
13 visualizações38 páginas

PDF7 DWeb

Mais arquivos html

Enviado por

daviasddb
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
13 visualizações38 páginas

PDF7 DWeb

Mais arquivos html

Enviado por

daviasddb
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 38

P r o f. M e .

Re n a t o A l v e s F e r r e i r a
linkedin.com/in/renato-alves-ferreira

Disciplina:

A p l i c a ç õ e s pa r a I n t e r n e t

Prof. Me. Renato Alves Ferreira


Agenda da aula

Criando Formulários em Páginas Web

Atividade : Continue o site institucional em grupo ou individual, criado em


aulas anteriores, adicionando todos os recursos vistos no HTML.

prof. Me. Renato Alves Ferreira


Manipulando Formulários
Formulários são seções específicas de um documento projetados para interação do usuário
com o site, coleta de dados digitados e enviá-los para serem processados por um script no
backend.

Formulários são formados por campos.

Esses campos são chamados na web de Controles do formulário ou simplesmente Controles.

prof. Me. Renato Alves Ferreira


Introdução - Tipos de controles de formulários
Os controles de formulários podem ser do tipo:

✓Entrada de texto (input);


✓Botão (button);
✓Seleção única (radio);
✓Seleção múltimpla (checkbox);
✓Menu de escolha (select);
✓Envio de dados e arquivos (file);
✓Entre outros.

prof. Me. Renato Alves Ferreira


Elementos de Formulários
5
Elemento <form>
• O elemento <form> é o container para os controles do formulário. Tem como
principal função delimitar o escopo de um formulário em uma página HTML.
• Sua outra função é a de informar ao navegador o que deverá ser feito com os
dados preenchidos pelo usuário.
Sintaxe:
<body>
<form action="..." method="...">
...
...
</form>
</body>

prof. Me. Renato Alves Ferreira


Tipos de controles de formulários

Entrada de dados - Elemento <input> e o atributo type


6

Controle destinado a criar uma caixa de entrada de texto. Existem dois tipos de
entrada de texto: caixa de texto simples com uma linha e área de texto com
múltiplas linhas. A figura abaixo mostra os dois tipos de controle de entrada de
texto:
Comando> <input type="text"…> e <input type=“area"…>

<h5>Contato</h5>
<form>
Nome:<br/>
<input type="text"/> <br/>
Mensagem: <br/>
<input type=“area"/>
</form>

prof. Me. Renato Alves Ferreira


Tipos de <input>
O elemento <input> cria vários tipos de controle que são definidos pelo atributo
type, conforme o seguinte:
Valor do Atributo type Controle criado
text Para entrada de uma linha simples de texto.
password Semelhante ao anterior, mas os caracteres digitado não são legíveis.
radio Radio Button.
checkbox Checkbox.
submit Botão de envio do formulário.
reset Botão para limpar dados entrados pelo usuário.
button Botão atrelado a um evento.
image Botão gráfico de envio do formulário
hidden Envio oculto de dados.
file Seleção de arquivo para envio.
prof. Me. Renato Alves Ferreira
Variações de atributos no uso do <input type="text”……… >
Este
8 comando também possui alguns atributos úteis:

ATRIBUTO FUNÇÃO EXEMPLO


Permite identificar e diferenciar cada comando do
name <input type="text" name="txt1"/>
formulário.
Define o conteúdo inicial da caixa de texto quando <input type="text" name="txt1" value="Informe o nome"/>
value
a página for carregada pela primeira vez.
Define o tamanho, em número de caracteres, da
size caixa de texto criada. Não limita o número de <input type="text" name="txt1" size="25"/>
caracteres digitados.
maxlength Limita o número máximo de caracteres digitados. <input type="text" name="txt1" maxlength="20"/>

Permite desativar o elemento, deixando-o <input type="text" name="txt1" disabled="disabled"/>


disabled
inacessível ao usuário.
Semelhante ao value, mas o texto informado é
<input type="text" name="txt1" placeholder="Informe o
placeholder apenas visual e desaparece assim que se inicia a nome"/>
digitação.

prof. Me. Renato Alves Ferreira


Exemplo de identificação e personalização dos elementos do
formulário com o parâmetro name
9

<input type="text" name="nome"/>

<input type="text" name="endereco"/>

prof. Me. Renato Alves Ferreira


Elemento <textarea>
Este elemento permite inserir uma caixa de texto com mais de uma linha.
Extremamente útil para coletar informações em forma de textos longos ou
mesmo estruturados, como opiniões, reclamações e sugestões.

<textarea name="mensagem" rows="5" cols="20">


Escreva aqui...
</textarea>

<form>
Nome:
<input type="text" name="nome"/><br/>
E-mail:
<input type="text" name="email"/><br/>
Mensagem:<br/>
<textarea name="mensagem" rows="5" cols="20">Escreva aqui...</textarea><br/>
</form>
prof. Me. Renato Alves Ferreira
Elemento <textarea>
Este comando também possui alguns atributos úteis:
ATRIBUTO FUNÇÃO EXEMPLO

Define o número de caracteres que a caixa deverá ter de largura. <textarea rows="5">
cols
Deve ser preenchido com um número inteiro. </textarea>

Define o número de linhas que deverá ter a caixa. Deve ser <textarea rows="5" cols="20">
rows
preenchido com um número inteiro. </textarea>

<textarea name="sugestao" rows="5" cols="20">


name Define o nome da variável que armazenará o conteúdo. </textarea>

<textarea rows="5" cols="20" disabled="disabled">


disabled Permite desativar o elemento, deixando-o inacessível ao usuário. </textarea>

prof. Me. Renato Alves Ferreira


Elemento <input type="password"…>

Este
12
comando permite inserir caixas de texto de uma única linha e fazer com que
todos os caracteres digitados sejam ocultos por asteriscos, semelhante ao
preenchimento de senhas em alguns sistemas:
<form>
Usuário:<br/>
<input type="text" name=“usuario“ placeholder=“Digite seu usuário” /><br/>
Senha:<br/>
<input type=“password" name="senha"/>
</form>

prof. Me. Renato Alves Ferreira


Atributos no <input type="password"…>

Este
13
comando também possui alguns atributos úteis:

ATRIBUTO FUNÇÃO EXEMPLO

Define o conteúdo inicial da caixa de texto quando a <input type="password" name="txt1"


value
página for carregada pela primeira vez. value="Informe o nome"/>

Define o tamanho, em número de caracteres, da caixa de <input type="password" name="txt1" size="25"/>


size
texto criada. Não limita o número de caracteres digitados.
<input type="password" name="txt1"
maxlength Limita o número máximo de caracteres digitados. maxlength="20"/>
Permite desativar o elemento, deixando-o inacessível ao <input type="password" name="txt1"
disabled
usuário disabled="disabled"/>

prof. Me. Renato Alves Ferreira


Variações do tipo de <input>
Elemento <email>

prof. Me. Renato Alves Ferreira


Variações do tipo de <input>
Elemento <number>

prof. Me. Renato Alves Ferreira


Variações do tipo de <input>
Elemento <date>

prof. Me. Renato Alves Ferreira


Variações do tipo de <input>
Elemento <fieldset> - Agrupa partes do formulário adicionando
uma moldura.

prof. Me. Renato Alves Ferreira


Comando <input type="radio"…>
Este
18 comando é muito útil para coletar informações
específicas, permite inserir caixas de opção única em
formulários.
Note que os dois inputs possuem o mesmo nome.

<form>
<h4> Informe o seu sexo </h4>
<hr>
<input type="radio" name="sexo" checked="checked"/> Masculino
<br/>
<input type="radio" name="sexo"/> Feminino
</form>

prof. Me. Renato Alves Ferreira


Atributos do <input type="checkbox"…>
Este comando também possui alguns atributos úteis:

ATRIBUTO FUNÇÃO EXEMPLO

<input type="checkbox" name="opc1"


checked Define qual das opções terá sua exibição ativada. checked="checked"/>

Permite desativar o elemento, deixando-o inacessível ao <input type="checkbox" name="opc1"


disabled
usuário. disabled="disabled"/>

<input type="checkbox" name="opc1"


value Permite atribuir um valor ou conteúdo à variável. value="valor"/>

prof. Me. Renato Alves Ferreira


Elemento <input type="checkbox"…>
Este
20
comando permite inserir caixas de verificação dentro
do formulário.
Muito útil para colher informações cuja resposta,
afirmativa ou negativa, habilita ou desabilita a caixa de
verificação.

<form>
<input type="checkbox" name="camaro" checked="checked"/> Camaro SS <br/>
<input type="checkbox" name="fusion"/> Ford Fusion <br/>
<input type="checkbox" name="golf" checked="checked"/> Golf GTI <br/>
<input type="checkbox" name="sonata"/> Hyunday Sonata
</form>

prof. Me. Renato Alves Ferreira


Elemento <input type="submit"…>
Este
21 comando permite a inserção de um botão para envio dos dados presentes
em um formulário para o servidor.
<form>
Nome:
<input type="text" name="nome"/><br/>
E-mail:
<input type="text" name="email"/><br/>
<input type="submit" name="enviar" value="Enviar Dados"/>
</form>

prof. Me. Renato Alves Ferreira


Atributos do <input type="submit"…>
Este comando também possui alguns atributos úteis:
22

ATRIBUTO FUNÇÃO EXEMPLO

Define o nome e o endereço da imagem a ser utilizada <input type="submit" src="botao.png"/>


src
para decorar o botão.

Permite desativar o elemento, deixando-o inacessível ao <input type="submit" name="botao"


disabled
usuário. disabled="disabled"/>

Define o texto que será mostrado no centro do botão. O <input type="submit" value="Enviar Dados"/>
value
tamanho do botão se ajustará ao tamanho do texto.

prof. Me. Renato Alves Ferreira


Elemento <input type="reset"…>
Este comando permite inserir um botão que, ao ser acionado, apaga todos os
valores preenchidos no formulário. Muito útil para permitir que usuários corrija
erros no preenchimento sem precisar apagar individualmente o conteúdo de cada
campo.
<form>
Nome:
<input type="text" name="nome"/><br/>
E-mail:
<input type="text" name="email"/><br/>
<input type="submit" name="enviar" value="Enviar Dados"/>
<input type="reset" name="limpar" value="Limpar Dados"/>
</form>

prof. Me. Renato Alves Ferreira


Atributos do <input type="reset"…>
Este
24 comando também possui alguns atributos úteis:

ATRIBUTO FUNÇÃO EXEMPLO

Define o nome e o endereço da imagem a ser utilizada <input type="reset" src="botao.png"/>


src
para decorar o botão.

Permite desativar o elemento, deixando-o inacessível ao <input type="reset" name="botao"


disabled
usuário. disabled="disabled"/>

Define o texto que será mostrado no centro do botão. O <input type="reset" value="Enviar Dados"/>
value
tamanho do botão se ajustará ao tamanho do texto.

prof. Me. Renato Alves Ferreira


Elemento <input type="image"…>

Este comando permite inserir uma imagem que será utilizada como botão de
envio. Funciona da mesma forma que o tipo submit.

<form>
Nome:
<input type="text" name="nome"/><br/>
E-mail:
<input type="text" name="email"/><br/>
<input type="image" name="enviar" src="botao.png"/>
</form>

prof. Me. Renato Alves Ferreira


Atributos do <input type="image”… >
Este
26
comando também possui alguns atributos úteis:
ATRIBUTO FUNÇÃO EXEMPLO

Define o nome e o endereço da imagem a ser utilizada <input type="image" src="botao.png"/>


src
para decorar o botão.

Permite desativar o elemento, deixando-o inacessível ao <input type="image disabled="disabled"/>


disabled
usuário.

Atribui um caractere ao elemento que, quando digitado, <input type="image" accesskey="X"/>


accesskey
transfere o cursor (foco) para ele.

Habilita a navegação por meio da tecla TAB, permitindo


tabindex posicionar o cursor cada vez que a tecla for pressionada. <input type="image" tabindex="4"/>
O número informado corresponde à ordem de acesso.

prof. Me. Renato Alves Ferreira


Métodos de envio de dados pelo elemento <form>
Parâmentro action define qual programa ou agente instalado no servidor fará o processamento
27
e manipulação dos dados do formulário quando o botão submit for acionado. São dois
métodos :
• GET: envia os dados (objetos e conteúdos) do formulário à página destino para
processamento, utilizando a barra de endereço do navegador pelo protocolo http via URL.
• POST: envia os dados ao destino sem exibi-los na barra de endereços. A movimentação
dos dados é feita de forma transparente e no campo destinado a dados no protoco http.

<body>
<!--Formulário HTML através do método POST-->
<form method="post" action="recebe_dados.php">
...
...
</form>
</body>

prof. Me. Renato Alves Ferreira


Elemento <select>
Este comando permite inserir caixas de listagem para a escolha de uma opção
entre as diversas disponíveis.
É utilizado em conjunto com o elemento <option>.

<form>
<h4> Escolha uma cor: </h4> <hr>
<select name="cor">
<option>Verde</option>
<option>Amarelo</option>
<option>Azul</option>
<option>Branco</option>
<option>Roxo</option>
</select>
</form>

prof. Me. Renato Alves Ferreira


Elemento <select> com múltipla seleção
Permite configurá-lo de forma que o usuário possa selecionar múltiplas respostas,
adicionando o atributo multiple.
<form>
<h4> Escolha uma cor: </h4> <hr>
<select name="cor" multiple="multiple">
<option>Verde</option>
<option>Amarelo</option>
<option>Azul</option>
<option>Branco</option>
<option>Roxo</option>
</select>
</form>

prof. Me. Renato Alves Ferreira


Atributos do Elemento <select>
Este comando também possui alguns atributos úteis:
ATRIBUTO FUNÇÃO EXEMPLO

<select name="sftw">
<option>Windows 8</option>
name Define o nome da variável que carregará a opção selecionada. <option>Ubuntu 13.10</option>
</select>

Define o número de linhas a ser mostrado na lista. Quando o número <select name="sftw" size="2">
<option>Windows 8</option>
size de opções for superior ao número de linhas, uma caixa de rolagem é <option>Ubuntu 13.10</option>
anexada à lista. </select>

<select name="pais" multiple="multiple">


Quando utilizado, permite ao usuário selecionar múltiplas respostas <option>Brasil</option>
multiple na mesma lista, mantendo a tecla CTRL do teclado pressionada <option>Espanha</option>
durante a seleção. <option>Estados Unidos</option>
</select>

Define o conteúdo da variável. Quando utilizado dentro do comando <select name="pais">


<option value="br">Brasil</option>
<select>, permite atribuir um conteúdo padrão a ser mostrado na
value <option value="es">Espanha</option>
caixa de listagem. Quando utilizado dentro do comando <option>, <option value="ch">Chile</option>
permite atribuir um valor à variável quando selecionada a opção. </select>

prof. Me. Renato Alves Ferreira


...continuação
Mais alguns atributos úteis - Atributos do Elemento <select>
ATRIBUTO FUNÇÃO EXEMPLO

<select name="sexo">
<option selected="selected">
Masc
selected Permite atribuir um valor padrão dentro de uma das opções.
</option>
<option>Fem</option>
</select>

<select name="pais" accesskey="S">


Atribui um caractere ao elemento que, quando digitado, transfere
accesskey ...
o cursor (foco) para ele.
</select>

<select disabled="disabled">
disabled Permite desativar o elemento, deixando-o inacessível ao usuário. ...
</select>

Habilita a navegação por meio da tecla TAB, permitindo posicionar <select tabindex="10">
tabindex o cursor cada vez que a tecla for pressionada. O número ...
informado corresponde à ordem de acesso. </select>

prof. Me. Renato Alves Ferreira


Elemento <input type="file"…>
Este comando permite inserir uma caixa de texto e um botão para a procura de
documentos em unidades de discos. Ao ser ativado, ele abrirá uma caixa de diálogo
“Abrir” padrão do seu Sistema Operacional, e o conteúdo do documento selecionado
será transmitido como um dado do formulário.
<h3> Arquivo </h3>
<form action="..." method="post" enctype="multipart/form-data">
<input type="file" name="arquivo"/>
<input type="submit" name="enviar" value="Escolher Arquivo"/>
</form>

prof. Me. Renato Alves Ferreira


...continuação
Elemento <input type="file"…>

IMPORTANTE
Para permitir a transmissão de arquivos, devemos utilizar o valor “multipart/form-data”
no atributo atributo enctype:

<form method="post" enctype="multipart/form-data">


<input type="file" name="arquivo"/>
...
...
...
</form>

prof. Me. Renato Alves Ferreira


Atividade 1

prof. Me. Renato Alves Ferreira


Atividade 2

prof. Me. Renato Alves Ferreira


Atividade 3

prof. Me. Renato Alves Ferreira


Atividade 4

prof. Me. Renato Alves Ferreira


Te espero na próxima aula!

Você também pode gostar