Trabalhando com Links e Formulários

Prévia do material em texto

Trabalhando com links e formulários
Apresentação
HTML (Hypertext Markup Language) é uma linguagem de marcação de hipertextos utilizada no 
desenvolvimento de websites. Apresenta uma série de tags, marcações especiais interpretadas pelos 
navegadores e formatadas de acordo com sua funcionalidade.
Por meio da tag âncora <a>, o HTML permite a interligação entre páginas. Além disso, links podem 
ser utilizados para acessar páginas externas e permitir o download de arquivos. O HTML tem, ainda, 
os chamados formulários, componentes especiais que permitem interação com sistemas dinâmicos 
com diversos componentes como caixas de texto, checkboxes, radios, caixas de seleção e botões.
 
Nesta Unidade de Aprendizagem, você saberá como desenvolver páginas HTML inserindo links com 
a tag âncora <a> e formulários, além de identificar os distintos componentes de um formulário.
Bons estudos.
Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:
Elaborar páginas HTML com links e âncoras.•
Desenvolver páginas HTML com formulários.•
Identificar os diferentes componentes de um formulário. •
Desafio
Os serviços digitais, como o envio de e-mails, proporcionaram uma profunda modificação no 
ambiente de trabalho das empresas. Entretanto, muitas ainda não adotaram o meio digital como 
principal fonte de comunicação devido a dificuldades da equipe e dos clientes. Nesse contexto, a 
criação de interfaces de sites que facilitem o contato pode ser um grande diferencial.
 
Você foi contratado pelo jornal local de uma pequena cidade para criar um site de notícias. A cidade 
tem 50 mil moradores e vem adotando com fervor o uso das tecnologias digitais. Entretanto, 
muitos moradores ainda têm dificuldades. O editor pediu que o site tenha alguma forma de contato 
entre o leitor e os jornalistas, que atualmente só usam o telefone. Ao conversar com a equipe, você 
descobriu que vários utilizavam e-mails pessoais para comunicação.
 
Sendo assim, responda:
 
a) Ao desenvolver o site, como você poderia resolver a demanda apresentada pelo editor e pela 
equipe?
 
b) Você poderia resolver esse problema utilizando apenas links (tente desenvolver o código)? Se 
sim, qual o problema de se utilizarem apenas links?
c) Há alguma outra forma de resolver esse problema sem que o usuário tenha que usar um e-mail 
pessoal?
Infográfico
As primeiras páginas web eram estáticas, permitindo ao usuário apenas a leitura de informações. 
Com as novas tecnologias desenvolvidas, pode-se não apenas ler as informações, mas também 
enviá-las. Nesse contexto, surgem os formulários.
Neste Infográfico, você conhecerá algumas das tags utilizadas para inserção de dados, como text, 
password, e-mail, checkbox, radio, button e file.
Aponte a câmera para o 
código e acesse o link do 
conteúdo ou clique no 
código para acessar.
https://statics-marketplace.plataforma.grupoa.education/sagah/3f9c56d8-fc33-4237-980e-75f96bf81608/eb2c7b00-1fe0-4079-8a9e-d0fa67152f32.jpg
Conteúdo do livro
Diferentes páginas HTML podem ser interligadas a partir dos chamados links,definidos pela tag 
âncora <a>. Além disso, HTML fornece os chamados formulários, que permitem que usuários 
interajam com sistemas web,fazendo a conexão com o servidor e permitindo o envio de 
informações para que sejam processadas por linguagens de programação back-end.
No capítuloTrabalhando com links e formulários, da obra Programação Front End I, que é base 
teórica desta Unidade de Aprendizagem, você vai aprender a interligar páginas de Internet por meio 
de links. Além disso, aprenderá a construir formulários HTML por meio da tag <input>, que pode 
receber textos, e-mails, senhas, botões, campos de marcação de seleção múltiplos ou únicos, botões 
e arquivos.
Boa leitura.
PROGRAMAÇÃO 
FRONT END I
Diego César Batista Mariano
Trabalhando com 
links e formulários
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:
 � Desenvolver páginas HTML com links e âncoras. 
 � Desenvolver páginas HTML com formulários.
 � Identificar os diferentes componentes de um formulário.
Introdução
Formulários permitem que usuários interajam com sistemas Web, esta-
belecendo conexão entre cliente e servidor.
Neste capítulo, você estudará sobre a interligação de páginas da 
Internet por meio de links. Será mostrado como desenvolver páginas 
HTML com links e âncoras, assim como com formulários. Você também 
será capaz de identificar os diferentes tipos de componentes de um 
formulário.
Desenvolvimento de páginas HTML 
com links e âncoras
HTML permite que páginas sejam interligadas por meio dos chamados links 
(SILVA, 2015). A tag âncora <a> é a responsável por isso, recebendo, no 
atributo href, o endereço para o qual o link deve apontar, conforme exemplo 
a seguir:
<a href="#">Eu sou um link</a>
Por padrão, a maior parte dos navegadores exibe links de texto sublinhados 
e na cor azul, exceto quando uma configuração diferente nas folhas de estilo 
CSS especifique outra configuração para a apresentação visual de um link.
Quando o atributo href recebe o valor #, ao clicar no link, nada acontece. Entretanto, 
ao deixar o valor do atributo href em branco, a página é recarregada.
Links relativos
Links relativos apontam para arquivos locais, ou seja, um arquivo presente no 
mesmo dispositivo do arquivo HTML em questão. Nos exemplos a seguir, você 
verá a criação de duas páginas HTML: página 1 e página 2. Ambas apresentam 
apenas um título indicando seu nome e um link para a página oposta.
<h1>Eu sou a página 1</h1>
<a href="pagina2.html">Link para a página 2</a>
O link da página 1 recebe como atributo o valor “pagina2.html”. Observe que 
o valor deve ser exatamente igual ao nome do arquivo, incluindo a extensão .html. 
Nesse caso, o arquivo da página 2 deve estar no mesmo diretório do arquivo da página 1.
Trabalhando com links e formulários2
Observe, agora, a criação do arquivo “pagina2.html”.
<h1>Eu sou a página 2</h1>
<a href="pagina1.html">Link para a página 1</a>
A página 2 apresenta um link que aponta para a página 1. Ao executar as páginas no 
navegador, é possível alternar de uma para outra, clicando nos links criados.
Links relativos podem receber como valor do atributo href endereços completos, 
como:
 � C:\user\diego\desktop\pagina1.html (Windows)
 � /user/diego/desktop/pagina1.html (MacOS X/Linux)
Além disso, é possível indicar links para acessar arquivos dentro de outros diretórios. 
No exemplo a seguir, foi criada uma pasta denominada “html”, para onde foi movido o 
arquivo “pagina2.html”. Veja como deveria ser o link no arquivo “pagina1.html”:
<a href="html/pagina2.html">Página 2</a>
Entretanto, no arquivo “pagina2.html”, o link para retornar à página 1 deve apontar 
para um diretório anterior. Para fazer isso, basta indicar que o link se encontra em um 
diretório anterior, adicionando “..” antes da barra:
<a href="../pagina1.html">Página 1</a>
3Trabalhando com links e formulários
Links absolutos
Links absolutos apontam para endereços externos. O valor de href deve conter 
um protocolo de acesso, como http ou https seguido por duas barras, e o 
endereço para o qual o link deve apontar.
<a href="https://www.google.com.br">Google</a>
Links para e-mails
Links também podem apontar para endereços de e-mail. Para isso, utilize a 
palavra mailto seguida de dois-pontos e um endereço de e-mail. Nesse caso, 
o navegador chamará o programa-padrão de envio de e-mails do computador, 
informando que a mensagem deve ser enviada ao e-mail indicado.
<a href="mailto:pessoa@sagah.com.br">Contato por e-mail</a>
Links em imagens
Links podem ser combinados com imagens. Nesse caso, o código HTML da 
imagem deve ser inserido dentro da tag âncora <a> no lugar do texto.
<a href="#">
 <img src="...">
</a>
Trabalhando com links e formulários4
Atributo target
O atributo target indica o contexto de navegação que determinado link 
deve carregar (nova aba, nova janela ou frame). No Quadro 1, a seguir, estãoos valores que podem ser atribuídos ao target.
Valor Definição
_self Carrega o link na aba atual (valor padrão utilizado 
quando o atributo não é definido).
_blank Carrega o link em uma nova aba.
_parent Carrega o link no frame pai. 
_top Carrega o link no corpo inteiro da janela.
Quadro 1. Valores que podem ser atribuídos ao target
Desenvolvimento de páginas HTML 
com formulários
Nos primeiros anos da Internet, as páginas Web eram estáticas, permitindo 
ao usuário apenas a leitura de informações. Com a evolução das tecnologias 
e linguagens de desenvolvimento Web, foi possível que usuários não apenas 
lessem, mas, também, enviassem informações. Um exemplo, disso são os 
chamados formulários (Figura 1).
Formulários permitem que usuários interajam com sistemas Web 
(MARIANO; MELO-MINARDI, 2017), estabelecendo conexão entre cliente e 
servidor, por meio do envio de informações a serem processadas por linguagens 
de programação back-end.
5Trabalhando com links e formulários
Figura 1. Criando formulários HTML.
Fonte: photovibes/Shutterstock.com.
Formulários têm muitas utilidades, como em páginas de contato, que 
permitem que o usuário do site envie informações para o criador (Figura 2).
Figura 2. Exemplo de formulário para envio de e-mail.
Fonte: Mariano e Melo-Minardi (2017).
Trabalhando com links e formulários6
Tag <form>
Formulários podem ser criados com a tag <form>, que recebe diversos 
atributos (<FORM>..., 2019), dentre eles:
 � name — nome que identifica o formulário;
 � action — endereço para onde o formulário deve ser enviado;
 � method — post ou get (Quadro 2);
 � enctype — valor usado como identificador de duas partes para for-
matos transmitidos na Internet (usado para o método post). Pode 
receber os valores: application/x-www-form-urlencoded 
(valor padrão), multipart/form-data (para envio de arquivos) e 
multipart/form-data (para HTML5).
No exemplo a seguir, você verá como um formulário é criado. O atributo 
action recebe a página para a qual o formulário será enviado (aqui deno-
minada como “processa_formulario.php”). O método utilizado foi 
o post, e o nome do formulário é “meu_formulario”.
<form action="processa _ formulario.php" method="post" 
name="meu _ formulario">
 [...]
</form>
GET No método GET, as informações do formulário são transmitidas 
diretamente pela URL. Em geral, o método GET permite envio de 
strings até 255 caracteres. 
POST O método POST encapsula as informações e as envia junto ao corpo 
da requisição HTTP.
Quadro 2. Métodos POST e GET
7Trabalhando com links e formulários
Diferentes componentes de um formulário 
Formulários são componentes HTML que recebem informações. A principal 
tag utilizada por um formulário é a tag <input>, que contém diversos tipos. 
Além disso, formulários também podem receber campos como <button> 
ou, até mesmo, <label> para identificar rótulos.
Tag input
A tag <input> permite a inserção de dados em formulários e pode receber 
como atributos:
 � name — nome do formulário que será usado para processamento em 
linguagens back-end;
 � value — atributo que recebe o valor-padrão a ser exibido no formulário;
 � placeholder — texto que aparece dentro de caixas de texto;
 � type — identificação do tipo de campo;
O Quadro 3, a seguir, mostra os tipos de input de formulários.
Valor Definição
text Caixa de texto simples
email Caixa de texto com verificação de e-mail 
password Campo de senha 
checkbox Caixa de seleção múltipla
radio Caixa de seleção única
file Arquivo
submit Botão de submissão de formulário
hidden Campo oculto
button Botão simples
Quadro 3. Tipos de input de formulários
Trabalhando com links e formulários8
Tipo text, email e password
Os campos text, email e password são bastante parecidos (Figura 3). 
A principal diferença é que email verifica se o valor digitado corresponde a 
um e-mail (busca pelo símbolo de @), e o password criptografa os valores 
digitados (oculta caracteres).
<form action="#" method="post" name="formulario">
 <h1>Text</h1>
 <p>
 <input type="text" name="texto" placeholder="Digite um 
nome">
 </p>
 <h1>Email</h1>
 <p>
 <input type="email" name="email" placeholder="Digite um 
e-mail">
 </p>
 <h1>Senha</h1>
 <p>
 <input type="password" name="senha" placeholder="Digite 
a senha">
 </p>
</form>
O atributo placeholder exibe uma mensagem que desaparece quando 
se clica no campo.
9Trabalhando com links e formulários
Figura 3. Text, email e password.
Tipo checkbox e radio
checkbox e radio são dois tipos de campos de marcação (Figura 4). A 
principal diferença entre eles é que grupos de campos checkbox podem ser 
marcados múltiplas vezes, enquanto os de radio só permitem a escolha de um.
<form action="#" method="post" name="formulario">
 <h1>Checkbox</h1>
 <p>
 <input type="checkbox" name="nome _ unico1" value="1" />
 <label>1</label>
 </p>
 <p>
 <input type="checkbox" name="nome _ unico1" value="2" />
 <label>2</label>
 </p>
Trabalhando com links e formulários10
 <h1>Radio</h1>
 <p>
 <input type="radio" name="nome _ unico2" value="1" />
 <label>1</label>
 </p>
 <p>
 <input type="radio" name="nome _ unico2" value="2" />
 <label>2</label>
 </p>
</form>
Para que sejam identificados como um grupo, devem receber o mesmo 
valor no campo name.
Figura 4. checkbox e radio.
11Trabalhando com links e formulários
Tipos hidden e file
Campos do tipo hidden ocultam informações (Figura 5). Podem ser utilizados 
para armazenar códigos de identificação ou qualquer outra informação que 
não deve ser exibida para o usuário. 
O tipo file permite o envio de arquivos.
<form action="#" method="post" name="formulario">
 <h1>Arquivo</h1>
 <p>
 <input type="file" name="arquivo">
 <input type="hidden" value="codigo _ secreto _ 123">
 </p>
</form>
Figura 5. Envio de arquivos.
Tipos button e submit
Botões button e submit permitem a execução de ações (Figura 6). 
Entretanto, o botão do tipo submit é especial, pois é por meio dele que o 
formulário é enviado.
Trabalhando com links e formulários12
<form action="#" method="post" name="formulario">
 <h1>Botões</h1>
 <p>
 <input type="button" value="Botão comum">
 <input type="submit" value="Enviar">
 </p>
</form>
O atributo value é quem define o valor do texto que será exibido no botão. 
Ao clicar em enviar, a página é redirecionada para onde o atributo action 
do <form> indicar.
Figura 6. Botões.
Tag <select>
As tags <select> (Figura 7) permitem que o usuário selecione entre uma 
série de opções determinadas pelas tags <option>.
<form action="#" method="post" name="formulario">
 <h1>Select</h1>
 <p>
 <select name="selecione">
 <option value="1">1</option>
 <option value="2">2</option>
 </select>
 </p>
</form>
13Trabalhando com links e formulários
Observe que a tag <option> recebe o atributo value que define o valor 
a ser enviado, seguido por um valor que será mostrado para o usuário.
Figura 7. Select.
Tag <textarea>
Tags do tipo <textarea> (Figura 8) são parecidas com <input> do tipo 
text, servindo para receber valores em texto. A principal diferença é que 
<textarea> permite que o valor da caixa seja alterado. 
<form action="#" method="post" name="formulario">
 <h1>Textarea</h1>
 <p>
 <textarea cols="50" rows="10"></textarea>
 </p>
</form>
Trabalhando com links e formulários14
O tamanho de áreas de texto pode ser alterado por meio dos atributos cols 
(número de colunas) e rows (número de linhas).
Figura 8. Textarea.
<FORM> – HTML: Linguagem de Marcação de Hipertexto. MDN Web Docs, Mountain 
View, 2019. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/HTML/
Element/form. Acesso em: 28 set. 2019.
MARIANO, D.; MELO-MINARDI, R. Introdução à programação web para bioinformática: 
HTML, CSS, PHP & JavaScript. North Charleston: CreateSpace Independent Publishing 
Platform, 2017. 410 p.
SILVA, M. S. Fundamentos de HTML5 e CSS3. SãoPaulo: Novatec, 2015. 304 p.
15Trabalhando com links e formulários
Dica do professor
Os formulários HTML permitem que páginas HTML possam interagir com sistemas enviando 
diversos tipos de informações, como textos e até mesmo arquivos de fotos e outros documentos. 
Na Dica do Professor, você aprenderá a criar um formulário HTML.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/876f1c19a2e405ccaa62c5b5a4f20845
Exercícios
1) Deseja-se criar uma página de contatos em um site empresarial. Você quer que seu 
formulário envie a data atual em um dos campos. Entretanto, esse campo não pode ser 
editável, caso contrário o usuário conseguiria fraudar a data de envio.
Qual tipo de campo input poderia ser utilizado para isso?
A) Text.
B) Password.
C) Hidden.
D) File.
E) Option.
2) Ao criar um site para uma empresa de jornalismo, você utilizou links absolutos.
Qual é o problema dessa abordagem?
A) Não há qualquer problema, pois links absolutos podem ser editados.
B) Links absolutos levam em consideração que o endereço do site seja constante. Se ele for 
alterado, todos os links pararão de funcionar.
C) Links absolutos levam em consideração a posição local dos arquivos.
D) Links absolutos requerem conexão constante com a Internet, o que impede o site de funcionar 
offline.
E) Links absolutos não funcionam em sites.
3) Ao criar um site, o programador opta por utilizar campos do tipo text para receber senhas.
Qual é o problema dessa abordagem?
A) Campos text são invisíveis.
B) Campos text permitem que as senhas digitadas sejam visualizadas.
C) Campos text não fazem a formatação de caracteres.
D) Campos text só permitem a digitação de textos, impedindo senhas numéricas.
E) Campos text não permitem a inserção de caracteres especiais.
4) Ao analisar o formulário criado por um programador iniciante, você notou que o formulário 
não estava sendo enviado.
Observe o código a seguir:
<form action=”processa.php” method=”post”>
<input type=”text” name=”nome”>
<input type=”text” name=”contato”>
<textarea></textarea>
<input type=”button” value=”Enviar”>
</form>
 
O código apresenta vários problemas. Qual solução a seguir resolveria o problema do envio?
A) Substituir o método para get.
B) Substituir o tipo do botão enviar para submit.
C) Adicionar um campo name à tag <textarea>.
D) Adicionar um campo name ao formulário.
E) Adicionar um id a cada um dos elementos.
Você está desenvolvendo um site com soluções para questões do ENEM (Exame Nacional do 
Ensino Médio). Para cada questão, você adicionou em seu site um texto explicando a solução 
e um vídeo. Entretanto, ao clicar no link para o vídeo, a página é redirecionada, fazendo com 
que o usuário não consiga ler o texto ao mesmo tempo.
5) 
Qual atributo e valor poderiam ser adicionados ao link do vídeo para solucionar esse 
problema?
1. 
A) target=”new”.
B) target=”_blank”.
C) target=”value”.
D) atributo=”_blank”.
E) page=”new”.
Na prática
Quando acessamos páginas da web, é extremamente comum encontrarmos links que, ao serem 
clicados, nos levam a outras páginas, a um documento ou a outro local dentro da mesma página, 
por exemplo. Mas como isso é feito? É o que você verá no vídeo abaixo.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
 
https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/14f2c61a86ebe18ba57f9f4e08a71e57
Saiba +
Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do professor:
Links
Neste vídeo, você aprenderá os fundamentos da linguagem HTML usados para interligar páginas 
distintas.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
O que é HTML? Linguagem base dos websites
Neste site, você aprenderá diversos conceitos básicos relacionados à linguagem HTML, como, por 
exemplo, tags de formatação de textos e criação de links.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
Meu primeiro formulário HTML
Neste artigo introdutório, você aprenderá os requisitos básicos para construir formulários HTML.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://www.youtube.com/embed/gegpChmS_lA
https://tableless.github.io/iniciantes/manual/html/?v=632226093
https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML?v=1472058596