Programação para Internet I

Tamanho: px

Começar a partir da página:

Download "Programação para Internet I"

Estela Paiva Aragão
10 Há anos
Visualizações:

1 Programação para Internet I Aulas 09 e 10 Fernando F. Costa [email protected]

2 Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode possuir vários campos nos quais o usuário pode interagir de formas diferentes para que os dados sejam enviados para o servidor. Sintaxe: <form atributo1= [parâmetro] atributon= [parâmetro] > Conteúdo do formulário </form>

Um formulário pode possuir vários campos nos quais o usuário pode interagir de formas

3 Formulários Atributos Name Define o nome do formulário. Este nome será útil para quando iniciarmos os trabalhos com JavaScript. Method Define o método de envio dos dados. Valores aceitos: Get: Envia os dados do formulário pela URL. Envia no máximo 256 bytes. Post: Envia os dados por meio de uma variável de ambiente, oculta aos olhos dos usuários.

Method Define o método de envio dos dados.

4 Formulários Atributos Action Determina a URL de destino da informação. Enctype Específica o tipo de empacotamento a que os dados serão submetidos. O valor padrão é em formato string, mas quando queremos enviar um arquivo pelo formulário (utilizando o campo file), precisamos utilizar o valor multipart/form-data que transforma os dados em código binário.

O valor padrão é em formato string, mas quando queremos enviar um arquivo pelo

5 Formulários Entrada de Dados A tag mais utilizada para entrada de dados é a <input>, pela qual podemos receber os dados de várias formas. Sintaxe: <input atributo1= [parâmetro] atributon= [parâmetro] >

6 Formulários Entrada de Dados Atributos da tag INPUT Type Determina o tipo de entrada de dados. Valores aceitos: Text: entrada de texto. (apenas uma linha) Hidden: campo oculto. Password: entrada de senha File: entrada de arquivo. Obs: O HTML 5 oferece suporte ao file multiple para upload de vários arquivos. Checkbox: caixa de múltiplas opções.

(apenas uma linha) Hidden: campo oculto.

7 Formulários Entrada de Dados Atributos da tag INPUT (continuação dos valores aceitos para o atributo type) Radio: caixa de opções simples. Submit: botão de envio. Reset: botão de reset. Limpa o formulário. Button: botão genérico. Normalmente utilizado para executar funções JavaScript. Image: botão imagem.

Submit: botão de envio. Reset: botão de reset. Limpa o formulário.

8 Formulários Exemplo <HTML> <HEAD> <TITLE>Desenvolvendo em HTML</TITLE> </HEAD> <BODY> <FORM ACTION="dir/resultado.asp" METHOD="post" NAME="form1"> Campo texto : <INPUT TYPE="text" NAME="texto"><BR> Campo oculto: <INPUT TYPE="hidden" NAME="oculto"><BR> Campo de senha : <INPUT TYPE="password" NAME="senha"><BR> Campo de arquivo: <INPUT TYPE="file" NAME="arquivo"><BR> <INPUT TYPE="checkbox" NAME="opcao1" VALUE="ok"> Check<BR> <INPUT TYPE="radio" NAME="opcao2" VALUE="ok"> Radio<BR> <INPUT TYPE="submit" VALUE="Enviar"><BR> <INPUT TYPE="reset" VALUE="Limpar"><BR> <INPUT TYPE="button" NAME="botao" VALUE="Botão"><BR> <INPUT TYPE="image" NAME="bt_imagem" SRC="img/salvarsubmit.jpg" WIDTH="60" HEIGHT="20" BORDER="0"> </FORM> </BODY> </HTML>

NAME="senha"><BR> Campo de arquivo: <INPUT TYPE="file" NAME="arquivo"><BR> <INPUT TYPE="checkbox" NAME="opcao1" VALUE="ok"> Check<BR> <INPUT TYPE="radio" NAME="opcao2" VALUE="ok">

9 Formulários Entrada de Dados Atributos da tag INPUT Name Atribui um nome ao dado. Este campo é obrigatório, pois é quem identifica a informação enviada. Id Atributo de identificação da tag. Muito utilizada por linguagens client side. Ex: Javascript. Value Atribui ao campo um valor padrão. Para os tipos text e password são opcionais, mas para os tipos hidden, checkbox e radio são obrigatórios. Nos inputs do tipo submit, reset e button é neste atributo que inserimos o texto que será apresentado no botão.

Muito utilizada por linguagens client side. Ex: Javascript. Value Atribui ao campo um valor padrão.

10 Formulários Exemplo <HTML> <HEAD> <TITLE>Programando em HTML 4.0</TITLE> </HEAD> <BODY> <FORM ACTION="dir/resultado.asp" METHOD="post" NAME="form1"> Campo texto : <INPUT TYPE="text" NAME="texto" VALUE="Exemplo"><BR> Campo de senha : <INPUT TYPE="password" NAME="senha" VALUE="123"><BR> <INPUT TYPE="checkbox" NAME="opcao1" VALUE="ok"> Check<BR> <INPUT TYPE="radio" NAME="opcao2" VALUE="ok"> Radio<BR> <INPUT TYPE="submit" VALUE="Enviar"><BR> <INPUT TYPE="reset" VALUE="Limpar"><BR> <INPUT TYPE="button" NAME="botao" VALUE="Botão"><BR> </FORM> </BODY> </HTML>

NAME="senha" VALUE="123"><BR> <INPUT TYPE="checkbox" NAME="opcao1" VALUE="ok"> Check<BR> <INPUT TYPE="radio" NAME="opcao2" VALUE="ok">

11 Formulários Entrada de Dados Atributos da tag INPUT Size Determina o tamanho da entrada de texto em caracteres. Maxlength Determina o número máximo de caracteres que pode ser digitado em uma entrada de texto. Src Define a url da imagem para o botão do tipo image. Checked Não possui valor. Apenas define que um campo checkbox ou radio fique selecionado.

Maxlength Determina o número máximo de caracteres que pode ser digitado em uma entrada

12 Formulários Exemplo <HTML> <HEAD> <TITLE>Programando em HTML 4.0</TITLE> </HEAD> <BODY> <FORM ACTION="dir/resultado.asp" METHOD="post" NAME="form1"> <P ALIGN="center"> Escolha seu carro: </P> Modelo: <BR> <INPUT TYPE="radio" NAME="modelo" VALUE="luxo" CHECKED> Luxo <BR> <INPUT TYPE="radio" NAME="modelo" VALUE="esporte"> Esporte<BR> <INPUT TYPE="radio" NAME="modelo" VALUE="economico"> Econômico <BR> Acessórios:<BR> <INPUT TYPE="checkbox" NAME="acess" VALUE="direcao" CHECKED> Direção hidráulica <BR> <INPUT TYPE="checkbox" NAME="acess" VALUE="ar"> Ar condicionado<br> <INPUT TYPE="checkbox" NAME="acess" VALUE="vidro" CHECKED> Vidros elétricos<br> </FORM> </BODY> </HTML>

TYPE="radio" NAME="modelo" VALUE="esporte"> Esporte<BR> <INPUT TYPE="radio" NAME="modelo" VALUE="economico"> Econômico <BR> Acessórios:<BR> <INPUT TYPE="checkbox"

13 Formulários Entrada de Dados Atributos da tag INPUT ReadOnly Torna o campo somente leitura, impedindo que o usuário altere seu valor. Disabled Semelhante ao readonly, mas com a diferença que o dados do tipo disabled são ignorados pelo formulário na hora do envio. Apresenta o conteúdo com uma cor mais clara. Tabindex Define o índice de tabulação, ou seja, a sequência que o browser respeitará quando o usuário pressionar a tecla TAB. AcessKey Define uma tecla de acesso para o campo ou item de formulário.

Disabled Semelhante ao readonly, mas com a diferença que o dados do tipo disabled são ignorados pelo formulário na hora do

14 Formulários Área de Texto Áreas de texto são utilizadas para receber um volume maior de informações. Possui várias linhas Atributos: Name, size, readonly, disabled, tabindex e acesskey funcionam de modo semelhante aos atributos da tag input.

Possui várias linhas Atributos: Name, size, readonly,

15 Formulários Área de Texto Outros atributos: Rows número de linhas visíveis. Cols número de colunas (caracteres) visíveis. Sintaxe: <textarea name= nome rows= qtde_linhas cols= caracteres > </textarea>

16 Formulários - Lista Cria uma lista com várias opções. Pode ser exibida como um combo ou uma listagem comum. Atributos: name, disabled, tabindex e acesskey funcionam de forma idêntica aos atributos da tag input.

Atributos: name, disabled, tabindex e acesskey

17 Formulários - Lista Outros atributos: Size quantidade de linhas exibida. Padrão é 1. Multiple permite que mais de uma opção seja escolhida. Funciona somente com size > 1. Value Atribui um valor a cada item da lista. Selected seleciona o item da lista. Sintaxe: <select name= nome > </select> <option value= valor > opção </option>

Funciona somente com size > 1. Value Atribui um valor a cada item da lista.

18 Formulários - Lista As opções da lista, também podem ser agrupadas por categorias, para isso usamos a tag <optgroup>. Sintaxe: <select name= nome > <optgroup label= nome grupo > <option value= valor > opção </option> <option value= valor > opção </option> </optgroup <optgroup label= nome grupo > <option value= valor > opção </option> <option value= valor > opção </option> </optgroup> </select>

Sintaxe: <select name= nome > <optgroup label= nome grupo > <option value= valor > opção </option>

19 Formulários Identificadores de Campo Servem para que, quando o usuário clicar sobre o identificador, ele também selecione o campo daquele identificador. Sintaxe: <label> Exemplo de identificador <input type= text name= exemplo > </label>

selecione o campo daquele identificador.

20 Formulários Blocos de Dados Oferecem um ótimo recurso visual para separar grupos diferentes de informação Sintaxe: <fieldset> <legend> Descrição da legenda </legend> Campos de texto, listas, etc. </fieldset>

informação Sintaxe: <fieldset> <legend> Descrição

21 Exemplo <FORM ACTION="dir/resultado.asp" METHOD="post" NAME="form1"> <FIELDSET> <LEGEND>Dados Pessoais</LEGEND> Nome: <INPUT TYPE="text" NAME="nome"><BR> <INPUT TYPE="text" name=" "><br> Sexo: <INPUT TYPE="radio" NAME="sexo" VALUE="M">Masculino <INPUT TYPE="radio" NAME="sexo" VALUE="F"> Feminino<BR> Idade: <INPUT TYPE="text" NAME="idade" SIZE="2"> </FIELDSET><BR> <FIELDSET> <LEGEND>Dados Profissionais</LEGEND> Forma de contratação: <BR> <INPUT TYPE="radio" NAME="forma" VALUE="CLT">Registrado <INPUT TYPE="radio" NAME="forma" VALUE="PJ"> Contratado<BR> Cargo: <SELECT NAME="cargo"> <OPTION VALUE="anjr">Analista Júnior</OPTION> <OPTION VALUE="anpl">Analista Pleno</OPTION> <OPTION VALUE="anse">Analista Sênior</OPTION> <OPTION VALUE="webd">Web Designer</OPTION> </SELECT><BR> Setor: <INPUT TYPE="text" NAME="setor"> </FIELDSET> </FORM>

22 Boa Noite!

Documentos relacionados

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que