Scribd
Carregar
10 visualizações20 páginas

05 - Criando Formulários em HTML

Este documento descreve como criar formulários HTML com tags como <form>, <input> e atributos. Explica como adicionar campos de texto, senha e botões, e como configurar atributos como type, name, value. Também mostra como criar um formulário de login de exemplo.

Enviado por

Agnaldo de Lima
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
10 visualizações20 páginas

05 - Criando Formulários em HTML

Este documento descreve como criar formulários HTML com tags como <form>, <input> e atributos. Explica como adicionar campos de texto, senha e botões, e como configurar atributos como type, name, value. Também mostra como criar um formulário de login de exemplo.

Enviado por

Agnaldo de Lima
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 20

Tecnologia Web

Professora Cecília Sousa


A tag <img> do HTML
Para inserir uma imagem no HTML basta utilizar a tag <img> com o atributo src.
Ou seja: o atributo src, ou source, vai conter a url da imagem que será inserida.
Diante disso, a sintaxe final será: <img src=“url”>

Para inserir uma imagem local, podemos apenas incluir o nome da imagem com
sua extensão, como no exemplo: <img src=“imagem.jpg”>

Se ela estiver contida dentro de uma pasta local, nós devemos referenciar a pasta
também. Por exemplo, se minha página principal está contida na pasta
public_html e dentro dela temos uma pasta chamada imagens, onde está a nossa
imagem, utilizaremos a seguinte url: <img src=“imagens/imagem.jpg”>
Título e texto alternativo
Além do atributo src, a tag <img> possui outros atributos que complementam a
sua estrutura: podemos, por exemplo, incluir um atributo de título para a
imagem. Esse título será mostrado apenas quando o usuário passar o mouse
sobre a imagem. Portanto, para incluir o título a imagem, basta chamar pelo
atributo title=”…”. Vejamos então o exemplo abaixo:
Largura e altura do HTML img
A tag <img> traz consigo o padrão de altura e largura automática, de forma que
ela irá incluir o tamanho original da imagem, sem distorções, ou irá ajustar
dentro do container a qual ela for inserido. Porém, podemos manipular esse
tamanho diretamente através do atributos height (altura) e width (largura).
Criando um formulário
Todos os formulários em HTML devem, sem exceção, possuir a tag
<form> de abertura e a sua correspondente de fechamento, a tag
</form>.

São vários elementos possíveis para trabalharmos com formulários e,


entre os mais comuns que aprenderemos nessa aula estão: campo de
texto, campo de senha e botão de envio.
Para aprendermos a criar um formulário simples que contenha os
elementos citados acima, utilizaremos como exemplo uma tela
de login semelhante à da imagem a seguir:
Criando um formulário

Para criarmos esse formulário


com tela de login precisamos, é
claro, começar com a estrutura
básica de uma página web e
dentro dela inserir a nossa tag
<form> conforme exemplo já
citado. Em seguida, precisamos
acrescentar outros elementos
(tags) que veremos a seguir.
Campo de texto
A tag <input> é uma tag com a qual podemos criar vários tipos de campos
de entrada alterando apenas o atributo type que, como o próprio nome já
diz, serve para informar o tipo de campo que desejamos criar. Para nosso
exemplo, vamos começar criando um campo de texto simples com a tag
<input>, definindo no atributo type o valor “text”. Além disso, precisamos
também definir o atributo name que será usado pelo “programa” que
receberá os dados do formulário. Veja abaixo no exemplo:

Observação: colocamos antes da tag <input> um parágrafo para que tenhamos o


efeito de rótulo na caixa de texto no qual o usuário irá digitar seu nome.
Campo de texto
Veja na imagem abaixo como o navegador exibe o código do exemplo
anterior.
Além dos atributos type e name, existem outros que deixam o nosso
formulário muito mais sofisticado e profissional, alguns deles são:

size – define o tamanho do campo da caixa de texto que será exibido pelo
navegador;

maxlength – define a quantidade máxima de caracteres permitida no


campo de texto;

value – é utilizado quando há necessidade de se pré-definir um texto para


o campo, podendo este valor normalmente ser alterado pelo usuário.
Veja abaixo um exemplo da tag <input> com esses novos atributos:

Veja agora na imagem abaixo como o navegador exibe este código para
entendermos melhor alguns detalhes.
A primeira alteração que podemos notar é o tamanho menor do campo
senha que está assim por que definirmos o valor “15” ao atributo size.
Quando não definirmos um valor, o navegador se encarrega de definir um
valor padrão como podemos observar no campo nome.
Outra coisa que notamos é que o campo senha vem com a mensagem
“Entre com a senha” no seu interior. Nesse caso, precisamos apagar este
texto para digitar a senha. O atributo responsável por essa característica é
o value.
Embora o campo da senha possua o atributo size definido em 15, se
tentarmos digitar qualquer coisa dentro desse campo, conseguiremos
inserir apenas 5 caracteres, sejam eles letras, números ou ambos. Isso
acontece por que o atributo maxlength permite que o campo receba no
máximo os cinco caracteres.
Campo de senha
Podemos utilizar o campo de texto para o usuário entrar com
uma senha conforme vimos no exemplo anterior. Porém, isso
não é muito comum, pois temos uma forma especifica de criar
um campo para o nosso usuário entrar com senhas. A tag
utilizada é a <input>, mas o valor do atributo type nesse caso
será “password”. Dessa forma, quando o usuário digitar a
senha, os caracteres serão substituídos por asterisco (*).
Campo de senha
Veja no exemplo abaixo o código e em seguida uma imagem da tela.

Observações: 1 - O campo senha não possui nenhum tipo de criptografia, apenas coloca uma máscara (o
asterisco) no texto inserido;

2 - Os atributos size e maxlength funcionam da mesma forma na tag <input> quando utilizamos o valor
“password” no atributo type.
Botão de envio
Qualquer formulário necessita de um elemento que dispare uma
ação e, normalmente, isso é feito através de um botão de envio
criado também com a tag <input> mas, nesse caso, o valor do
atributo type para a ser “submit”.
Este botão de envio (submit) tem como objetivo passar os valores
digitados no formulário para a página definida no atributo action da
tag <form>. Veja no exemplo abaixo uma maneira simples de criar
um botão enviar.
Botão de envio
Nesse caso não precisamos colocar a tag <input> entre parágrafos já
que no botão enviar não teremos normalmente um rótulo.
Entretanto, vimos com frequência que a descrição do botão está no
próprio botão e, para isso, precisamos definir no atributo value o
texto que desejamos que apareça no botão.

Além disso, são imprescindíveis também dois atributos que por


enquanto não nos serão uteis, mas é bom conhecermos agora para
tornar mais fácil o aprendizado sobre formulários.
O primeiro atributo é o action que serve para definirmos o nome do
arquivo que receberá os dados preenchidos no formulário. O único
objetivo desse atributo é informar para aonde serão enviados os dados do
formulário e esse arquivo que receberá os dados, criado em linguagem
php, por exemplo, ficará responsável por analisar, processar e/ou
armazenar as informações.

O segundo atributo também obrigatório em um formulário é o method,


que serve para especificarmos a forma de envio dos dados, podendo ser do
tipo GET ou POST.
Segue abaixo a definição de ambos:
GET – método que envia as variáveis digitadas pelo usuário pela URL, ou
seja, podemos ver as variáveis sendo passadas pela URL da página de
destino. Não é muito aconselhável o uso do método GET, pois ele expõe os
nomes e os valores das variáveis.
POST – método que envia as variáveis digitadas pelo corpo da página,
sendo completamente transparente para o usuário. É o método mais
aconselhável.
Depois de conhecermos um pouco sobre os atributos action e method,
vamos observar um exemplo de como codificar a tag <form> com seus
atributos obrigatórios.
Tela de login
Apenas com as tags <form>, <input> e os atributos que aprendemos nessa
aula, já é possível criar alguns formulários bem simples. Segue agora o
código completo da tela de login apresentada no início dessa aula para que
possamos ter mais um exemplo para realizarmos o exercício a seguir.
Exercício
Utilizando-se do conteúdo
estudado nessa aula, escreva
um código HTML que
reproduza um formulário de
inscrição semelhante ao da
imagem abaixo.
Exercício de Revisão
Elabore uma página contendo o
maior número de informações
aprendidas até o momento.

Você também pode gostar