Introdução ao HTML: Estrutura e Tags
Traduzido por
ScribdTranslationsIntrodução ao HTML: Estrutura e Tags
Traduzido por
ScribdTranslationsIntrodução ao HTML
O que é HTML?
HTML é uma linguagem de marcação para descrever documentos web (páginas da web).
HTML significa Linguagem de Marcação de Hipertexto
Uma linguagem de marcação é um conjunto de tags de marcação
Documentos HTML são descritos por tags HTML
Cada tag HTML descreve um conteúdo diferente do documento
Exemplo HTML
Um pequeno documento HTML:
<!DOCTYPEhtml>
<html>
<cabeça>
<title>Page Title</title>
</cabeça>
<corpo>
<h1>Meu Primeiro Título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
Experimente você mesmo »
Exemplo Explicado
A declaração DOCTYPE define o tipo de documento como HTML
O texto entre <html> e </html> descreve um documento HTML
O texto entre <head> e </head> fornece informações sobre o
documento
O texto entre <title> e </title> fornece um título para o documento
O texto entre <body> e </body> descreve a página visível
content
O texto entre <h1> e </h1> descreve um cabeçalho
O texto entre <p> e </p> descreve um parágrafo
Usando esta descrição, um navegador da web pode exibir um documento com um título
e um parágrafo.
TagsHTML
As tags HTML são palavras-chave (nomes de tags) cercadas por colchetes angulares:
<tagname>content</tagname>
As tags HTML normalmente vêm em pares, como <p> e </p>
A primeira tag em um par é a tag de início, a segunda tag é a tag de fim.
A tag de fechamento é escrita como a tag de abertura, mas com uma barra antes da tag
name
A tag de início é frequentemente chamada de tag de abertura. A tag de fim é frequentemente chamada de tag de fechamento.
Navegadores da Web
O propósito de um navegador web (Chrome, IE, Firefox, Safari) é ler HTML
documentos e exibi-los.
O navegador não exibe as tags HTML, mas as utiliza para determinar como
para exibir o documento:
Estrutura da Página HTML
Abaixo está uma visualização da estrutura de uma página HTML:
<html>
<cabeça>
<title>Page title</title>
</head>
<body>
<h1>Este é um cabeçalho</h1>
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
</corpo>
</html>
Apenas a área <body> (a área branca) é exibida pelo navegador.
A Declaração <!DOCTYPE>
A declaração <!DOCTYPE> ajuda o navegador a exibir uma página da web corretamente.
There are different document types on the web.
Para exibir um documento corretamente, o navegador deve conhecer tanto o tipo quanto a versão.
The doctype declaration is not case sensitive. All cases are acceptable:
<!DOCTYPEhtml>
<!DOCTYPEHTML>
<!doctype html>
<!DoctypeHtml>
Declarações Comuns
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"
[Link]
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN"
[Link]
Todos os tutoriais e exemplos no W3Schools usam HTML5.
Versões HTML
Desde os primeiros dias da web, houve muitas versões do HTML:
Versão Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Exemplos Básicos de HTML
Não se preocupe se esses exemplos usarem tags que você ainda não aprendeu.
Você aprenderá sobre eles nos próximos capítulos.
Documentos HTML
Todos os documentos HTML devem começar com uma declaração de tipo: <!DOCTYPE html>.
O documento HTML em si começa com <html> e termina com </html>.
A parte visível do documento HTML está entre <body> e </body>.
Exemplo
<!DOCTYPE html>
<html>
<body>
<h1>Meu Primeiro Título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
Tente você mesmo »
Cabeçalhos HTML
Os cabeçalhos HTML são definidos com as tags <h1> a <h6>:
Exemplo
<h1>Este é um cabeçalho</h1>
<h2>Este é um cabeçalho</h2>
<h3>Este é um cabeçalho</h3>
Tente você mesmo »
Parágrafos HTML
Os parágrafos HTML são definidos com a <p> tag:
Exemplo
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
Try it yourself »
Links HTML
Os links HTML são definidos com a tag <a>:
Exemplo
<ahref="[Link] é um link</a>
Experimente você mesmo »
O destino do link é especificado no atributo href.
Os atributos são usados para fornecer informações adicionais sobre os elementos HTML.
HTML Images
As imagens HTML são definidas com a tag <img>.
The source file (src), alternative text (alt), and size (widthandheight) are
fornecido como atributos:
Exemplo
<img src="[Link]" alt="[Link]" width="104" height="142">
>
Elementos HTML
Os elementos HTML são escritos com uma tag de início, com uma tag de fim, com
o conteúdo entre:
<tagname>content</tagname>
O HTMLelement é tudo desde a tag de início até a tag de fim:
<p>Meu primeiro parágrafo HTML.</p>
Iniciar tag Conteúdo do elemento Tag de fechamento
<h1> </h1> Meu Primeiro Título </h1>
<p> </p> Meu primeiro parágrafo. </p>
<br>
Alguns elementos HTML não têm uma tag de fechamento.
Elementos HTML Aninhados
Os elementos HTML podem ser aninhados (elementos podem conter elementos).
Todos os documentos HTML consistem em elementos HTML aninhados.
Este exemplo contém 4 elementos HTML:
Exemplo
<!DOCTYPEhtml>
<html>
<body>
<h1>Meu Primeiro Título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
Tente você mesmo »
Exemplo de HTML Explicado
O elemento <html> define todo o documento.
Tem uma tag inicial <html> e uma tag final </html>.
O conteúdo do elemento é outro elemento HTML (o elemento <body>).
<html>
<body>
<h1>Minha Primeira Cabeçalho</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
O elemento <body> define o corpo do documento.
Tem uma tag de início <body> e uma tag de fim </body>.
O conteúdo do elemento é dois outros elementos HTML (<h1> e <p>).
<corpo>
<h1>Minha Primeira Cabeçalho</h1>
<p>Meu primeiro parágrafo.</p>
</body>
O elemento <h1> define um cabeçalho.
Tem uma tag de início <h1> e uma tag de fim </h1>.
O conteúdo do elemento é: Meu Primeiro Título.
<h1>Meu Primeiro Cabeçalho</h1>
O elemento <p> define um parágrafo.
Tem uma tag inicial <p> e uma tag final </p>.
O conteúdo do elemento é: Meu primeiro parágrafo.
<p>Meu primeiro parágrafo.</p>
Não Esqueça a Tag de Fim
Alguns elementos HTML serão exibidos corretamente, mesmo que você esqueça a tag de fechamento:
Exemplo
<html>
<body>
<p>This is a paragraph
<p>Este é um parágrafo</p>
</body>
</html>
Experimente você mesmo »
O exemplo acima funciona em todos os navegadores, porque a tag de fechamento é considerada
opcional.
Nunca confie nisso. Isso pode produzir resultados inesperados e/ou erros se você
esqueça a tag de fechamento.
Elementos HTML vazios
Elementos HTML sem conteúdo são chamados de elementos vazios.
<br> é um elemento vazio sem uma tag de fechamento (a tag <br> define uma linha
pausa).
Elementos vazios podem ser "fechados" na tag de abertura assim: <br />.
O HTML5 não exige que elementos vazios sejam fechados. Mas se você quiser ser mais rigoroso
validação, ou você precisa tornar seu documento legível por parsers XML, você
deve fechar todos os elementos HTML.
Dica de HTML: Use Tags em Minúsculas
As tags HTML não diferenciam maiúsculas de minúsculas: <P> significa o mesmo que <p>.
O padrão HTML5 não exige tags em minúsculas, mas
W3C recomenda letras minúsculas no HTML4 e exige letras minúsculas para uma versão mais rigorosa
tipos de documento como XHTML.
Atributos HTML
« Anterior
Próximo Capítulo »
Atributos fornecem informações adicionais sobre elementos HTML.
Atributos HTML
Os elementos HTML podem ter atributos
Os atributos fornecem informações adicionais sobre um elemento
Os atributos são sempre especificados na tag de início
Os atributos vêm em pares nome/valor como: nome="valor"
O atributo lang
A linguagem do documento pode ser declarada na tag <html>.
A língua é declarada no atributo lang.
Declarar um idioma é importante para aplicações de acessibilidade (leitores de tela)
e motores de busca:
<!DOCTYPEhtml>
<htmllang="pt-BR">
<body>
<h1>Meu Primeiro Título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
As duas primeiras letras especificam o idioma (pt). Se houver um dialeto, use dois.
mais cartas (EUA).
O atributo título
Os parágrafos HTML são definidos com a tag <p>.
Neste exemplo, o elemento <p> tem um atributo title. O valor do
attribute is "About W3Schools":
Exemplo
<ptitle="About W3Schools">
W3Schools é um site para desenvolvedores web.
Ele fornece tutoriais e referências cobrindo
muitos aspectos da programação web,
incluindo HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
Tente você mesmo »
Quando você passar o mouse sobre o elemento, o título será exibido como uma dica de ferramenta.
O atributo href
Os links HTML são definidos com a <a> tag. O endereço do link é especificado em
thehrefattribute:
Exemplo
<ahref="[Link] é um link</a>
Experimente você mesmo »
Você aprenderá mais sobre links e a tag <a> mais tarde neste tutorial.
Atributos de Tamanho
As imagens HTML são definidas com a tag <img>.
The filename of the source (src), and the size of the image (widthandheight)
são todos fornecidos como atributos:
Exemplo
<imgsrc="[Link]"width="104"height="142">
Experimente você mesmo »
O tamanho da imagem é especificado em pixels: largura="104" significa 104 pixels na tela
largo.
Você aprenderá mais sobre imagens e a tag <img> mais tarde neste tutorial.
O atributo alt
O atributo alt especifica um texto alternativo a ser usado, quando um HTML
o elemento não pode ser exibido.
O valor do atributo pode ser lido por "leitores de tela". Dessa forma, alguém
"ouvindo" a página da web, ou seja, uma pessoa cega pode "ouvir" o elemento.
Exemplo
<img src="[Link]" alt="[Link]" width="104" height="142"
>
Experimente você mesmo »
Sugerimos: Use sempre letras minúsculas
Atributos
O padrão HTML5 não requer nomes de atributos em letras minúsculas.
O atributo title pode ser escrito em maiúsculas ou minúsculas
comoTítulo e/ouTÍTULO.
W3C recomenda letras minúsculas no HTML4 e exige letras minúsculas para uma stricte
tipos de documentos como XHTML.
A letra minúscula é a mais comum. A letra minúscula é mais fácil de digitar.
No W3Schools, sempre usamos nomes de atributos em letras minúsculas.
Sugerimos: Sempre Quote o Atributo
Valores
The HTML5 standard does not require quotes around attribute values.
O atributo href, demonstrado acima, pode ser escrito como:
Exemplo
<ahref=[Link]
Experimente você mesmo »
O W3C recomenda aspas no HTML4 e exige aspas para uma stricte
tipos de documento como XHTML.
Às vezes, é necessário usar aspas. Isso não será exibido corretamente,
porque contém um espaço:
Exemplo
<ptitle=About santosh>
Tente você mesmo »
Usar aspas é o mais comum. Omitir aspas pode gerar erros.
No W3Schools, sempre usamos aspas em torno dos valores dos atributos.
Aspas simples ou duplas?
As aspas duplas são as mais comuns em HTML, mas as aspas simples também podem ser usadas.
usado.
Em algumas situações, quando o valor do atributo em si contém aspas duplas, é
necessário usar aspas simples:
<ptitle='John "ShotGun" Nelson'>
Ou vice-versa:
<ptitle="John 'ShotGun' Nelson">
Resumo do Capítulo
Todos os elementos HTML podem ter atributos
O atributo HTMLtitle fornece informações adicionais de "dica".
O atributo HTML href fornece informações de endereço para links
Os atributos HTML de largura e altura fornecem informações de tamanho para
imagens
O atributo HTMLalt fornece texto para leitores de tela
Teste a si mesmo com Exercícios!
Exercício 1 »Exercício 2 »Exercício 3 »Exercício 4 »Exercício 5 »
HTML Attributes
Abaixo está uma lista alfabética de alguns atributos frequentemente utilizados em HTML:
Atributo Description
alt Especifica um texto alternativo para uma imagem
desativado Especifica que um elemento de entrada deve estar desativado
href Especifica a URL (endereço da web) para um link
id Especifica um id exclusivo para um elemento
src Especifica a URL (endereço da web) para uma imagem
estilo Especifica um estilo CSS em linha para um elemento
title Especifica informações extras sobre um elemento (exibidas como uma dica de ferramenta)
Cabeçalhos HTML
Os cabeçalhos são definidos com as tags <h1> a <h6>.
<h1> define o cabeçalho mais importante. <h6> define o menos importante
cabeçalho.
Exemplo
<h1>Este é um cabeçalho</h1>
<h2>This is a heading</h2>
<h3>Este é um cabeçalho</h3>
Experimente você mesmo »
Nota: Os navegadores adicionam automaticamente algum espaço em branco (uma margem) antes e
após cada título.
Os Títulos São Importantes
Use cabeçalhos HTML apenas para cabeçalhos. Não use cabeçalhos para fazer
textBIGoubold.
Os motores de busca usam seus cabeçalhos para indexar a estrutura e o conteúdo do seu
páginas da web.
Os usuários folheiam suas páginas pelos títulos. É importante usar títulos para mostrar
a estrutura do documento.
Os cabeçalhos h1 devem ser os cabeçalhos principais, seguidos pelos cabeçalhos h2, depois os menos.
importante h3, e assim por diante.
Regras Horizontais HTML
A tag <hr> cria uma linha horizontal em uma página HTML.
O elemento hr pode ser usado para separar conteúdo:
Exemplo
<p>Este é um parágrafo.</p>
<hr>
<p>Este é um parágrafo.</p>
<hr>
<p>Este é um parágrafo.</p>
Tente você mesmo »
O elemento <head> HTML
O elemento <head> do HTML não tem nada a ver com os títulos HTML.
O elemento <head> do HTML contém dados meta. Dados meta não são exibidos.
O elemento <head> HTML é colocado entre a tag <html> e o <body>
tag:
Exemplo
<!DOCTYPEhtml>
<html>
<cabeça>
<title>My First HTML</title>
<metacharset="UTF-8">
</cabeça>
<body>
.
.
.
Experimente você mesmo »
Meta dados significam dados sobre dados. Os meta dados HTML são dados sobre o documento HTML.
O Elemento <title> HTML
O elemento <title> do HTML é meta dados. Ele define o título do documento HTML.
O título não será exibido no documento, mas pode ser exibido no
aba do navegador.
O Elemento <meta> HTML
O elemento HTML <meta> também é meta dados.
Pode ser usado para definir o conjunto de caracteres e outras informações sobre o
Documento HTML.
Mais Elementos Meta
In the chapter about HTML styles you discover more meta elements:
O elemento <style> HTML é usado para definir folhas de estilo CSS internas.
O elemento HTML <link> é usado para definir folhas de estilo CSS externas.
Dica de HTML - Como Ver o Código-Fonte HTML
Você já viu uma página da Web e se perguntou "Ei! Como eles fizeram isso?"
Para descobrir, clique com o botão direito na página e selecione "Ver Código Fonte da Página" (no Chrome) ou
"Ver Fonte" (no IE), ou similar em outro navegador. Isso abrirá uma janela
contendo o código HTML da página.
Teste-se com Exercícios!
Exercício 1 » Exercise 2 » Exercício 3 » Exercício 4 »
Referência de Tag HTML
A referência de tags do W3Schools contém informações adicionais sobre essas tags e
seus atributos.
Você aprenderá mais sobre tags e atributos HTML nos próximos capítulos deste
tutorial.
Etiqueta Descrição
<html> Define um documento HTML
<corpo> Define o corpo do documento
<cabeça> Define o elemento head do documento
<h1> to <h6> Define os cabeçalhos HTML
<hr> Define uma linha horizontal
Parágrafos HTML
« Anterior
Próximo Capítulo »
Os documentos HTML são divididos em parágrafos.
HTML Paragraphs
O elemento HTML<p> define um parágrafo.
Exemplo
<p>Este é um parágrafo</p>
<p>Este é outro parágrafo</p>
Tente você mesmo »
Os navegadores adicionam automaticamente uma linha em branco antes e depois de um parágrafo.
Exibição HTML
Você não pode ter certeza de como o HTML será exibido.
Telhas grandes ou pequenas, e janelas redimensionadas criarão resultados diferentes.
Com HTML, você não pode alterar a saída adicionando espaços extras ou linhas extras
em seu código HTML.
O navegador removerá espaços extras e linhas extras quando a página estiver
exibido.
Qualquer número de espaços e qualquer número de novas linhas conta como apenas um espaço.
Exemplo
<p>
Este parágrafo
contém muitas linhas
no código-fonte,
mas o navegador
ignora isso.
</p>
<p>
Este parágrafo
contém muitos espaços
na fonte código
mas o navegador
ignora isso.
</p>
Experimente você mesmo »
Não Esqueça a Tag de Fim
A maioria dos navegadores exibirá HTML corretamente, mesmo que você se esqueça da tag de fechamento:
Exemplo
<p>Este é um parágrafo</p>
Este é outro parágrafo
Tente você mesmo »
O exemplo acima funcionará na maioria dos navegadores, mas não confie nele.
Esquecer a tag de fechamento pode produzir resultados ou erros inesperados.
Versões mais estritas do HTML, como XHTML, não permitem que você omita a tag de fechamento.
Quebras de linha HTML
O elemento HTML<br> define uma quebra de linha.
Use <br> se você quiser uma quebra de linha (uma nova linha) sem começar uma nova
paragraph:
Exemplo
<p>Este é<br>um para<br>grafia com quebras de linha</p>
Tente você mesmo »
O elemento <br> é um elemento HTML vazio. Ele não possui uma tag de fechamento.
O Problema do Poema
Exemplo
<p>Este poema será exibido como uma linha:</p>
<p>
Minha Bonnie está além do oceano.
Minha Bonnie está além do mar.
Minha Bonnie está do outro lado do oceano.
Oh, traga de volta minha Bonnie para mim.
</p>
Experimente você mesmo »
O Elemento HTML <pre>
O elemento HTML <pre> define texto pré-formatado.
O texto dentro de um elemento <pre> é exibido em uma fonte de largura fixa (geralmente
Courier), e preserva tanto espaços quanto quebras de linha:
Exemplo
<pre>
Minha Bonnie está além do oceano.
Meu Bonnie está além do mar.
Minha Bonnie está além do oceano.
Oh, traga minha Bonnie de volta para mim.
</pre>
Experimente você mesmo »
Teste-se com Exercícios!
Exercício 1 » Exercício 2 » Exercise 3 » Exercício 4 »
Referência de Tag HTML
A referência de tags do W3Schools contém informações adicionais sobre elementos HTML
e seus atributos.
Etiqueta Description
<p> Define um parágrafo
<br> Insere uma única quebra de linha
<pre> Define texto pré-formatado
Estilos HTML
« Anterior
Próximo Capítulo »
Estilos HTML
Eu sou vermelho
Eu estou triste
Experimente por conta própria »
O Atributo de Estilo HTML
Setting the style of an HTML element, can be done with thestyle attribute.
O atributo de estilo HTML tem a seguinte sintaxe:
style="property:value;"
A propriedade é uma propriedade CSS. O valor é um valor CSS.
Você aprenderá mais sobre CSS mais tarde neste tutorial.
Cor de Fundo HTML
A propriedade background-color define a cor de fundo para um HTML
element:
Este exemplo define o fundo de uma página como cinza-claro:
Exemplo
<bodystyle="background-color:lightgrey;">
<h1>Este é um cabeçalho</h1>
<p>Este é um parágrafo.</p>
</body>
Experimente você mesmo »
Cor do Texto HTML
A propriedade color define a cor do texto para um elemento HTML:
Exemplo
<h1 style="color:blue;">Isto é um cabeçalho</h1>
<p style="color:red;">Este é um parágrafo.</p>
Experimente você mesmo »
Fontes HTML
A propriedade font-family define a fonte a ser usada para um elemento HTML:
Exemplo
Este é um cabeçalho
<p style="font-family:courier;">Este é um parágrafo.</p>
Tente você mesmo »
Tamanho do Texto HTML
A propriedade font-size define o tamanho do texto para um elemento HTML:
Exemplo
<h1 style="font-size:300%;">Isto é um título</h1>
<p style="font-size:160%;">Este é um parágrafo.</p>
Experimente você mesmo »
Alinhamento de Texto HTML
A propriedade text-align define o alinhamento horizontal do texto para um HTML
element:
Exemplo
<h1 style="text-align:center;">Título Centralizado</h1>
<p>Este é um parágrafo.</p>
Try it Yourself »
Resumo do Capítulo
Use o atributo style para estilizar elementos HTML
Usebackground-colorfor background color
Usar cor para cores de texto
Use a propriedade font-family para fontes de texto
Use o tamanho da fonte para tamanhos de texto
Use text-align para alinhamento de texto
Elementos de Formatação HTML
« Anterior »
Next Chapter »
Formatação de Texto
Este texto está em negrito
Este texto está em itálico
Isto é sobrescrito
Elementos de Formatação HTML
No capítulo anterior, você aprendeu sobre a estilização HTML, usando o estilo HTML
atributo.
HTML também define elementos especiais para definir texto com um significado especial.
HTML usa elementos como <b> e <i> para formatar a saída,
gostar de texto em negrito ou itálico.
Os elementos de formatação foram projetados para exibir tipos especiais de texto:
Texto em negrito
Texto importante
Texto em itálico
Texto enfatizado
Texto marcado
Texto pequeno
Texto excluído
Inserted text
Subscritos
Sobrescritos
HTMLNegritoeFormataçãoForte
O elemento HTML <b>define texto em negrito, sem nenhuma importância extra.
Exemplo
<p>Este texto é normal.</p>
<p><b>Este texto está em negrito</b>.</p>
Tente você mesmo »
O elemento HTML<strong>define<strong>texto, com semântica adicional
importância "forte".
Exemplo
<p>Este texto é normal.</p>
<p><strong>Este texto é forte</strong>.</p>
Experimente você mesmo »
Formatação Itálica e Enfática em HTML
O elemento HTML <i> define texto em itálico, sem nenhuma importância extra.
Exemplo
<p>Este texto é normal.</p>
<p><i>Este texto está em itálico</i>.</p>
Experimente você mesmo »
O elemento HTML<em>define texto enfatizado, com adição semântica
importância.
Exemplo
<p>Este texto é normal.</p>
<p><em>Este texto está enfatizado</em>.</p>
Experimente Você Mesmo »
Os navegadores exibem <strong> como <b>, e <em> como <i>.
No entanto, há uma diferença no significado dessas tags: <b> define negrito e <i> define itálico.
mas <strong> e <em> significam que o texto é "importante".
HTMLFormataçãoPequena
The HTML<small>element definessmalltext:
Exemplo
<h2>HTML<small>Pequeno</small>Formatação</h2>
Experimente você mesmo »
Formatação Marcada em HTML
O elemento HTML <mark>define texto marcado ou destacado:
Exemplo
<h2>HTML<mark>Marcado</mark>Formatação</h2>
Experimente você mesmo »
HTMLDeletedFormatting
O elemento HTML<del>define texto deletado (removido).
Example
<p>Minha cor favorita é<del>azul</del>vermelho.</p>
Tente você mesmo »
HTMLInseridoFormatação
O elemento HTML <ins> define texto inserido (adicionado).
Exemplo
<p>A minha <ins>cor</ins> favorita é vermelha.</p>
Tente você mesmo »
HTMLSubscritoFormatação
O elemento HTML<sub>define texto subscrito.
Exemplo
<p>Este é<sub>subscrito</sub>texto.</p>
Experimente você mesmo »
Formatação
Sobrescrito
HTML
O elemento HTML<sup>define texto em sobrescrito.
Exemplo
<p>This is<sup>superscripted</sup>text.</p>
Experimente você mesmo »
Teste-se com Exercícios!
Exercício 1 » Exercício 2 » Exercício 3 » Exercício 4 Exercício 5 »
Elementos de Formatação HTML
Etiqueta Description
<b> </b> Define texto em negrito
<em> Define texto em destaque
<i> Define texto em itálico
<pequeno> Define texto menor
<strong> </strong> Define texto importante
<sub> Define texto subscrito
<sup> Define texto sobrescrito
<ins> Define texto inserido
<del> Texto definido como excluído
<mark> Define texto marcado/destacado
Comentários HTML
« Anterior
Próximo Capítulo »
As tags de comentário <!-- e --> são usadas para inserir comentários em HTML.
Tags de Comentário HTML
Você pode adicionar comentários ao seu código-fonte HTML usando a seguinte sintaxe:
<!-- Escreva seus comentários aqui -->
Nota: Há um ponto de exclamação (!) na tag de abertura, mas não na tag de fechamento.
Os comentários não são exibidos pelo navegador, mas podem ajudar a documentar seu
HTML.
Com comentários, você pode colocar notificações e lembretes em seu HTML:
Exemplo
<!-- Este é um comentário -->
<p>This is a paragraph.</p>
<!-- Lembre-se de adicionar mais informações aqui -->
Experimente você mesmo »
Os comentários também são ótimos para depurar HTML, porque você pode comentar.
Linhas de código HTML, uma de cada vez, para procurar erros:
Exemplo
Não exiba isso no momento
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
Experimente você mesmo »
Comentários Condicionais
Você pode se deparar com comentários condicionais em HTML:
<![if IE 8]>
.... some HTML here ....
<![endif]-->
Comentários condicionais definem tags HTML a serem executadas pelo Internet Explorer
somente.
Software ProgramTags
As tags de comentários HTML também podem ser geradas por vários softwares HTML
programas.
Por exemplo, <!--webbot bot--> tags envolvidas dentro de comentários HTML por
FrontPage e Expression Web.
Como regra, deixe essas tags permanecerem, para ajudar a suportar o software que as criou.
Links HTML
« Anterior
Próximo Capítulo »
Os links são encontrados em quase todas as páginas da web. Os links permitem que os usuários cliquem em seu caminho
de página em página.
Links HTML - Hiperlinks
Os links HTML são hyperlinks.
Um hyperlink é um texto ou uma imagem que você pode clicar e pular para outro
document.
Links HTML - Sintaxe
No HTML, os links são definidos com a <a> tag:
<ahref="url">texto do link</a>
Exemplo
<a href="[Link] nosso tutorial de HTML</a>
Tente você mesmo »
O atributo href especifica o endereço de destino
([Link]
O texto do link é a parte visível (Visite nosso tutorial de HTML).
Clicar no texto do link o enviará para o endereço especificado.
O texto do link não precisa ser texto. Pode ser uma imagem HTML ou qualquer outro elemento HTML.
Sem uma barra no final nos endereços de subpastas, você pode gerar duas solicitações para o
adicionará automaticamente uma barra final ao endereço e, em seguida, criará uma nova solicitação.
Links Locais
O exemplo acima usou uma URL absoluta (um endereço da web completo).
Um link local (link para o mesmo site) é especificado com uma URL relativa (sem
[Link]
Example
<ahref="html_images.asp">Imagens HTML</a>
Experimente você mesmo »
Links HTML - Cores
Quando você passa o mouse sobre um link, normalmente duas coisas acontecem:
O cursor do mouse se transformará em uma mãozinha
A cor do elemento link mudará
Por padrão, um link aparecerá assim (em todos os navegadores):
Um link não visitado está sublinhado e azul
Um link visitado é sublinhado e roxo
An active link is underlined and red
Você pode mudar as cores padrão, usando estilos:
Exemplo
<style>
a:link{color:verde;background-color:transparente;text-decoration:none}
a:visited{color:rosa;background-color:transparente;text-decoration:none}
a:hover{cor:vermelho;background-color:transparente;text-
decoration:underline}
a:active{cor:amarelo;fundo:transparente;texto-
decoration:underline}
</style>
Experimente você mesmo »
Links HTML - O atributo target
O atributo target especifica onde abrir o documento vinculado.
Este exemplo abrirá o documento vinculado em uma nova janela do navegador ou em um
new tab:
Exemplo
<ahref="[Link] o W3Schools!
</a>
Experimente você mesmo »
Target Value Description
_em branco Abre o documento vinculado em uma nova janela ou aba
_self Opens the linked document in the same frame as it was clicked (this
_parent Abre o documento vinculado na janela pai
_top Abre o documento vinculado na tela inteira da janela
framename Abre o documento vinculado em um quadro nomeado
Se sua página da web estiver bloqueada em um quadro, você pode usar target="_top" para sair dele.
a moldura:
Exemplo
<ahref="[Link] de HTML5!
</a>
Tente você mesmo »
Links HTML - Imagem como Link
É comum usar imagens como links:
Exemplo
<ahref="[Link]">
<img src="[Link]" alt="HTML
tutorial"style="width:42px;height:42px;border:0">
</a>
Experimente você mesmo »
border:0 é adicionado para evitar que o IE9 (e versões anteriores) exiba uma borda ao redor da imagem
Links HTML - Criar um Favorito
Os marcadores HTML são usados para permitir que os leitores saltem para partes específicas de uma Web
página.
Os marcadores são práticos se o seu site tiver páginas longas.
Para fazer um marcador, você deve primeiro criar o marcador e depois adicionar um link
para isso.
Quando o link é clicado, a página irá rolar até o local com o marcador.
Exemplo
Primeiro, crie um marcador com o atributo id:
<h2 id="tips">Seção de Dicas Úteis</h2>
Então, adicione um link ao marcador ("Seção de Dicas Úteis"), a partir do mesmo
page:
<ahref="#dicas">Visite a Seção de Dicas Úteis</a>
Ou adicione um link para o marcador ('Seção de Dicas Úteis'), de outra página:
Exemplo
<ahref="html_tips.htm#tips">Visite a Seção de Dicas Úteis</a>
Experimente você mesmo »
Resumo do Capítulo
Use o elemento HTML <a> para definir um link
Use o atributo HTMLhref para definir o endereço do link
Use o atributo HTMLtarget para definir onde abrir o link
documento
Use o elemento HTML <img> (dentro de <a>) para usar uma imagem como um link
Use o atributo HTML id (id="valor") para definir marcadores em uma página
Use o atributo HTMLhref (href="#value") para vincular ao marcador
Teste-se com Exercícios!
Exercício 1 » Exercício 2 » Exercício 3 » Exercício 4 » Exercício 5 »
Tags de Link HTML
Tag Description
<a> Define um hyperlink
IMAGENS HTML
<!DOCTYPEhtml>
<html>
<corpo>
<h2>Montanha Espectacular</h2>
<img src="pic_mountain.jpg" alt="Montanha">
Visualizar"estilo="largura:304px;altura:228px;">
</body>
</html>
Experimente você mesmo »
Sempre especifique a largura e a altura de uma imagem. Se a largura e a altura não forem especificadas,
enquanto a imagem carrega.
Sintaxe de Imagens HTML
No HTML, as imagens são definidas com a tag <img>.
A tag <img> está vazia, contém apenas atributos e não tem um fechamento
etiqueta.
O atributo src especifica a URL (endereço da web) da imagem:
<imgsrc="url"alt="some_text">
O atributo alt
O atributo alt especifica um texto alternativo para uma imagem, caso a imagem não possa ser exibida.
exibido.
O atributo alt fornece informações alternativas para uma imagem se um usuário, por algum motivo...
razão não consegue vê-lo (por causa de uma conexão lenta, um erro no atributo src,
ou se o usuário usar um leitor de tela).
Se um navegador não conseguir encontrar uma imagem, exibirá o texto alternativo:
Exemplo
<img src="[Link]" alt="HTML5" />
Ícone"estilo="largura:128px;altura:128px;">
Experimente você mesmo »
O atributo alt é obrigatório. Uma página da web não será validada corretamente sem ele.
Leitores de Tela HTML
Um leitor de tela é um programa de software que pode ler o que está exibido em um
tela.
Leitores de tela são úteis para pessoas cegas, com deficiência visual ou em aprendizagem
desativado.
Leitores de tela podem ler o atributo alt.
Image Size - Width and Height
Você pode usar o atributo style para especificar a largura e a altura de uma imagem.
Os valores são especificados em pixels (use px após o valor):
Exemplo
<imgsrc="[Link]"alt="HTML5 Icon"style="width:128px;height:128px;">
Experimente você mesmo »
Alternativamente, você pode usar os atributos width e height. Aqui, os valores são
especificado em pixels por padrão:
Exemplo
<img src="[Link]" alt="Ícone HTML5" width="128" height="128">
Experimente você mesmo »
Largura e Altura ou Estilo?
Tanto os atributos de largura, altura e estilo são válidos no HTML5 mais recente.
padrão.
Sugerimos que você use o atributo de estilo. Isso impede que as folhas de estilo mudem.
the original size of images:
Exemplo
<!DOCTYPEhtml>
<html>
<cabeça>
<style>
img {
largura:100%;
}
</estilo>
</head>
<body>
<img src="[Link]" alt="Ícone HTML5" style="width:128px;height:128px;">
<img src="[Link]" alt="Ícone HTML5" width="128" height="128">
</body>
</html>
Experimente você mesmo »
Imagens em outra pasta
Se não especificado, o navegador espera encontrar a imagem na mesma pasta que o
página web.
No entanto, é comum armazenar imagens em uma subpasta. Você deve então incluir
o nome da pasta no atributo src:
Exemplo
<img src="/images/[Link]" alt="HTML5" />
Ícone"estilo="largura:128px;height:128px;">
Experimente Você Mesmo »
Imagens em Outro Servidor
Alguns sites armazenam suas imagens em servidores de imagem.
Na verdade, você pode acessar imagens de qualquer endereço da web no mundo:
Exemplo
<img src="[Link] alt="W3
[Link]
Experimente você mesmo »
Imagens Animadas
O padrão GIF permite imagens animadas:
Exemplo
<img src="[Link]" alt="Computador">
Homem
Experimente você mesmo »
Observe que a sintaxe para inserir imagens animadas não é diferente da não-
imagens animadas.
Usando uma Imagem como um Link
Para usar uma imagem como um link, basta aninhar a tag <img> dentro da tag <a>:
Exemplo
<a href="[Link]">
<img src="[Link]" alt="HTML
tutorial"style="width:42px;height:42px;border:0;">
</a>
Experimente você mesmo »
Adicione "border:0;" para evitar que o IE9 (e versões anteriores) exiba uma borda ao redor da imagem
Imagem Flutuante
Use a propriedade float do CSS para fazer a imagem flutuar.
A imagem pode flutuar à direita ou à esquerda de um texto:
Exemplo
<p>
<img src="[Link]" alt="Sorriso">
face"style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p> </p>
<img src="[Link]" alt="Sorriso" />
face"style="float:left;width:42px;height:42px;">
A imagem flutuará à esquerda do texto.
</p>
Experimente você mesmo »
Image Maps
Use a tag <map> para definir um mapa de imagem. Um mapa de imagem é uma imagem com
áreas clicáveis.
O atributo name da tag <map> está associado ao usemap da <img>
atribui e cria uma relação entre a imagem e o mapa.
A tag <map> contém um número de tags <area>, que definem a área clicável.
áreas no mapa da imagem:
Exemplo
<img src="[Link]" alt="Planetas" usemap="#planetmap" style="largura:1
45px; altura: 126px;
<mapname="planetmap">
<areashape="rect"coords="0,0,82,126"alt="Sun"href="[Link]">
<areashape="circle"coords="90,58,3"alt="Mercury"href="[Link]">
<areashape="circle"coords="124,58,8"alt="Vênus"href="[Link]">
</map>
Experimente você mesmo »
Chapter Summary
Use o elemento HTML <img> para definir uma imagem
Use o atributo HTMLsrc para definir a URL da imagem
Use o atributo HTML alt para definir um texto alternativo para uma imagem, se ele
não pode ser exibido
Use os atributos HTML width e height para definir o tamanho da imagem
Use as propriedades CSS width e height para definir o tamanho da imagem
(alternativamente)
Use a propriedade CSS float para permitir que a imagem flutue
Use o elemento HTML <map> para definir um mapa de imagem
Use o elemento HTML <area> para definir as áreas clicáveis na imagem
map
Use o atributo usemap do elemento <img> para apontar para uma imagem-
mapa
Carregar imagens leva tempo. Imagens grandes podem desacelerar sua página. Use imagens com cuidado.
Teste-se com Exercícios!
Exercise 1 » Exercício 2 » Exercício 3 » Exercício 4 » Exercício 5 » Exercício 6 »
Tags de Imagem HTML
Etiqueta Description
<img> Define uma imagem
<map> Define um mapa de imagem
<área> Define uma área clicável dentro de um mapa de imagem
HTML Lists
« Anterior »
Next Chapter »
Exemplo de uma lista não ordenada e uma lista ordenada em
HTML:
Lista Não Ordenada:
Item
Item
Item
Item
Lista Ordenada:
1. Primeiro item
2. Segundo item
3. Terceiro item
4. Quarto item
Listas HTML não ordenadas
Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com
a<li>tag.
Os itens da lista serão marcados com marcadores (pequenos círculos pretos):
Exemplo
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Tente você mesmo »
Listas HTML Não Ordenadas - O Estilo
Atributo
Um atributo de estilo pode ser adicionado a uma lista não ordenada, para definir o estilo do
marker:
Estilo Description
tipo-de-estilo-da-lista:disc Os itens da lista serão marcados com marcadores (padrão)
tipo-de-estilo-de-lista: círculo Os itens da lista serão marcados com círculos
tipo-de-estilo-da-lista:quadrado Os itens da lista serão marcados com quadrados
list-style-type:none Os itens da lista não serão marcados
Disc:
<ulstyle="list-style-type:disc">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Experimente você mesmo »
Círculo
<ul style="list-style-type:circle">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Experimente você mesmo »
Quadrado
<ul style="list-style-type:square">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Experimente você mesmo »
Nenhum
<ulstyle="list-style-type:none">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Experimente você mesmo »
Listas HTML Ordenadas
Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>.
The list items will be marked with numbers:
Example
<ol>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Experimente você mesmo »
Listas HTML Ordenadas - O Atributo Type
Um atributo type pode ser adicionado a uma lista ordenada, para definir o tipo do
marker:
Tipo Description
type="1" Os itens da lista serão numerados com números (padrão)
type="A" Os itens da lista serão numerados com letras maiúsculas
type="a" Os itens da lista serão numerados com letras minúsculas
tipo="I" Os itens da lista serão numerados com números romanos maiúsculos
type="i" Os itens da lista serão numerados com números romanos minúsculos
Numbers:
<ol type="1">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Experimente você mesmo »
Letras Maiúsculas:
<ol type="A">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Experimente você mesmo »
Lowercase Letters:
<ol type="a">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Experimente você mesmo »
Números Romanos em Maiúsculas:
<ol type="I">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Experimente Você Mesmo »
números romanos em letras minúsculas:
<oltype="i">
<li>café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Experimente você mesmo »
Listas de Descrição HTML
O HTML também suporta listas de descrição.
Uma lista de descrições é uma lista de termos, com uma descrição de cada termo.
A tag <dl> define a lista de descrição, a tag <dt> define o termo
(nome), e a tag <dd> descreve cada termo:
Exemplo
<dl>
<dt>Coffee</dt>
- bebida quente preta
<dt>Milk</dt>
- bebida fria branca
</dl>
Tente você mesmo »
Listas HTML Aninhadas
Listas podem ser aninhadas (listas dentro de listas):
Exemplo
<ul>
<li>Cafè</li>
Chá
<ul>
<li>Chá preto</li>
<li>Chá verde</li>
</ul>
</li>
<li>Leite</li>
</ul>
Experimente você mesmo »
Itens de lista podem conter novas listas e outros elementos HTML, como imagens e links, etc.
Listas Horizontais
Listas HTML podem ser estilizadas de várias maneiras com CSS.
Uma maneira popular é estilizar uma lista para ser exibida horizontalmente:
Exemplo
<!DOCTYPEhtml>
<html>
<cabeça>
<style>
ul#menu li {
exibir:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ulid="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
Experimente você mesmo »
Com um pouco de estilo extra, você pode fazê-lo parecer um menu:
Exemplo
ul#menu{
preenchimento:0;
}
ul#menu li{
display:inline;
}
ul#menu li a{
cor de fundo:preto;
color:white;
preenchimento:10px 20px;
decoração-de-texto:none;
border-radius:4px 4px 0 0;
}
ul#menu li a:hover{
cor-de-fundo:laranja;
}
Experimente você mesmo »
Resumo do Capítulo
Use o elemento HTML <ul> para definir uma lista não ordenada
Use o atributo style do HTML para definir o estilo das bullets
Use o elemento HTML <ol> para definir uma lista ordenada
Use o atributo type do HTML para definir o tipo de numeração
Use o elemento HTML <li> para definir um item de lista
Use o elemento HTML <dl> para definir uma lista de descrição
Use o elemento HTML <dt> para definir o termo de descrição
Use o elemento HTML <dd> para definir os dados de descrição
Listas podem ser aninhadas dentro de listas
Itens de lista podem conter outros elementos HTML
Use a propriedade CSS display:inline para exibir uma lista horizontalmente
Teste-se com Exercícios!
Exercício 1 » Exercício 2 » Exercício 3 » Exercício 4 » Exercício 5 » Exercício 6 »
Tags de Lista HTML
Etiqueta Descrição
<ul> Define uma lista não ordenada
<ol> Define uma lista ordenada
<li> Define um item de lista
<dl> Define uma lista de descrição
<dt> Defines the term in a description list
<dd> Define a descrição em uma lista de descrições
Tabelas HTML
« Anterior
Próximo Capítulo »
Exemplo de Tabela HTML
Número First Name Last Name
1 Eve Jackson
2 João Doe
3 Adão Johnson
4 Jill Smith
Definindo HTMLTables
Exemplo
<tablestyle="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Tente você mesmo »
Exemplo explicado:
As tabelas são definidas com a tag <table>.
As tabelas são divididas em linhas de tabela com a tag <tr>.
As linhas da tabela são divididas em dados da tabela com a tag <td>.
Uma linha de tabela também pode ser dividida em cabeçalhos de tabela com a tag <th>.
Os dados da tabela <td> são os contêineres de dados da tabela.
Eles podem conter todos os tipos de elementos HTML, como texto, imagens, listas, outras tabelas, etc.
Uma Tabela HTML com um Atributo de Borda
Se você não especificar uma borda para a tabela, ela será exibida sem bordas.
Uma borda pode ser adicionada usando o atributo border:
Exemplo
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eva</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Experimente você mesmo »
O atributo border está saindo do padrão HTML! É melhor usar CSS.
Para adicionar bordas, use a propriedade de borda do CSS:
Exemplo
mesa, th, td{
borda:1px sólida preta;
}
Experimente você mesmo »
Lembre-se de definir bordas tanto para a tabela quanto para as células da tabela.
Uma Tabela HTML com Bordas Colapsadas
Se você quiser que as bordas colapsem em uma única borda, adicione CSS border-collapse:
Example
tabela, th, td{
border:1px solid black;
colapso-de-bordas:colapsar;
}
Experimente você mesmo »
An HTMLTable with Cell Padding
O preenchimento da célula especifica o espaço entre o conteúdo da célula e suas bordas.
Se você não especificar um preenchimento, as células da tabela serão exibidas sem
preenchimento.
Para definir o preenchimento, use a propriedade CSS padding:
Exemplo
tabela, th, td{
borda:1px sólida preta;
colapso-de-bordas:colapsar;
}
th, td{
preenchimento:15px;
}
Experimente você mesmo »
Cabeçalhos de Tabela HTML
Table headings are defined with the<th>tag.
Por padrão, todos os principais navegadores exibem os cabeçalhos de tabela em negrito e centralizados:
Exemplo
<tablestyle="width:100%">
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Pontos</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Experimente por si mesmo »
Para alinhar os cabeçalhos da tabela à esquerda, use a propriedade CSS text-align:
Exemplo
th{
texto-alinhar:esquerda;
}
Tente você mesmo »
Uma Tabela HTML com Espaçamento de Bordas
O espaçamento da borda especifica o espaço entre as células.
Para definir o espaçamento das bordas de uma tabela, use a propriedade CSS border-spacing:
Exemplo
table{
border-spacing:5px;
}
Tente você mesmo »
Se a tabela tiver bordas colapsadas, o espaçamento das bordas não terá efeito.
Células da Tabela que Abrangem Muitas Colunas
Para fazer uma célula abranger mais de uma coluna, use o atributo colspan:
Exemplo
<tablestyle="width:100%">
<tr>
<th>Nome</th>
<thcolspan="2">Telefone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Experimente você mesmo »
Células de Tabela que Abrangem Muitas Linhas
Para fazer uma célula abranger mais de uma linha, use o atributo rowspan:
Exemplo
<tablestyle="width:100%">
<tr>
<th>Nome:</th>
<td>Bill Gates</td>
</tr>
<tr>
<throwspan="2">Telefone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
Experimente você mesmo »
Uma Tabela HTML com uma Legenda
Para adicionar uma legenda a uma tabela, use a tag <caption>:
Exemplo
<tablestyle="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Mês</th>
<th>Savings</th>
</tr>
<tr>
<td>Janeiro</td>
<td>$100</td>
</tr>
<tr>
Fevereiro
<td>R$50</td>
</tr>
</tabela>
Experimente você mesmo »
A tag <caption> deve ser inserida imediatamente após a tag <table>.
Um Estilo Especial para OneTable
Para definir um estilo especial para uma tabela especial, adicione um atributo anid à tabela:
Exemplo
<tableid="t01">
<tr>
<th>Firstname</th>
<th>Sobrenome</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Agora você pode definir um estilo especial para esta tabela:
tabela#t01{
largura:100%;
cor de fundo:#f1f1c1;
}
Experimente você mesmo »
E adicione mais estilos:
table#t01 tr:nth-child(even){
cor de fundo:#eee;
}
table#t01 tr:nth-child(impar){
cor-de-fundo:#fff;
}
mesa#t01 th{
color:white;
cor de fundo:preto;
}
Experimente você mesmo »
Resumo do Capítulo
Use the HTML<table>element to define a table
Use o elemento HTML <tr> para definir uma linha de tabela
Use o elemento HTML <td> para definir dados de uma tabela
Use o elemento HTML <th> para definir um cabeçalho de tabela
Use o elemento HTML <caption> para definir uma legenda da tabela
Use a propriedade CSS border para definir uma borda
Use a propriedade CSS border-collapse para colapsar as bordas das células
Use a propriedade CSS padding para adicionar preenchimento às células
Use a propriedade CSS text-align para alinhar o texto da célula
Use a propriedade CSSborder-spacingpara definir o espaçamento entre as células
Use o atributo colspan para fazer uma célula ocupar várias colunas
Use o atributo rowspan para fazer uma célula abranger várias linhas
Use o atributo id para definir exclusivamente uma tabela
Teste-se com Exercícios!
Exercício 1 » Exercício 2 » Exercício 3 » Exercício 4 » Exercício 5 » Exercício 6 »
TagsDeTabelaHTML
Etiqueta Description
<table> Define uma tabela
<th> Define uma célula de cabeçalho em uma tabela
<tr> Define uma linha em uma tabela
<td> Define uma célula em uma tabela
<caption> Define uma legenda de tabela
<colgroup> Especifica um grupo de uma ou mais colunas em uma tabela para formatação
<col> Especifica as propriedades da coluna para cada coluna dentro de um elemento <colgroup>
<thead> Agrupa o conteúdo do cabeçalho em uma tabela
<tbody> Agrupa o conteúdo do corpo em uma tabela
<tfoot> Agrupa o conteúdo do rodapé em uma tabela
Formulários HTML
« Anterior
Próximo Capítulo »
O elemento <form>
Os formulários HTML são usados para coletar a entrada do usuário.
The<form>element defines an HTML form:
<form>
.
elementos de formulário
.
</form>
Os formulários HTML contêm elementos de formulário.
Elementos de formulário são diferentes tipos de elementos de entrada, caixas de seleção, botões de opção,
botões de envio, e mais.
O elemento <input>
O elemento <input> é o elemento de formulário mais importante.
O elemento <input> tem muitas variações, dependendo do atributo type.
Aqui estão os tipos usados neste capítulo:
Tipo Description
texto Define entrada de texto normal
radio Define o input de botão de rádio (para selecionar uma entre muitas opções)
submit Define um botão de enviar (para enviar o formulário)
Você aprenderá muito mais sobre tipos de entrada mais tarde neste tutorial.
TextodeEntrada
<input type="text"> define um campo de entrada de uma linha para entrada de texto:
Exemplo
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<inputtype="text"name="lastname">
</form>
Experimente você mesmo »
Assim é como ficará em um navegador:
First name:
Last name:
Nota: O formulário em si não é visível. Também observe que a largura padrão de um texto
o campo tem 20 caracteres.
Entrada de Botão de Opção
<input type="radio">define um botão de opção.
Os botões de opção permitem que um usuário selecione UMA de um número limitado de escolhas:
Exemplo
<form>
<inputtype="radio"name="sex"value="male"checked>Male
<br>
<input type="radio" name="sex" value="female">Feminino
</form>
Experimente você mesmo »
É assim que o código HTML acima será exibido em um navegador:
Masculino
Feminino
O Botão de Enviar
<input type="submit"> define um botão para enviar um formulário para um formulário-
manipulador.
O manipulador de formulários é tipicamente uma página de servidor com um script para processar a entrada.
dados.
O manipulador de formulário é especificado no atributo action do formulário:
Exemplo
<formaction="action_page.php">
First name:<br>
<inputtype="text"name="firstname"value="Mickey">
<br>
Last name:<br>
<inputtype="text"name="lastname"value="Mouse">
<br><br>
<inputtype="submit"value="Submit">
</form>
Tente você mesmo »
É assim que o código HTML acima será exibido em um navegador:
First name:
Mickey
Last name:
Rato
Enviar
O Atributo de Ação
A ação atribuída define a ação a ser executada quando o formulário é
submetido.
A forma comum de enviar um formulário para um servidor é usando um botão de enviar.
Normalmente, o formulário é enviado para uma página da web em um servidor web.
No exemplo acima, um script do lado do servidor é especificado para lidar com o enviado
form:
<formaction="action_page.php">
Se o atributo action for omitido, a ação é definida como a página atual.
O Atributo Método
O atributo método especifica o método HTTP (GET ou POST) a ser utilizado
ao enviar os formulários:
<form action="action_page.php" method="get">
ou:
<form action="action_page.php" method="post">
Quando usar GET?
Você pode usar GET (o método padrão):
Se a submissão do formulário for passiva (como uma consulta de mecanismo de busca), e sem
informação sensível.
Quando você usa GET, os dados do formulário estarão visíveis no endereço da página:
action_page.php?firstname=Mickey&lastname=Mouse
GET is best suited to short amounts of data. Size limitations are set in your browser.
Quando usar POST?
Você deve usar POST:
Se o formulário estiver atualizando dados ou incluir informações sensíveis (senha).
O POST oferece melhor segurança porque os dados submetidos não são visíveis na página.
endereço.
O Atributo Nome
Para ser submetido corretamente, cada campo de entrada deve ter um atributo name.
Este exemplo só enviará o campo de entrada "Sobrenome":
Exemplo
<formaction="action_page.php">
First name:<br>
<inputtype="text"value="Mickey">
<br>
Last name:<br>
<inputtype="text"name="lastname"value="Mouse">
<br><br>
<inputtype="submit"value="Submit">
</form>
Experimente você mesmo »
Agrupando Dados de Formulário com <fieldset>
O elemento <fieldset> agrupa dados relacionados em um formulário.
O elemento <legend> define uma legenda para o elemento <fieldset>.
Exemplo
<formaction="action_page.php">
<fieldset>
<legend>Informações pessoais:</legend>
First name:<br>
<inputtype="text"name="firstname"value="Mickey">
<br>
Last name:<br>
<inputtype="text"name="lastname"value="Mouse">
<br><br>
<inputtype="submit"value="Submit">
</fieldset>
</form>
Experimente você mesmo »
É assim que o código HTML acima será exibido em um navegador:
Personal information:First name:
Mickey
Last name:
Rato
Enviar
Atributos de Formulário HTML
Um elemento <form> HTML, com todos os atributos possíveis configurados, terá a seguinte aparência:
<form action="action_page.php" method="GET" target="_blank" accept-
charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="desligado" novalidat
e>
.
elementos de formulário
.
</form>
Teste-se com Exercícios!
Exercício 1 » Exercício 2 » Exercício 3 » Exercício 4 »
Aqui está a lista de atributos <form>:
Attribute Description
accept-charset Especifica o conjunto de caracteres usado no formulário enviado (padrão: os caracteres da página)
ação Especifica um endereço (url) onde enviar o formulário (padrão: o envio
autocompletar Specifies if the browser should autocomplete the form (default: on).
enctype Especifica a codificação dos dados enviados (padrão: é codificado em URL).
método Especifica o método HTTP usado ao enviar o formulário (padrão: GET)
name Especifica um nome usado para identificar o formulário (para uso no DOM: [Link]
não validar Especifica que o navegador não deve validar o formulário.
alvo Especifica o destino do endereço no atributo de ação (padrão: _self).
Você aprenderá mais sobre atributos nos próximos capítulos.
Elementos de Formulário HTML
« Anterior
Próximo Capítulo »
Este capítulo descreve todos os elementos de formulário HTML.
O elemento <input>
O elemento de formulário mais importante é o elemento <input>.
O elemento <input> pode variar de várias maneiras, dependendo do atributo type.
Todos os tipos de entrada HTML são abordados no próximo capítulo.
O Elemento <select> (Lista Suspensa)
O elemento <select> define uma lista suspensa:
Exemplo
<select name="cars">
<optionvalue="volvo">Volvo</option>
<optionvalue="saab">Saab</option>
<option value="fiat">Fiat</option>
<optionvalue="audi">Audi</option>
</select>
Tente você mesmo »
Os elementos <option> definem as opções a serem selecionadas.
A lista normalmente mostrará o primeiro item como selecionado.
Você pode adicionar um atributo selecionado para definir uma opção predefinida.
Exemplo
<optionvalue="fiat"selected>Fiat</option>
Experimente você mesmo »
O Elemento <textarea>
O elemento <textarea> define um campo de entrada multi-linha (uma área de texto):
Exemplo
<textareaname="message"rows="10"cols="30">
O gato estava brincando no jardim.
</textarea>
Experimente você mesmo »
É assim que o código HTML acima será exibido em um navegador:
<button> Elemento
O elemento <button> define um botão clicável:
Exemplo
<botão tipo="botão" onclick="alert('Olá Mundo!')">Clique em Mim!</botão>
Experimente Você Mesmo »
É assim que o código HTML acima será exibido em um navegador:
Clique em Mim!
Elementos de Formulário HTML5
O HTML5 adicionou os seguintes elementos de formulário:
<datalist>
<keygen>
<output>
Por padrão, os navegadores não exibem elementos desconhecidos. Novos elementos não irão destruir
Elemento <datalist> HTML5
O elemento <datalist> especifica uma lista de opções predefinidas para um <input>
elemento.
Os usuários verão uma lista suspensa de opções predefinidas à medida que inserem dados.
Thelistattribute of the <input> element, must refer to theidattribute of the
<datalist> elemento.
Exemplo
An <input> element with pre-defined values in a <datalist>:
<formaction="pagina_de_acao.php">
<inputlist="browsers">
<datalistid="browsers">
<optionvalue="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<optionvalue="Ópera">
<optionvalue="Safari">
</datalist>
</form>
Experimente você mesmo »
Elemento <keygen> do HTML5
O propósito do elemento <keygen> é fornecer uma maneira segura de
autenticar usuários.
O elemento <keygen> especifica um campo gerador de par de chaves em um formulário.
When the form is submitted, two keys are generated, one private and one
público.
A chave privada é armazenada localmente, e a chave pública é enviada para o servidor.
A chave pública poderia ser usada para gerar um certificado de cliente para autenticar o
usuário no futuro.
Exemplo
Um formulário com um campo de keygen:
<form action="action_page.php">
Username:<inputtype="text"name="user">
Encryption:<keygenname="security">
<inputtype="submit">
</form>
Experimente por conta própria »
Elemento <output> HTML5
O elemento <output> representa o resultado de um cálculo (como um realizado
por um script).
Exemplo
Realize um cálculo e mostre o resultado em um elemento <output>:
<formaction="action_page.asp">
oninput="[Link]=parseInt([Link])+parseInt([Link])">
0
<inputtype="range"id="a"name="a"value="50">
100 +
<inputtype="number"id="b"name="b"value="50">
=
<outputname="x"for="a b"></output>
<br><br>
<inputtype="enviar">
</form>
Experimente você mesmo »
Teste-se com Exercícios!
Exercício 1 » Exercise 2 » Exercício 3 »
Elementos de Formulário HTML
= novo em HTML5.
Etiqueta Descrição
<form> Define um formulário HTML para entrada do usuário
<input> Define um controle de entrada
<textarea> Defines a multiline input control (text area)
<label> Define um rótulo para um elemento <input>
<fieldset> Agrupa elementos relacionados em um formulário
<legend> Define uma legenda para um elemento <fieldset>
<select> Define uma lista suspensa
<optgroup> Define um grupo de opções relacionadas em uma lista suspensa
<opção> Define uma opção em uma lista suspensa
<button> Define um botão clicável
<datalist> Especifica uma lista de opções predefinidas para controles de entrada
<keygen> Define um campo gerador de chave-par (para formulários)
<output> Define o resultado de um cálculo
Tipos de Entrada HTML
« Anterior »
Próximo Capítulo »
InputTypes
Este capítulo descreve os tipos de entrada do elemento <input>.
TipoDeEntrada: texto
<input type="text"> define um campo de entrada de uma linha para entrada de texto:
Exemplo
<form>
First name:<br>
<inputtype="text"name="firstname">
<br>
Last name:<br>
<input type="text" name="sobrenome">
</form>
Experimente você mesmo »
É assim que o código HTML acima será exibido em um navegador:
First name:
Last name:
InputType: password
<input type="password">define um campo de senha:
Exemplo
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<inputtype="password"name="psw">
</form>
Experimente você mesmo »
É assim que o código HTML acima será exibido em um navegador:
User name:
User password:
Os caracteres em um campo de senha estão mascarados (mostrados como asteriscos ou círculos).
InputType: submit
<input type="submit">define um botão para submeter a entrada do formulário para
manipulador-de-formulário
O manipulador de formulários é tipicamente uma página do servidor com um script para processar a entrada
dados.
O manipulador de formulário é especificado no atributo de ação do formulário:
Exemplo
<formaction="action_page.php">
First name:<br>
<inputtype="text"name="firstname"value="Mickey">
<br>
Last name:<br>
<inputtype="text"name="lastname"value="Mouse">
<br><br>
<inputtype="submit"value="Submit">
</form>
Experimente você mesmo »
É assim que o código HTML acima será exibido em um navegador:
First name:
Mickey
Last name:
Rato
Enviar
Se você omitir o atributo de valor do botão de envio, o botão receberá um padrão
text:
Exemplo
<formaction="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<inputtype="text"name="lastname"value="Mouse">
<br><br>
<inputtype="submit">
</form>
Experimente você mesmo »
TipoDeEntrada: rádio
<input type="radio">define um botão de opção.
Os botões de rádio permitem que um usuário selecione APENAS UMA de um número limitado de opções:
Exemplo
<form>
<input type="radio" name="sex" value="male" checked> Masculino
<br>
<inputtype="radio"name="sex"value="female">Female
</form>
Experimente você mesmo »
É assim que o código HTML acima será exibido em um navegador:
Masculino
Feminino
InputType: checkbox
<input type="checkbox">define uma caixa de seleção.
As caixas de seleção permitem que um usuário selecione ZERO ou MAIS opções de um número limitado de
escolhas.
Exemplo
<form>
<input type="checkbox" name="vehicle1" value="Bike"> Eu tenho uma bicicleta
<br>
<input type="checkbox" name="vehicle2" value="Car">Eu tenho um carro
</form>
Experimente você mesmo »
É assim que o código HTML acima será exibido em um navegador:
Eu tenho uma bicicleta
Eu tenho um carro
InputType: button
<input type="button">define um botão:
Exemplo
<inputtype="button"onclick="alert('Hello World!')"value="Click Me!">
Experimente você mesmo »
É assim que o código HTML acima será exibido em um navegador:
Tipos de Entrada HTML5
HTML5 adicionou vários novos tipos de entrada:
color
data
data e hora
data-hora-local
mês
number
alcance
pesquisar
telefone
tempo
url
semana
Tipos de entrada, não suportados por navegadores da web antigos, se comportarão como tipo de entrada texto.
TipoDeEntrada: número
O<input type="number">é usado para campos de entrada que devem conter um
valor numérico.
Você pode definir restrições sobre os números.
Dependendo do suporte do navegador, as restrições podem se aplicar ao campo de entrada.
Exemplo
<form>
Quantity (between 1 and 5):
<inputtype="number"name="quantity"min="1"max="5">
</form>
Experimente você mesmo »
Restrições de Entrada
Aqui está uma lista de algumas restrições de entrada comuns (algumas são novas no HTML5):
Atributo Description
desativado Especifica que um campo de entrada deve estar desativado
máx Especifica o valor máximo para um campo de entrada
comprimento máximo Especifica o número máximo de caracteres para um campo de entrada
min Especifica o valor mínimo para um campo de entrada
padrão Especifica uma expressão regular para verificar o valor de entrada.
somente leitura Especifica que um campo de entrada é somente leitura (não pode ser alterado)
requerido Especifica que um campo de entrada é obrigatório (deve ser preenchido)
size Especifica a largura (em caracteres) de um campo de entrada
passo Especifica os intervalos de números legais para um campo de entrada
valor Especifica o valor padrão para um campo de entrada
Você aprenderá mais sobre restrições de entrada no próximo capítulo.
Exemplo
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" valu
30
</form>
Experimente você mesmo »
InputType: date
O<input type="date">é usado para campos de entrada que devem conter uma data.
Dependendo do suporte do navegador, um seletor de data pode aparecer no campo de entrada.
Exemplo
<form>
Birthday:
<inputtype="date"name="bday">
</form>
Tente você mesmo »
Você pode adicionar restrições à entrada:
Exemplo
<form>
Insira uma data antes de 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Digite uma data após 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Experimente você mesmo »
InputType: color
O<input type="color">é usado para campos de entrada que devem conter uma cor.
Dependendo do suporte do navegador, um seletor de cores pode aparecer no campo de entrada.
Exemplo
<form>
Selecione sua cor favorita:
<input type="color" name="favcolor">
</form>
Experimente Você Mesmo »
InputType: range
O <input type="range"> é usado para campos de entrada que devem conter um valor
dentro de um intervalo.
Dependendo do suporte do navegador, o campo de entrada pode ser exibido como um controle deslizante
controle.
Exemplo
<form>
<inputtype="range"name="points"min="0"max="10">
</form>
Experimente você mesmo »
Você pode usar os seguintes atributos para especificar restrições: min, max, step,
valor.
InputType: month
O <input type="month"> permite que o usuário selecione um mês e um ano.
Dependendo do suporte do navegador, um seletor de data pode aparecer no campo de entrada.
Exemplo
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Experimente você mesmo »
InputType: week
O <input type="week"> permite que o usuário selecione uma semana e um ano.
Dependendo do suporte do navegador, um seletor de data pode aparecer no campo de entrada.
Exemplo
<form>
Selecione uma semana:
<input type="week" name="week_year">
</form>
Experimente você mesmo »
InputType: time
O <input type="time"> permite que o usuário selecione uma hora (sem fuso horário).
Dependendo do suporte do navegador, um seletor de horário pode aparecer no campo de entrada.
Exemplo
<form>
Selecione um horário:
<inputtype="time"name="usr_time">
</form>
Experimente você mesmo »
TipoDeEntrada: data e hora
A<input type="datetime">permite que o usuário selecione uma data e uma hora (com
fuso horário).
Exemplo
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>
Experimente você mesmo »
O tipo de entrada datetime foi removido do padrão HTML. Use datetime-local em vez disso.
TipoDeEntrada: datahora-local
O <input type="datetime-local"> permite que o usuário selecione uma data e hora.
(sem fuso horário).
Dependendo do suporte do navegador, um seletor de data pode aparecer no campo de entrada.
Exemplo
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Tente você mesmo »
InputType: email
O<input type="email"> é usado para campos de entrada que devem conter um e-
endereço de correio.
Dependendo do suporte do navegador, o endereço de e-mail pode ser automaticamente
validado quando enviado.
Alguns smartphones reconhecem o tipo de e-mail e adicionam '.com' ao teclado
para corresponder à entrada de email.
Exemplo
<form>
E-mail:
<input type="email" name="email">
</form>
Experimente você mesmo »
InputType: search
O <input type="search"> é usado para campos de pesquisa (um campo de pesquisa se comporta
como um campo de texto regular).
Exemplo
<form>
Pesquisar no Google:
<inputtype="search"name="googlesearch">
</form>
Experimente por conta própria »
InputType: tel
O <input type="tel"> é usado para campos de entrada que devem conter um
número de telefone.
O tipo tel é suportado atualmente apenas no Safari 8.
Exemplo
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
Experimente Você Mesmo »
InputType: url
O <input type="url"> é usado para campos de entrada que devem conter uma URL
endereço.
Dependendo do suporte do navegador, o campo de URL pode ser validado automaticamente.
quando enviado.
Alguns smartphones reconhecem o tipo de URL e adicionam '.com' ao teclado para
corresponder entrada de URL.
Exemplo
<form>
Adicione sua página inicial:
<input type="url" name="homepage">
</form>
Experimente você mesmo »
O atributo valor
O atributo value especifica o valor inicial para um campo de entrada:
Exemplo
<formaction="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="sobrenome">
</form>
Experimente Você Mesmo »
O atributo somente leitura
Atributo readonly especifica que o campo de entrada é somente leitura (não pode ser
mudou):
Exemplo
<formaction="">
First name:<br>
<inputtype="text"name="firstname"value="John"readonly>
<br>
Last name:<br>
<input type="text" name="sobrenome">
</form>
Experimente você mesmo »
O atributo readonly não precisa de um valor. É o mesmo que escrever
readonly="readonly".
O Atributo Desabilitado
O atributo disabled especifica que o campo de entrada está desativado.
Um elemento desabilitado é inutilizável e não clicável.
Elementos desativados não serão enviados.
Exemplo
<formaction="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="sobrenome">
</form>
Experimente você mesmo »
O atributo disabled não precisa de um valor. É o mesmo que escrever
desabilitado="desabilitado".
O atributo de tamanho
O atributo size especifica o tamanho (em caracteres) para o campo de entrada:
Exemplo
<formaction="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="sobrenome">
</form>
Tente você mesmo »
O atributo maxlength
O atributo maxlength especifica o comprimento máximo permitido para a entrada
field:
Exemplo
<formaction="">
Primeiro nome:<br>
<inputtype="text"name="firstname"maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Tente você mesmo »
Com um atributo maxlength, o controle de entrada não aceitará mais do que o
número de caracteres permitido.
O atributo não fornece nenhum feedback. Se você quiser alertar o usuário, você
deve escrever código JavaScript.
As restrições de entrada não são infalíveis. O JavaScript oferece muitas maneiras de adicionar entrada ilegal.
Para restringir a entrada de forma segura, as restrições devem ser verificadas pelo receptor (o servidor) conforme nós
Atributos HTML5
HTML5 adicionou os seguintes atributos para <input>:
autocompletar
foco automático
forma
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
lista
min and max
múltiplo
padrão (regexp)
placeholder
necessário
passo
e os seguintes atributos para <form>:
autocompletar
não validar
O Atributo de Autocompletar
O atributo de autocompletar especifica se um formulário ou campo de entrada deve ter
autocomplete on or off.
Quando o preenchimento automático está ativado, o navegador completa automaticamente os valores com base em
valores que o usuário inseriu antes.
Dica: É possível ter o autocomplete "ativado" para o formulário e "desativado" para específicos.
campos de entrada, ou vice-versa.
O atributo de autocomplete funciona com <form> e o seguinte <input>
tipos: texto, pesquisa, url, tel, email, senha, seletores de data, intervalo e cor.
Exemplo
Um formulário HTML com autocomplete ativado (e desativado para um campo de entrada):
<formaction="action_page.php"autocomplete="on">
First name:<inputtype="text"name="fname"><br>
Last name:<inputtype="text"name="lname"><br>
E-mail:<inputtype="email"name="email"autocomplete="off"><br>
<inputtype="submit">
</form>
Experimente você mesmo »
Dica: Em alguns navegadores, pode ser necessário ativar a função de preenchimento automático para
isso para funcionar.
O Atributo novalidate
O atributo novalidate é um atributo <form>.
Quando presente, novalidate especifica que os dados do formulário não devem ser validados quando
enviado.
Exemplo
Indica que o formulário não deve ser validado ao enviar:
<form action="action_page.php" novalidate>
E-mail:<inputtype="email"name="user_email">
<inputtype="submit">
</form>
Tente você mesmo »
O atributo autofocus
O atributo autofocus é um atributo booleano.
Quando presente, especifica que um elemento <input> deve ser obtido automaticamente
foco quando a página carrega.
Exemplo
Deixe o campo de entrada 'Primeiro nome' receber foco automaticamente quando a página carregar:
Primeiro nome:<input type="text" name="fname" autofocus>
Experimente você mesmo »
O atributo Formulário
O atributo form especifica uma ou mais formas a que um elemento <input> pertence.
Dica: Para se referir a mais de uma forma, use uma lista de IDs de forma separada por espaços.
Exemplo
Um campo de entrada localizado fora do formulário HTML (mas ainda parte do formulário):
<form action="action_page.php" id="form1">
Primeiro nome:<input type="text" name="fname"><br>
<inputtype="submit"value="Submit">
</form>
Sobrenome:<inputtype="text"name="lname"form="form1">
Experimente você mesmo »
O Atributo formaction
O atributo formaction especifica a URL de um arquivo que irá processar a entrada
controle quando o formulário é enviado.
O atributo formaction substitui o atributo action do elemento <form>.
O atributo formaction é usado com type="submit" e type="image".
Exemplo
Um formulário HTML com dois botões de envio, com ações diferentes:
<formaction="action_page.php">
Primeiro nome:<input type="text" name="fname"><br>
Sobrenome:<input type="text" name="lname"><br>
<inputtype="submit"value="Submit"><br>
<input type="submit" formaction="demo_admin.asp">
value="Submit as admin">
</form>
Experimente você mesmo »
O atributo formenctype
O atributo formenctype especifica como os dados do formulário devem ser codificados quando
enviando para o servidor (apenas para formulários com method="post").
O atributo formenctype substitui o atributo enctype do <form>
elemento.
O atributo formenctype é usado com type="submit" e type="image".
Exemplo
Envie os dados do formulário que são codificados por padrão (o primeiro botão de envio) e codificados
como "multipart/form-data" (o segundo botão de envio):
<form action="demo_post_enctype.asp" method="post">
Primeiro nome:<inputtype="text"name="fname"><br>
<inputtype="submit"value="Submit">
<inputtype="submit"formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
Tente você mesmo »
O atributo formmethod
O atributo formmethod define o método HTTP para enviar os dados do formulário para
a URL de ação.
O atributo formmethod substitui o atributo method do <form>
elemento.
O atributo formmethod pode ser usado com type="submit" e type="image".
Exemplo
O segundo botão de envio sobressai o método HTTP do formulário:
<form action="action_page.php" method="get">
Primeiro nome:<input type="text" name="fname"><br>
Last name:<inputtype="text"name="lname"><br>
<inputtype="submit"value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp">
value="Submit using POST">
</form>
Experimente você mesmo »
O atributo formnovalidate
O atributo novalidate é um atributo booleano.
Quando presente, especifica que o elemento <input> não deve ser validado.
quando enviado.
O atributo formnovalidate substitui o atributo novalidate do <form>
elemento.
O atributo formnovalidate pode ser usado com type="submit".
Exemplo
Um formulário com dois botões de envio (com e sem validação):
<formaction="action_page.php">
E-mail:<inputtype="email"name="userid"><br>
<inputtype="submit"value="Submit"><br>
<input type="submit" formnovalidate value="Enviar sem validação">
</form>
Experimente você mesmo »
O atributo formtarget
O atributo formtarget especifica um nome ou uma palavra-chave que indica onde para
exibir a resposta que é recebida após enviar o formulário.
O atributo formtarget substitui o atributo target do elemento <form>.
O atributo formtarget pode ser usado com type="submit" e type="image".
Exemplo
Um formulário com dois botões de envio, com diferentes janelas de destino:
<form action="action_page.php">
Primeiro nome:<input type="text" name="fname"><br>
Último nome:<input type="text" name="lname"><br>
<inputtype="submit"value="Submit as normal">
<input type="submit" formtarget="_blank">
value="Submit to a new window">
</form>
Tente você mesmo »
Os Atributos de altura e largura
Os atributos de altura e largura especificam a altura e a largura de um <input>
elemento.
Os atributos de altura e largura são usados apenas com <input type="image">.
Sempre especifique o tamanho das imagens. Se o navegador não souber o tamanho, a página irá
carregar.
Exemplo
Defina uma imagem como o botão de enviar, com atributos de altura e largura:
<input type="image" src="img_submit.gif" alt="Enviar" width="48" height
="48">
Experimente você mesmo »
A lista Atributo
The list attribute refers to a <datalist> element that contains pre-defined
opções para um elemento <input>.
Exemplo
Um elemento <input> com valores predefinidos em um <datalist>:
<inputlist="browsers">
<datalistid="navegadores">
<optionvalue="Internet Explorer">
<option value="Firefox">
<optionvalue="Chrome">
<optionvalue="Opera">
<option value="Safari">
</datalist>
Tente você mesmo »
Os atributos min e max
Os atributos min e max especificam o valor mínimo e máximo para um
<input> elemento.
Os atributos min e max funcionam com os seguintes tipos de entrada: número, intervalo,
date, datetime, datetime-local, month, time and week.
Exemplo
<input> elementos com valores mínimos e máximos:
Insira uma data antes de 1980-01-01:
<inputtype="date"name="bday"max="1979-12-31">
Insira uma data após 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantidade" min="1" max="5">
Try it Yourself »
O atributo múltiplo
O atributo múltiplo é um atributo booleano.
Quando presente, especifica que o usuário tem permissão para inserir mais de um valor.
no elemento <input>.
O atributo múltiplo funciona com os seguintes tipos de entrada: email e arquivo.
Exemplo
Um campo de upload de arquivo que aceita múltiplos valores:
Selecione imagens:<input type="file" name="img" multiple>
Experimente você mesmo »
O padrão Atributo
O atributo pattern especifica uma expressão regular que o elemento <input>
o valor é verificado em relação a.
O atributo pattern funciona com os seguintes tipos de entrada: texto, pesquisa, url, tel,
e-mail e senha.
Dica: Use o globaltitle atributo para descrever o padrão para ajudar o usuário.
Dica: Saiba mais sobreexpressões regularesem nosso tutorial de JavaScript.
Exemplo
Um campo de entrada que pode conter apenas três letras (sem números ou caracteres especiais
personagens):
Código do país:<input type="text" name="country_code" pattern="[A-Za-z]
{3}"title="Three letter country code">
Experimente você mesmo »
O atributo placeholder
O atributo placeholder especifica uma dica que descreve o valor esperado de
um campo de entrada (um valor de exemplo ou uma breve descrição do formato).
A dica é exibida no campo de entrada antes que o usuário insira um valor.
O atributo placeholder funciona com os seguintes tipos de entrada: texto, busca, URL,
tel, email e senha.
Exemplo
Um campo de entrada com um texto de espaço reservado:
<inputtype="text"name="fname"placeholder="First name">
Experimente você mesmo »
O atributo requerido
O atributo requerido é um atributo booleano.
Quando presente, especifica que um campo de entrada deve ser preenchido antes
enviando o formulário.
O atributo requerido funciona com os seguintes tipos de entrada: texto, pesquisa, url,
telefone, email, senha, selecionadores de data, número, caixa de seleção, rádio e arquivo.
Exemplo
Um campo de entrada obrigatório:
Username:<inputtype="text"name="usrname"required>
Experimente você mesmo »
O atributo Step
O atributo step especifica os intervalos numéricos legais para um elemento <input>.
Exemplo: se passo="3", os números legais poderiam ser -3, 0, 3, 6, etc.
Dica: O atributo step pode ser usado juntamente com os atributos max e min para
criar uma faixa de valores legais.
O atributo step funciona com os seguintes tipos de entrada: número, intervalo, data,
datetime, datetime-local, month, time and week.
Exemplo
Um campo de entrada com intervalos de números legais especificados:
<inputtype="number"name="points"step="3">