Formulários em HTML




Formulários

Um dos recursos mais fascinante da linguagem Html é a possibilidade de criar formulários eletrônicos.
Usando um formulário o usuário pode interagir com o servidor, enviando dados que serão processados no servidor e posteriormente devolvidos ao cliente.
Esses comandos são os principais responsáveis pela viabilização da troca de informações entre o cliente e o servidor. Eles podem ser usados em qualquer tipo de atividade.
O elemento <FORM> delimita um formulário e contém uma seqüência de elementos de entrada e de formatação do documento.
<FORM ACTION="URL_de_script" METHOD=método>...</FORM>
Os atributos de FORM que nos interessam agora são:
- ACTION - especifica o URL do script ou email ao qual serão enviados os dados do formulário.
- METHOD - Seleciona um método para acessar o URL de ação. Os métodos usados atualmente são :
- POST - os dados entrados fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados.
- GET - os dados entrados fazem parte do URL associado à consulta enviada para o servidor; suporta até 128 caracteres.
FORM também pode apresentar o atributo: ENCTYPE


Indica o tipo de codificação dos dados enviados através do formulário. O tipo default é application/x-www-form-urlencoded. Outro tipo aceito por alguns browsers é text/plain, mas sua utilização ainda não está padronizada.
Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários.
Em especial, colocamos dentro da marcação de <FORM> as formatações para campos de entrada de dados, que são três: <INPUT>, <SELECT> e <TEXTAREA>.
1.1 Texto
a. Entrada de texto comum - TEXT
b. Entrada de texto protegido, senha - PASSWORD
c. Entrada oculta - HIDDEN
d. Entrada de várias linhas de texto - TEXTAREA
a. Entrada de texto comum – TEXT

A forma mais simples de campo de entrada é a marcação text. Este campo permite a digitação de uma única palavra ou linha de texto, e possui uma largura default de 20 caracteres.
b. Entrada de texto protegido, senha – PASSWORD
 Marcações de entrada do tipo password são idênticas aos campos do tipo text, exceto pelo fato de todos os caracteres serem exibidos como asteriscos ( *).
c. Entrada de várias linhas de texto - TEXTAREA

 A marcação TEXTAREA não utiliza o formato convencional INPUT TYPE="text" dos
exemplos anteriores. Ao contrário, uma marcação <TEXTAREA> delimita o seu início e a
marcação </TEXTAREA> o seu fim.
Opções:
- ROWS ="" OBRIGATÓRIO
Especifica o número de linhas da entrada textual.

- COLS="" OBRIGATÓRIO
Especifica o número de colunas da entrada textual.
- Texto default OPCIONAL
Se você deseja que um texto seja exibido no campo textual ao abrir o formulário,
simplesmente coloque este texto entre as marcações de início e fim da TEXTAREA.
1.2 Menus
a. Menus com opções - SELECT
b. Listas pagináveis - SELECT com SIZE
a. Menus com opções - SELECT
Menu de opção única
A marcação SELECT segue a mesma convenção de TEXTAREA. Ou seja, as opções de menu ficam entre a marcação de início <SELECT> e a de fim </SELECT>.
b. Listas pagináveis - SELECT com SIZE
A única diferença entre este elemento de entrada e o anterior SELECT é a introdução da
opção SIZE. Ela especifica quantas linhas com opções de menu serão exibidas na janela.
Opções:


- MULTIPLE OPCIONAL
Especifica que múltiplas opções podem ser selecionadas, em oposição ao exemplo
anterior do SELECT, onde apenas uma opção pode ser selecionada no menu.
- SIZE - OBRIGATÓRIO
Número de linhas (opções de menu) exibidas na janela.
- OPTION - OBRIGATÓRIO
Especifica uma opção da lista.
- VALUE - OPCIONAL
Especifica o valor da opção retornada ao servidor. Se não for definido, o nome da opção é
enviado ao servidor.
- SELECTED OPCIONAL
Esta opção determina uma OPTION default para ser selecionada.
1.3 Botões
a. Botões sim ou não - CHECKBOX
b. Botões com opções - RADIO
c. Botões de submissão e limpeza

a. Botões sim ou não – CHECKBOX

Retornando ao formato de INPUT TYPE="", a marcação CHECKBOXES é perfeita para escolher entre duas opções.
b. Botões com opções – RADIO



São objetos que permitem ao usuário a escolha de apenas uma alternativa, diante de uma série de opções.
Sas principais propriedades são: name, value e checked.
- name : Especifica o nome do objeto. Para caracterizar uma mesma série de opções, todos os objetos desta série têm que ter o mesmo "name".
- value : Especifica o valor que será enviado ao "server" se o objeto estiver ligado (checked). Caso seja omitido, será enviado o valor default "on" . Esta propriedade também serve para ativar comandos lógicos, testando-se a condição de "checked".
- checked : Especifica que o objeto inicialmente estará ligado.
c. Botões de submissão e limpeza - RESET E SUBMIT
Em vez do usuário corrigir cada INPUT, um botão RESET pode ser utilizado para restaurar todos os campos a seus valores default, como se nenhuma informação houvesse sido digitada.
E finalmente, o FORM precisa de uma opção para enviar toda a informação digitada para o servidor, uma vez que o usuário terminou de preencher os todos os campos de entrada. O botão SUBMIT transfere toda a informação para a URL especificada no elemento ACTION.
Exemplo 14: Cadastro de informações







Voltar

Veja mais:
Editar texto em html
Formatar imagem em html
Links em html
Listas em html
Tabelas em html
Plus no site em html 

0 comentários:

Postar um comentário

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | JCPenney Coupons