Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br
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>
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.
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.
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] >
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.
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.
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>
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.
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>
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.
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>
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.
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.
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>
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.
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>
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>
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>
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>
Exemplo <FORM ACTION="dir/resultado.asp" METHOD="post" NAME="form1"> <FIELDSET> <LEGEND>Dados Pessoais</LEGEND> Nome: <INPUT TYPE="text" NAME="nome"><BR> E-mail: <INPUT TYPE="text" name="email"><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>
Boa Noite!