TPI 1 - HTML - Aula 11 - Formulários
Os formulários permite que possamos interagir com o visitante, solicitando nome, e-mail e outras informações que você acredite ser necessário para o seu site.
Os formulários são dividos em 2 partes. Uma parte onde descrevemos o código fonte em HTML (os campos, identificadores, botões, textos, etc) e um script ou aplicativo que possa processar as informações enviadas, como por exemplo um script em CGI.
Os formulários são dividos em 2 partes. Uma parte onde descrevemos o código fonte em HTML (os campos, identificadores, botões, textos, etc) e um script ou aplicativo que possa processar as informações enviadas, como por exemplo um script em CGI.
Sem um script você apenas consegue enviar as informações digitada para seu e-mail e não guardá-las em um banco de dados, ou outra ação mais complexa. A tag principal para iniciar um Formulário é a TAG FORM.
Esta tag tem vários parâmetros, vamos ver uma sintaxe completa desta TAG.
<form action="mailto:seumail@provedor?subject=assunto" method="post" enctype="text/plain" name="nome_do_formulario">
</form> Vamos entender esta TAG :
- FORM
- Indica que estamos iniciando um Formulário
- ACTION
- Indica a ação que formulário terá, neste caso, o formulário terá os dados enviados para seu e-mail. Pode ser indicado também um servidor e o programa CGI que irá processar o formulário.
- SUBJECT
- É o assunto do e-mail.
- METHOD
- É o metodo da troca de dados; qual método o servidor usará para recerber o formulário. Os métodos podem ser POST ou GET, neste caso é POST, porque estamos enviando informação para o provedor. Já o método GET, faz com que o conteúdo do formulário seja anexado ao endereço da URL.
- ENCTYPE
- É como o formulário será enviado, aqui os dados serão formatados como texto puro.
CAMPOS DO FORMULÁRIO
TIPO TEXTO
<INPUT>
Define um campo de entrada em que o usuário entra com as informações do formulário. Cada campo de um formulário atribui o seu conteúdo para uma variável, que possui nome e tipo específicos. Veja como seria :
Define um campo de entrada em que o usuário entra com as informações do formulário. Cada campo de um formulário atribui o seu conteúdo para uma variável, que possui nome e tipo específicos. Veja como seria :
- TYPE="TEXT"
- type = tipo - text = texto, ou seja o tipo de informação que aquele local receberá é do tipo texto.
- NAME="VAR_NOME"
- name = nome - var_nome é a variável que irá guardar o que for digitado naquele campo.
- SIZE="35"
- tamanho do objeto será de 35 pixels
- MAXLENGTH="30"
- comprimento máximo de caracteres será de 30.
- VALUE = "QUALQUER COISA"
- value = valor, ou seja, o campo já vem preenchido com o que vier neste parâmetro, neste caso virá escrito : qq coisa. Para alterar, basta selecionar o texto e escrever outro. Só utilize o value caso queira que um campo já venha preenchido com um valor, por exemplo : estado = SP, ai sim vale a pena.
Veja como ficaria :
TIPO SENHA
E se você quiser que a pessoa entre com uma senha ? Pode usar o type="password" Este comando é idêntico ao comando INPUT TEXT. Sua única diferença é que, no lugar dos caracteres digitados, aparece um asterisco.
Vamos ver como seria :
Vamos ver como seria :
- TYPE="PASSWORD"
- type = tipo - password = senha, ou seja o tipo de informação que aquele local receberá é do tipo senha, exibirá asterisco ao invés do caracter digitado.
- NAME="VAR_SENHA"
- name = nome - var_senha é a variável que irá guardar o que for digitado naquele campo.
- SIZE="35"
- tamanho do objeto será de 10 pixels.
- MAXLENGTH="6"
- comprimento máximo de caracteres será de 6.
Veja como ficaria :
BOTÃO DE RADIO
E para fazer uma seleção exclusiva de uma lista de opções ? Precisamos inserir um "botão de rádio", que são associados a uma única variável. O conteúdo de um dos campos é atribuído à variável. Apenas um campo pode ser marcado, vamos ver um exemplo :
Observe que todas as variáveis receberam o mesmo nome: CIVIL. Veja também que o único comando que tem o parâmetro CHECKED é o que contém a opção de solteiro,ou seja, esta opção já vem marcada como padrão.
Estas linhas reproduzirão :
OS NOMES DAS OPÇÕES OBRIGATÓRIAMENTE DEVEM SER IGUAIS, SE FOREM DIFERENTES, ESTE POSSIBILITARÁ MARCAR VÁRIAS OPÇÕES !!!
CHECKBOX
Para poder selecionar várias opções, usamos o CHECKBOX. Ele se parece como Radio Button, mas tem uma diferença significativa. Nele mais de um campo associado a uma variável pode ser selecionado. Veja o exemplo:
Veja o que isso reproduz :
LISTA DE OPÇÕES
o comando <SELECT> ... </SELECT> define e exibe uma lista de itens que podem ser selecionados pelo usuário.
Cargo pretendido:
Cargo pretendido:
Veja como ficaria :
Fazer uma opção já vir selecionada :
Cargo pretendido:
Reproduz:
Mostrar mais de uma linha.
Quando o parâmetro SIZE é omitido, a lista somente é aberta se a seta for pressionada. Se este parâmetro for especificado, ela é exibida aberta, mostrando a quantidade de linhas especificadas pelo parâmetro, independente da quantidade de itens da lista.
Veja o resultado :
Selecionar mais de uma opção
O Resultado será :
ÁREA DE TEXTO
Define uma caixa de digitaçao, onde o usuário pode digitar livremente um texto.
Abaixo, o resultado :
Nenhum comentário:
Postar um comentário