HTML
Introdução ao HTML
Bem-vindo ao mundo do código! Por quê? HTML é o esqueleto de todas as páginas da web. Geralmente é o primeiro idioma aprendido por desenvolvedores, profissionais de marketing e designers e é essencial para o trabalho de desenvolvimento front-end. Se esta é a primeira vez que você está vendo um código, fique animado porque você pode criar coisas incríveis.
Então, o que exatamente é HTML? O HTML fornece estrutura para o conteúdo exibido em um site, como imagens, texto ou vídeos. Clique com o botão direito do mouse em qualquer página da Internet, escolha "Inspecionar" e você verá HTML em um painel da tela.
HTML significa HyperText Markup Language:
Uma linguagem de marcação é uma linguagem de computador que define a estrutura e a apresentação do texto bruto.
Em HTML, o computador pode interpretar o texto bruto envolvido em elementos HTML.
HyperText é o texto exibido em um computador ou dispositivo que fornece acesso a outro texto por meio de links, também conhecidos como hiperlinks .
Propósito da Linguagem de marcação HTML.
Ser compreendida independente do dispositivo que vai ser acessado, o HTML é o mesmo para todos.
Fácil compreensão
Interoperabilidade - ( não há uma especificidade da linguagem de uma empresa para outra)
Aprender HTML é o primeiro passo na criação de sites, mas mesmo um pouco de conhecimento pode ajudá-lo a inserir trechos de código em boletins, blogs ou modelos de sites. À medida que você continua aprendendo, é possível colocar em camadas HTML com CSS e JavaScript para criar sites dinâmicos e atraentes. Mas, por enquanto, vamos nos concentrar em como adicionar e modificar o conteúdo básico de uma página, como texto, imagens e vídeos. Não se preocupe se os sites parecerem feios - estamos apenas começando.
Anatomia do HTML
![](https://programastart2020.gitbook.io/~gitbook/image?url=https%3A%2F%2Fgblobscdn.gitbook.com%2Fassets%252F-M7-2eRyD9xvpTaq4bz_%252F-M7rYDNp_MyRgjGoq0hu%252F-M7rYf3D1Pr8hlSSfZD9%252FCaptura%2520de%2520Tela%25202020-05-21%2520a%25CC%2580s%252011.06.14.png%3Falt%3Dmedia%26token%3Da7022673-e688-478f-a116-63430326ac78&width=768&dpr=4&quality=100&sign=9c041d85&sv=1)
HTML é composto de elementos . Esses elementos estruturam a página da web e definem seu conteúdo. Vamos dar uma olhada em como eles são escritos.
A imagem acima apresenta um elemento de parágrafo HTML. Como podemos ver, o elemento de parágrafo é composto de:
Uma tag de abertura (
<p>
)O conteúdo (texto "Hello World!")
Uma tag de fechamento (
</p>
)
Uma tag e o conteúdo entre elas são chamados de elementos HTML. Existem muitas tags que podemos usar para organizar e exibir texto e outros tipos de conteúdo, como imagens.
Vamos revisar rapidamente cada parte do elemento representado:
Elemento HTML (ou simplesmente elemento) - uma unidade de conteúdo em um documento HTML formado por tags HTML e o texto ou mídia que ele contém.
Tag HTML - o nome do elemento, cercado por um colchete de ângulo de abertura (
<
) e fechamento (>
).Tag de abertura - a primeira tag HTML usada para iniciar um elemento HTML. O tipo de tag é cercado por aberturas de abertura e fechamento de ângulo.
Conteúdo - as informações (texto ou outros elementos) contidas entre as tags de abertura e fechamento de um elemento HTML.
Tag de fechamento - a segunda tag HTML usada para finalizar um elemento HTML. As tags de fechamento têm uma barra (
/
) dentro delas, logo após o colchete angular esquerdo.
Body Element
Um dos principais elementos HTML que usamos para criar uma página da web é o elemento body . Somente o conteúdo dentro das tags do corpo de abertura e fechamento pode ser exibido na tela. Veja como são as tags corporais de abertura e fechamento. Depois que o arquivo tem um corpo, muitos tipos diferentes de conteúdo - incluindo texto, imagens e botões - podem ser adicionados ao corpo.
Estrutura HTML
O HTML é organizado como uma coleção de relacionamentos de árvore genealógica. Como você viu no último exercício, colocamos <p>
tags nas <body>
tags. Quando um elemento está contido dentro de outro elemento, ele é considerado filho desse elemento. Diz-se que o elemento filho está aninhado dentro do elemento pai .
No exemplo acima, o <p>
elemento está aninhado dentro do <body>
elemento. O <p>
elemento é considerado um filho do <body>
elemento e o <body>
elemento é considerado o pai. Você também pode ver que adicionamos dois espaços de recuo (usando a barra de espaço) para melhor legibilidade.
Como pode haver vários níveis de aninhamento, essa analogia pode ser estendida aos netos, bisnetos e outros. O relacionamento entre os elementos e seus elementos ancestrais e descendentes é conhecido como hierarquia .
Vamos considerar um exemplo mais complicado que usa algumas novas tags:
Neste exemplo, o <body>
elemento é o pai do <div>
elemento. Os elementos <h1>
e <p>
são filhos do <div>
elemento. Como os elementos <h1>
e <p>
estão no mesmo nível, eles são considerados irmãos e são netos do <body>
elemento.
A compreensão da hierarquia HTML é importante porque os elementos filho podem herdar comportamento e estilo do elemento pai. Você aprenderá mais sobre a hierarquia de páginas da web quando começar a explorar o CSS.
Adicione um paragrafo como filho do elemento div e neto do elemento body.
Headings
Os títulos em HTML são semelhantes aos de outros tipos de mídia. Por exemplo, nos jornais, títulos grandes são normalmente usados para capturar a atenção do leitor. Outras vezes, os títulos são usados para descrever o conteúdo, como o título de um filme ou um artigo educacional.
O HTML segue um padrão semelhante. No HTML, existem seis títulos diferentes , ou elementos de título . Os títulos podem ser usados para uma variedade de finalidades, como seções de títulos, artigos ou outras formas de conteúdo.
A seguir, é apresentada a lista de elementos de cabeçalho disponíveis em HTML. Eles são pedidos do maior para o menor em tamanho.
<h1>
- usado para títulos principais. Todos os outros títulos menores são utilizados para subtítulos.<h2><h3><h4><h5><h6>
O código de exemplo a seguir usa um título destinado a capturar a atenção do leitor. Ele usa o maior cabeçalho disponível, o principal elemento de cabeçalho:
Divs
Um dos elementos mais populares em HTML é o <div>
elemento <div>
é a abreviação de "divisão" ou um contêiner que divide a página em seções. Essas seções são muito úteis para agrupar elementos em seu HTML.
<div>
podem conter qualquer texto ou outros elementos HTML, como links, imagens ou vídeos. Lembre-se de sempre adicionar dois espaços de recuo ao aninhar elementos dentro de <div>
para melhor legibilidade.
Atributos
Se queremos expandir tag de um elemento, podemos fazê-lo usando um atributo . Os atributos são conteúdo adicionado à tag de abertura de um elemento e podem ser usados de várias maneiras diferentes, desde o fornecimento de informações até a alteração do estilo. Os atributos são compostos das duas partes a seguir:
O nome do atributo
O valor do atributo
Vamos conhecer os atributos mais usados no dia a dia de um desenvolvedor, mas tem vários atributos que não vamos listar aqui, mas vamos deixar link para consulta.
O atributo id
. Podemos usar para especificar apenas um elemento html .
Quando adicionamos um id
a uma <div>
, colocamos na tag de abertura:
Com o atributo class
permite atribuir formatação a VÁRIOS elementos de uma vez só.
O atributo href
, especifica a URL de um link no elemento <a>
O elemento <a>
elemento âncora é usado para criar hiperlinks em um documento HTML. Os hiperlinks podem apontar para outras páginas da web, arquivos no mesmo servidor, um local na mesma página ou qualquer outro URL por meio do atributo de referência do hiperlink href
.
Link para parte diferente da página #.
O elemento âncora <a>
pode criar hiperlinks para diferentes partes do mesmo documento HTML usando o href
atributo para apontar para o local desejado #
seguido pelo id
elemento do qual o link será vinculado.
Target
O atributotarget
em um <a>
elemento âncora especifica onde um hiperlink deve ser aberto. Um target
valor de "_blank"
dirá ao navegador para abrir o hiperlink em uma nova guia
O atributo src
URL de um conteúdo, pode ser uma imagem, video. atributo deve ser definido como a fonte da imagem ou o local da imagem, Neste caso, o valor src
deve ser o Uniform Resource Locator (URL) da imagem. Um URL é o endereço da Web ou o endereço local em que um arquivo está armazenado.
O atributo alt
especifica um texto alternativo caso uma imagem não possa ser exibida. significa texto alternativo, traz significado às imagens em nossos sites. O alt
atributo pode ser adicionado à tag da imagem exatamente como o src
atributo. O valor de alt
deve ser uma descrição da imagem.
O alt
atributo também serve aos seguintes propósitos:
Se uma imagem não carregar em uma página da web, o usuário pode passar o mouse sobre a área originalmente destinada à imagem e ler uma breve descrição da imagem.
Usuários com deficiência visual geralmente navegam na Web com o auxílio de um software de leitura de tela. Quando você inclui o
alt
atributo, o software de leitura de tela pode ler a descrição da imagem em voz alta para o usuário com deficiência visual.O
alt
atributo também desempenha um papel na Otimização de mecanismos de pesquisa (SEO), porque os mecanismos de pesquisa não podem "ver" as imagens nos sites enquanto pesquisam na Internet. Teralt
atributos descritivos pode melhorar a classificação do seu site.
Listas não ordenadas
Além de organizar o texto em forma de parágrafo, você também pode exibir o conteúdo em uma lista de fácil leitura.
Em HTML, você pode usar uma tag de lista não ordenada ( <ul>
) para criar uma lista de itens em nenhuma ordem específica. Uma lista não ordenada descreve itens de lista individuais com um marcador.
O <ul>
elemento não deve conter texto bruto e não formatará automaticamente o texto bruto em uma lista não ordenada de itens. Itens de lista individuais devem ser adicionados à lista não ordenada usando a <li>
tag A <li>
tag do item ou da lista é usada para descrever um item em uma lista.
No exemplo acima, a lista foi criada usando a <ul>
tag e todos os itens de lista individuais foram adicionados usando a tag<li>
Home
Sobre mim
Contato
Listas ordenadas
As listas ordenadas ( <ol>
) são como listas não ordenadas, exceto que cada item da lista é numerado. Eles são úteis quando você precisa listar etapas diferentes em um processo ou classificar itens do primeiro ao último.
Você pode criar a lista ordenada com a <ol>
tag e adicionar itens de lista individuais à lista usando a tag <li>
A saída terá a seguinte aparência:
Pré-aqueça o forno a 350 graus.Misture a farinha de trigo integral, o bicarbonato de sódio e o sal.Bata a manteiga, o açúcar em uma tigela separada.Adicione os ovos e o extrato de baunilha à tigela.
Imagens
Todos os elementos que você aprendeu até agora (títulos, parágrafos, listas e extensões) compartilham uma coisa em comum: eles são compostos inteiramente de texto! E se você quiser adicionar conteúdo à sua página da Web que não seja composto de texto, como imagens?
A <img>
tag permite adicionar uma imagem a uma página da web. A maioria dos elementos requer tags de abertura e fechamento, mas a <img>
tag é de fechamento automático . Observe que o final da <img>
tag possui uma barra /
. As tags de fechamento automático podem incluir ou omitir a barra final - ambas serão renderizadas corretamente.
Vídeos
Além de imagens, o HTML também suporta a exibição de vídeos. Como a tag <img>
, a tag <video>
requer um atributo src
com um link para a fonte de vídeo. Diferentemente da <img>
tag, no entanto, o <video>
elemento requer uma tag de abertura e de fechamento.
Neste exemplo, a fonte de vídeo ( src
) é myVideo.mp4
A fonte pode ser um arquivo de vídeo hospedado ao lado da sua página da web ou um URL que aponta para um arquivo de vídeo hospedado em outra página da web. Após o src
atributo, os atributos width
e height
são usados para definir o tamanho do vídeo exibido no navegador. O controls
atributo instrui o navegador a incluir controles básicos de vídeo: pausar, reproduzir e pular.
O texto, “Vídeo não suportado”, entre as tags de abertura e fechamento do vídeo, será exibido apenas se o navegador não conseguir carregar o vídeo.
Preparando para HTML
Agora que aprendemos sobre alguns dos elementos HTML mais comuns, é hora de aprender a configurar um arquivo HTML.
Os arquivos HTML requerem certos elementos para configurar o documento corretamente. Podemos informar aos navegadores da web que estamos usando HTML iniciando nosso documento com uma declaração de tipo de documento .
A declaração é assim:
Esta declaração é uma instrução e deve ser a primeira linha de código no seu documento HTML. Ele informa ao navegador que tipo de documento esperar, juntamente com qual versão do HTML está sendo usada no documento. Por enquanto, o navegador assumirá corretamente que o html
<!DOCTYPE html>
está se referindo ao HTML5, pois é o padrão atual. O código HTML é sempre salvo em um arquivo com uma extensão .html .
A tag <html>
A declaração <!DOCTYPE html>
fornece ao navegador duas informações (o tipo de documento e a versão HTML esperada), mas na verdade não adiciona nenhuma estrutura ou conteúdo HTML.
Para criar estrutura e conteúdo HTML, precisamos adicionar <html>
tag de abertura e fechamento após declarar <!DOCTYPE html>
:
Qualquer coisa entre as tag de abertura <html>
e fechamento </html>
será interpretada como código HTML. Sem essas tag, é possível que os navegadores interpretem incorretamente seu código HTML.
A Tag Head
Até agora, você fez duas coisas para configurar o arquivo corretamente.
Declarou ao navegador que seu código é HTML com
<!DOCTYPE html>
Adicionado o elemento HTML (
<html>
) que conterá o restante do seu código.A tag
body
onde o conteúdo do nosso site ficará visível no navegador.
Adicionamos esses elementos a uma página que vamos criar na aula de hoje, mas precisamos também fornecer ao navegador algumas informações sobre a própria página. Podemos fazer isso adicionando a tag <head>
A <head>
elemento faz parte do HTML, vai acima do elemento <body>
O <head>
contém os metadados para uma página da web. Metadados são informações sobre a página que não são exibidas diretamente na página da web. Diferentemente das informações dentro da tag <body>
os metadados no cabeçalho são informações sobre a própria página. Vamos ver um exemplo.
<meta charset="utf-8">
especifica a codificação de caracteres do documento — o conjunto de caracteres que o documento está autorizado a usar. utf-8
é um conjunto de caracteres universal que inclui praticamente qualquer caractere de qualquer linguagem humana.
Meta Tag para redes sociais.
Quando você compartilha algum site nas redes sociais, você percebeu que quando coloca o link no post, visualiza uma imagem acompanhada de informações referente a página, imagens e título.
Open Graph Markup é um protocolo que permite administrar e monitorar os dados que são construídos nas visualizações estruturação das páginas web.
permite que qualquer página da Web se torne um objeto rico em um gráfico social, saiba que não se trata apenas de embelezar seu post, mas, se pesquisarem sobre marketing digital, isso aumenta o tráfego da sua página, mas... sou desenvolvedor, preciso entender de marketing? não, mas acredito que quando você for desenvolver o seu site, você, vai querer que muitas pessoas visitem, conheça mais sobre você e possa surgir alguma oportunidade de trabalho, certo? então usando o Open Graph Markup no seu código, vai te ajudar a atrair mais visitantes.
Como Implementar Open Graph no HTML
você colocará <meta>
tags adicionais na <head>
sua página da web. As quatro propriedades necessárias para cada página são:
Resultado do open graph, num post do facebook.Enter a caption for this image (optional)
Caminho de arquivo
Caminhos de URL em HTML pode ser caminhos absolutos, como um URL completo, por exemplo: https://developer.mozilla.org/en-US/docs/Learn
ou um caminho de arquivo relativo que links para um arquivo local na mesma pasta ou no mesmo servidor, por exemplo: ./style.css
. Os caminhos de arquivos relativos começam com ./
seguidos por um caminho para o arquivo local. ./
diz ao navegador para procurar o caminho do arquivo na pasta atual.
Agora você conhece todos os elementos e configurações básicos necessários para estruturar uma página HTML e adicionar diferentes tipos de conteúdo.
Embora algumas tags tenham uma finalidade muito específica, como tags de imagem e vídeo, a maioria delas é usada para descrever o conteúdo que elas envolvem, o que nos ajuda a modificar e estilizar nosso conteúdo posteriormente. Aparentemente, há um número infinito de tags para usar (muito mais do que ensinamos). Saber quando usar cada um é baseado em como você deseja descrever o conteúdo do seu HTML. Tags descritivas e bem escolhidas são uma chave para o desenvolvimento da web de alta qualidade. Uma lista completa de tags HTML disponíveis pode ser encontrada na documentação do Mozilla .
Versões do HTML O html na sua trajetória sofreu algumas mudanças com o objetivo de enriquecer a linguagem. a versão mais utilizada hoje no mercado é o HTML5 e, o principal mantenedor é a WHATWG é *( uma comunidade que padroniza e faz a documentação , foi fundada por desenvolvedores da Opera, Apple e Mozila, fazendo uma versão mais flexível do HTML que é o HTML5, )*HTML+ HTML 2.0 HTML 3.0 XHTML HTML 5.0
O HTML5 é uma versão mais enxuta e com mais recursos, para maiores informações indicamos sempre acessar o site do WHATWG.
Browser Core
Hoje em dia podemos acessar um site de diversos ambientes seja em diferentes tipos de dispositivos e de sistema operacional, a web ela tem que ser única, portanto para que possamos ter acesso a um site de uma forma padronizada, o principal componente que precisamos para renderizar o HTML é o navegador.
Principais Navegadores
Google Chrome
Mozilla Firefox
Edge
Opera
Safari
Motores de renderização dos Navegadores:
A função do motor de renderização é renderizar, ou seja exibir os conteúdos solicitados na tela do navegador. Cada navegador utiliza um motor de renderização diferente as a especificações de cada linguagem de programação, são muito detalhadas e cada motor oferece uma única interpretação dessa especificação. Ex: propriedades css como: espaçamento, margens, tamanho podem apresentar um pouco diferente em cada navegador.
WebKit - Safari/Chrome
Gecko - Firefox
Trident - Edge
Presto - Opera
Quando vamos implementar o estilo de uma página no CSS, usamos propriedades prefixadas pelos mecanismos de renderização relevantes, ( -webkit
para o Chrome e o Safari, -moz
para o Firefox, -o
para o Opera, -ms
para o Internet Explorer).
Obs: por esse motivo, quando estamos desenvolvendo um site em HTML, criamos um arquivo onde padronizamos todos essa propriedades CSS. ( ex: reset.css)
HTML5
HTML5 é a mais recente evolução do padrão que define o HTML. A semântica das novas marcações do HTML5
Ao criar páginas da web, usamos uma combinação de HTML não semântico e HTML semântico . A palavra semântica significa "relacionada ao significado", para que os elementos semânticos forneçam informações sobre o conteúdo entre as tags de abertura e fechamento.
Um elemento semântico descreve claramente seu significado para o navegador e o desenvolvedor.
Exemplos de elementos não-semânticos : <div>
e <span>
- Não conta nada sobre o seu conteúdo.
Exemplos de semânticas elementos: <form>
, <table>
e <article>
- Claramente define seu conteúdo.
Nas páginas web, temos que marcar qual tipo de conteúdo será colocado, como um cabeçalho, rodapé ou menu de navegação.
Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada uma dessas divisões. Dessa forma, os desenvolvedores acabavam usando a tag <div> para todas as situações, e criando seus próprios padrões de nomenclatura através dos atributos id ou class.
Para entender melhor isso, você pode comparar o HTML não-semântico com o de entrar em uma loja sem sinais nos corredores. Como os corredores não são rotulados, você não sabe quais são os produtos nesses corredores. No entanto, as lojas que possuem sinais para cada corredor tornam muito mais fácil encontrar os itens necessários, assim como o HTML Semântico.
No HTML5 foram criadas diversas tags semânticas para indicar aos user-agents quais conteúdos estão sendo inseridos em cada uma das divisão da página, organizando e padronizando o desenvolvimento.
![](https://programastart2020.gitbook.io/~gitbook/image?url=https%3A%2F%2Fgblobscdn.gitbook.com%2Fassets%252F-M7-2eRyD9xvpTaq4bz_%252F-M7xmiGiZh15Wi00EJp-%252F-M7xmxzzQVu4zYOc_u6F%252FCaptura%2520de%2520Tela%25202020-04-22%2520a%25CC%2580s%252009.01.49.png%3Falt%3Dmedia%26token%3D08a5f4c5-8586-4c35-af05-b22c2f47a701&width=768&dpr=4&quality=100&sign=a2ec7af6&sv=1)
Vamos entender a diferença entre essas TAGs.
<header> O novo elemento do HTML5 é usado para definir o cabeçalho de uma página ou seção, e pode conter logo, títulos, menu de navegação, campo de busca, etc.
<section> Como o próprio nome diz, ele pode conter qualquer tipo de conteúdo. Em um sentido mais amplo do termo, este elemento é uma versão mais semântica de uma div (que significa “divisão”). Outro uso comum deste elemento está relacionado a estrutura do conteúdo. O objetivo desse elemento é marcar uma seção da página. Seção pode ser um grupo de conteúdo de um assunto específico.
Ela foi desenvolvida para representar seções de um documento, essa é a idéia principal, ex: capítulos, títulos ou qualquer outra área do documento com o mesmo tema.
<article> Ao contrário de seção, artigo é um componente mais específico. Sua finalidade é envolver os principais conteúdos do seu documento em seções lógicas. Entradas de blog, artigos, o conteúdo da página podem ser incluídos dentro deste elemento. Combinado com o elemento SECTION, que completa a estrutura geral de um documento HTML5.
<aside> É usado para marcar informações adicionais que podem aprimorar outro elemento, mas não são necessárias para entender o conteúdo principal. Este elemento pode ser usado junto com outros elementos, como <article>
ou <section>
. Alguns usos comuns do <aside>
elemento são para:
Bibliografias
Notas finais
Comentários
Enquetes
Barras laterais editoriais
Informação adicional
Podemos comparar o uso dela com a página de um jornal, teríamos uma página, com diversas seções.
É importante observar que um elemento<section>
também pode ser colocado dentro do elemento <article>
dependendo do contexto.
Produtividade no Desenvolvimento
O Emmet é um kit de ferramentas para desenvolvedores da Web que pode melhorar bastante o seu fluxo de trabalho HTML e CSS:
Guia do Emmet, agora é aprender para os trechos de código para agilizar o desenvolvimento do seus sites, vamos praticar.
Introdução às Tabelas
Existem muitos sites na Internet que exibem informações como preços de ações, resultados esportivos, dados de faturas e muito mais. Esses dados são naturalmente de natureza tabular, o que significa que uma tabela geralmente é a melhor maneira de apresentar os dados.
Nesta parte do curso, aprenderemos como usar o <table>
elemento HTML para apresentar informações em uma tabela bidimensional para os usuários. Vamos ver um exemplo no código abaixo:
Introdução aos formulários HTML
Formulários fazem parte da vida cotidiana. Quando usamos um formulário, escrevemos informações e as entregamos a alguém para processar. Pense nas vezes em que você precisou preencher informações para vários aplicativos, como um emprego, uma conta bancária ou entregou um cartão de sugestão preenchido.
O elemento <form>
é responsável por coletar informações para enviar para outro lugar. Toda vez que navegamos na Internet, entramos em contato com muitas formas e podemos nem perceber. Há uma boa chance de que, se você estiver digitando em um campo de texto ou fornecendo uma entrada, o campo em que você está digitando faz parte de um <form>
Nesta aula , examinaremos a estrutura e a sintaxe de um <form>
e dos elementos que o preenchem.
Como um formulário funciona
Podemos pensar na internet como uma rede de computadores que enviam e recebem informações. Os computadores precisam de uma solicitação HTTP para saber como se comunicar. A solicitação HTTP instrui o computador receptor como lidar com as informações recebidas. Mais informações podem ser encontradas nesse artigo sobre solicitações HTTP .
O elemento <form>
é uma tag para coletar informações, mas precisamos enviar essas informações para outro lugar para processamento. Precisamos fornecer ao elemento <form>
a localização de onde as informações vão e qual solicitação HTTP a ser feita. Dê uma olhada na exemplo abaixo:
No exemplo acima, criamos o esqueleto para um <form>
que enviará informações para example.html como uma solicitação POST:
O atributo
action
determina para onde as informações são enviadas.O atributo
method
Define qual método HTTP usar quando enviar um formulário. Pode ser GET(padrão) ou POST.
Formulário - Principais elementos/tipos
O objetivo do
<form>
é permitir que os usuários insiram e enviem informações.O atributo
action
determina para onde vão as informações do formulário.O atributo
method
determina como as informações são enviadas e processadas.Para adicionar campos aos usuários para inserir informações, usamos o
<input>
elemento e configuramos otype
atributo para um campo de nossa escolha:A configuração
type
para"text"
cria um campo de linha única para entrada de texto.Definir
type
para"password"
cria um campo de linha única que censura a entrada de texto.A configuração
type
para"number"
cria um campo de linha única para entrada de número.Definir
type
para"range"
cria um controle deslizante para selecionar em um intervalo de números.Definir
type
para"checkbox"
cria uma única caixa de seleção que pode ser emparelhada com outras caixas de seleção.A configuração
type
para"radio"
cria um botão de opção que pode ser emparelhado com outros botões de opção.Definir
type
para"list"
emparelhará o<input>
com um<datalist>
elemento se osid
dois forem iguais.A configuração
type
para"submit"
cria um botão de envio.
Um
<select>
elemento é preenchido com<option>
elementos e renderiza uma seleção da lista suspensa.Um
<datalist>
elemento é preenchido com<option>
elementos e trabalha com um<input>
para pesquisar opções.Um
<textarea>
elemento é um campo de entrada de texto que possui uma área personalizável.Quando a
<form>
é enviado, osname
campos que aceitam entrada evalue
os campos são enviados comoname=value
pares.
Exemplo de um form.
![](https://programastart2020.gitbook.io/~gitbook/image?url=https%3A%2F%2Fgblobscdn.gitbook.com%2Fassets%252F-M7-2eRyD9xvpTaq4bz_%252F-M83dINaRnAx-zTQkVMQ%252F-M83eW3h8zXDuJ9vsShK%252FCaptura%2520de%2520Tela%25202020-05-23%2520a%25CC%2580s%252023.59.22.png%3Falt%3Dmedia%26token%3D860171fd-c24c-495a-8307-103d7bfef786&width=768&dpr=4&quality=100&sign=f7b8128e&sv=1)
Enter a caption for this image (optional)
O primeiro valor para o atributo type
que vamos falar é o "text"
. Quando criamos o elemento <input type="text">
, o navegador renderiza um campo de texto que os usuários podem digitar. Também é importante incluir o atributo name
no <input>
sem o name
, as informações no <input>
não serão enviadas quando enviar o <form>
Enviando o formulário
Lembre-se de que o objetivo de um formulário é coletar informações que serão enviadas. Essa é a função do botão enviar - os usuários clicam nele quando terminam de preencher as informações <form>
e estão prontos para enviá-las. Agora que falamos sobre como criar vários elementos de entrada, vamos agora sobre como criar um botão de envio!
Observe o value
atribuído ao <input>
aparece como texto no botão enviar. Se não houver um value
atributo, o texto padrão será exibido Submit
no botão.
O uso do <form>
elemento em conjunto com os outros elementos listados acima nos permite criar sites que levam em consideração os desejos e necessidades de nossos usuários. Aproveite a oportunidade para pegar o que aprendeu e aplicá-lo!
Validando um Formulário
A Validação é o conceito de verificar os dados fornecidos pelo usuário em relação aos dados necessários. O que vamos no HTML é a validação do lado do cliente para verificar os dados no navegador (o cliente). Esta validação ocorre antes dos dados serem enviados para o servidor.
Permite dar feedback rapidamente aos usuários para campos específicos, em vez de solicitá-los a preencher um formulário novamente se os dados inseridos no formulário foram rejeitados.
required - não permite deixar um campo em branco
valores mínimos e máximos aceitáveis em um campo numérico.
O
min
atributo para"1"
O
max
atributo para"10"
Para definir um valor mínimo aceitável, usamos o min
atributo e atribuímos um valor. Por outro lado, para definir um valor máximo aceitável, atribuímos ao max
atributo um valor. Vamos ver isso no código:
Para definir um número mínimo de caracteres para um campo de texto, adicionamos o minlength
atributo e um valor para definir um valor mínimo. Da mesma forma, para definir o número máximo de caracteres para um campo de texto, usamos o maxlength
atributo e definimos um valor máximo
minlength="5" maxlength="250"
Combinando um padrão
Além de verificar o tamanho de um texto, também podemos adicionar uma validação para verificar como o texto foi fornecido. Nos casos em que queremos que a entrada do usuário siga diretrizes específicas, usamos o pattern
atributo e atribuímos a ele uma expressão regular ou regex. Expressões regulares são uma sequência de caracteres que compõem um padrão de pesquisa. Se a entrada corresponder ao regex, o formulário poderá ser enviado.
Digamos que desejássemos verificar um número de cartão de crédito válido (um número de 14 a 16 dígitos). Poderíamos usar o regex: [0-9]{14,16}
que verifica se o usuário forneceu apenas números e se digitou pelo menos 14 dígitos e no máximo 16 dígitos.
Para adicionar isso a um formulário
Com o pattern
local, os usuários não podem enviar o <form>
número com que não segue a regex. Quando tentarem, verão uma mensagem de validação da seguinte forma:
As validações do lado do cliente acontecem no navegador antes que as informações sejam enviadas para um servidor.
A adição do
required
atributo a um elemento relacionado à entrada validará que o campo de entrada possui informações.A atribuição de um valor ao
min
atributo de um elemento de entrada numérico validará um valor mínimo aceitável.A atribuição de um valor ao
max
atributo de um elemento de entrada numérico validará um valor máximo aceitável.A atribuição de um valor ao
minlength
atributo de um elemento de entrada de texto validará um número mínimo aceitável de caracteres.A atribuição de um valor ao
maxlength
atributo de um elemento de entrada de texto validará um número máximo aceitável de caracteres.Designar uma regex para
pattern
corresponder a entrada à regex fornecida.Se as validações em um
<form>
não passarem, o usuário receberá uma mensagem explicando o porquê e o<form>
não poderá ser enviado.
Essas verificações rápidas ajudam a garantir que os dados de entrada estejam corretos e seguros para nossos servidores. Ele também ajuda a fornecer aos usuários um feedback imediato sobre o que eles precisam corrigir, em vez de esperar que um servidor envie essas informações.
Referências
Last updated