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 

Inserção de Imagens em HTML

Este é um exemplo inicial:
Exemplo 10: imagens
Visualização exemplo 10
O tag utilizado para a inclusão de imagens é o: <IMG>
Vários atributos devem ser definidos sobre a origem, colocação e comportamento da imagem. Uma parte deles é opcional, com o tempo você descobrirá o que realmente importa no tag . Veja os mais importantes: 
- SRC
SRC="local da imagem"



Este atributo especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso de arquivos jpg ou gif, que você pode obter facilmente na rede. Exemplo de uso:

- IMG
<IMG SRC="tecnologia.gif">
Este tag abrirá o arquivo tecnologia.gif, localizado no mesmo diretório em que está o arquivo HTML que está sendo editado. Lembre-se que este é o único atributo que não pode ser omitido neste tag.



Nota: guarde sempre as imagens de sua preferência na mesma pasta em que estão os seus arquivos de HTML para evitar problemas, então é só escrever o nome do arquivo no atributo SRC para abrir a imagem.

Dica1: mantenha as imagens pequenas e use-as com critério, você deve usar os gráficos para dar impacto e interesse à página, sem acrescentar muito volume (ou tempo de espera para o carregamento dos arquivos).
Dica2: o alinhamento é mais prático quando é feito com o uso de tabelas (que também
será explicado).
- ALT
ALT="legenda"
Fornece o texto que aparece no espaço da imagem quando o browser não pode abrir a imagem ou esta capacidade foi "desligada".
Exemplo 11: Legenda - imagens
Visualização exemplo 11
- ALIGN=LEFT, RIGHT, TOP, MIDDLE ou BOTTOM
LEFT: a figura é desenhada como uma imagem alinhada à esquerda, com o texto fluindo ao
seu redor.
RIGHT: a figura é desenhada como uma imagem alinhada à direita.
TOP: a parte superior do texto ao redor é alinhada com a parte superior da imagem.
MIDDLE: a linha de base do texto ao redor é alinhada com a parte central da imagem.
BOTTOM: A linha de base do texto ao redor é alinhada com a parte inferior da imagem.
Nota: o tag
<CENTER></CENTER> é usado também para imagens, se você quiser alinhar o texto e a figura em relação a página. O tag imagem deve estar dentro do tag CENTER.

HEIGHT=número e WIDTH=número
- HSPACE=número e VSPACE=número (em pixels):
Especifica o espaço em branco extra ou as margens ao redor da imagem.
- HSPACE é o espaço horizontal e VSPACE é o espaço vertical.
1.1 Imagem de fundo
Podem ser incluídas também imagens de fundo, para isso utilize novamente o tag BODY, agora com o atributo BACKGROUND. Por exemplo:
<BODY BGCOLOR=#FFFFFF BACKGROUND ="imagem.gif" TEXT=#000000 ...>
Este tag abrirá a figura imagem.gif no fundo e terá cor de texto branca. Para cor de fundo foi utilizado o preto porque enquanto a imagem imagem.gif não é carregada o fundo preto possibilita ao usuário a leitura, já que o texto é branco.








1.1.1 - Exercício - Inserção de Imagens

Criar Régua em HTML



As réguas são usadas da seguinte forma:
Para a inclusão de um régua simples horizontal é só usar o tag <HR>, se você quiser mudar a aparência da régua, use os seguintes atributos:
Para alterar a largura use o atributo WIDTH.
Por exemplo: <HR WIDTH=50%> cria uma régua com largura de 50% da página.

Para alterar a altura use o atributo SIZE.
Por exemplo: <HR SIZE=5> cria uma régua de altura 5 pixels.
A configuração padrão cria uma régua 3D, com o atributo NOSHADE você cria uma régua em negrito.
Exemplo 8: Régua                                                 

Visualização exemplo 8
A configuração padrão cria uma régua centralizada. Se você quiser que ela fique alinhada a esquerda ou direita, use o atributo ALIGN igual a LEFT ou RIGHT.
Exemplo 9: Réguas alinhadas
Visualização exemplo 9

4.3 Exercício - Réguas e Marcadores


Regua



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