Notes - HTML5 - A Linguagem de Marcação de Hipertexto - HyperText Markup Language
Baseada em tags (marcas ou etiquetas)
Conteúdo: textos, imagens, vídeos, tabelas...
Tudo que esta na área head (cabeçalho) diz respeito ao comportamento do site e o
que esta na área body (corpo) diz respeito a tudo o que vai efetivamente aparecer
no site.
<!DOCTYPE html> • Indica que o documento atual sera escrito na versão mais
atualizada da linguagem (no caso, HTML5).
<html lang="en"> • Delimitam o documento HTML, que é sempre dividido em duas
partes: a cabeça e o corpo. Também estamos indicando que o conteúdo desse site será
no idioma Português do Brasil.
<head> • Delimita a cabeça da página, local onde são realizadas algumas
configurações iniciais como formatos, estilos, icone de favoritos, etc.
<meta charset="UTF-8"> • Adiciona ao documento atual o suporte a caracteres
acentuados.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> • Exclusiva para Internet
Explorer. Ela pode configurar a pág para ser renderizada como em outra versão do
Internet Explorer.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> • Indica
que o conteúdo aparecerå, por padrão, ocupando todo o espaço disponivel da tela e
com uma escala de 1:1.
<title>Document</title> • Configura o titulo da página, que aparecerá como
identificação da aba do navegador, ao lado do favicon.
</head> • Encerra a delimitação da cabeça da página.
<body> • Delimita o corpo da página, a maior porção do site que vai aparecer na
tela. É onde colocamos todo o conteúdo.
</body> • Encerra a delimitação da corpo.
</html> • Encerra a delimitação HTML da página.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento</title>
<style>
h1 {
color: white;
}
</style>
</head>
<body>
<h1>Título Escrito Legal</h1>
</body>
</html>
<!DOCTYPE HTML> esta tag não tem fechamento e serve apenas para dizer para o
navegador que tipo de site estamos mostrando
<h1></h1>
título (header)
<p></p>
parágrafo (paragraph)
<br>
quebra de linha (break row) ("enter")
Seletores Personalizados
Pode-se adicionar seletores aos elementos em HTML para torná-los "únicos" e poder
manipulá-los sem alterar o seu conjunto. Por exemplo, para manipular um <p>
específico e não todos os <p>'s.
São eles (mais usados): id (#)(elemento único) e class(.)(agrupar elementos
múltiplos). Ex.:
<div id="msg"></div> /div#tag + tab ja cria automatico/
No exemplo acima, a div recebeu o id "msg". Para criar algum elemento com id
rapidamente, basta fazer o que está inserido em / /.
**Ao utilizar um elemento com seletor em css, nos estilos, pode ser feito de duas
maneiras. Ex.:
<div id="msg"></div>
<style>
div#msg {
background-color: blue;
}
OU
#msg {
background-color: blue;
}
</style>
**É possível usar duas classes no mesmo elemento ou um id e uma classe, por
exemplo. Ex.:
"<h1 id="principal" class="destaque">"
OU
"<h2 class="avancado destaque">"
<div></div>
A tag <div> é um *container genérico (recipiente, algo que pode conter alguma
coisa) que serve para delimitar/selecionar elementos em uma escala de BLOCO, com o
objetivo de facilitar a identificação e a aplicação configurações de estilo
(formatação).
div = division = divisão
container génerico = não tem peso semântico
abrir uma div, por exemplo, e por uma ID /name, class funcionam igual
<div id="msg"></div> /div#tag + tab ja cria automatico/
daí em JavaScript dps, usa:
var d = window.document.getElementByID('msg')
**Pode se usar uma ancoragem para voltar a uma div específica. Ex.:
<h1 id='principal'>Criando Sites com HTML e CSS</h1>
<a href='#principal'>Clique para voltar ao início</a>
<strong></strong> (strong = forte)
negrito. muito utilizado para destacar termos ao longo de um parágrafo em um site.
Ex.: um site que fala sobre a Android, quando as palavras Android e Google
aparecessem, é válido envelopá-los com <strong>
<ins></ins>
inserido (sublinhado)
<em></em> (emphasis = ênfase)
itálico
<q></q> (quote = citar)
citação
ou
<blockquote></blockquote> (se usar o parâmetro cite:"URL", você mantém os direitos
autorais do autor ao citar a obra aqui, e no google podem encontrar pesquisando)
serve pra citações maiores. ele desloca a citação horizontalmente, destacando-a.
<abbr></abbr> (title:"significado da sigla")
sigla/abreviações
<meta charset='UTF-8'> // altera a formatação dos caracteres para o conjunto de
caracteres latinos (UTF8)
O <header> </header> serve delimitar um cabeçalho de maneira semântica*.
header = cabeçalho
O <img src=""> serve para inserir uma imagem.
img src = image source = origem da imagem (diretório)
<span> texto </span> vc deixa uma "marcação" p poder editar essa parte somente em
css
style="text-align: center;" dentro de um header pode alterar suas caracteristicas
de css (outros: left, right, justify[alinha os dois lados],
<sub></sub> texto menorzinho em baixo (subescrito)
<sup></sup> texto menorzinho em cima (sobrescrito)
<code></code> >> deixa as letras no modo mono-espaçadas, um jeito visualmente mais
adequado para códigos, mas principalmente, semânticamente, indica que tem um
código.
<pre></pre> serve p contar todos os enters e tudo, ele considera o texto do jeito q
vc escreveu, como se ja tivesse pré-formatado (add identação) // esses dois juntos
servem o mostrar um codigo na tela, elas arrumam p ficar direitinho
<body bgcolor="red"></body> muda a cor de fundo
em head-> <link rel="stylesheet" href="_css/estilo.css"> // pra colocar uma
formatação de style de fora do codigo(href é o nome e local do arquivo)
<nav></nav> área de navegação do site
LISTAS
ordered lists(ol) e unordered lists(ul) / li(list itens)<li> (</li> é opcional)
<ol><ul><li>
type (em style:
ol {
list-style-type: 1;
}
parametros para ol: type: decimal (nmr), decial leading zero (02/03/04/04), alpha
(letra br), roman (letra romana) (obsoletos: 1 (decimal); a/A (alpha); i/I
(romano);)
lista iniciar em algum nmr específico: <ol start="num">
parametros para ul: type: disc (bolinha fechada), circle (bolinha aberta), square
(quadrado)
lista inicar em alguma letra específica: <ul start='num'> (num = letra >> a=1, b=2,
c=3, ...)
list-style: none// tira as marcações da lista
list-style-position: inside/outside. // determina se as bolinhas da lista ficam
dentro ou fora.
list-style-type: '2714'; // troca o símbolo das ul por algum emoji. Ex.: U+2714.
Recorda o 2714 e acrescenta uma "\". Caso queira dar um espaço entre o símbolo e o
texto da lista, coloca '2714\0020\0020...etc' logo ao lado. (não é compatível com
todos os navegadores)
columns: 2; >> p dividir a lista em 2 colunas.
00a0 ou 0020 => espaço sem quebra.
LINKS
<a href:"" hreflang="pt-br" target="" rel="">"conteúdo"</a> //âncora. é a base p
criação de links (o parametro target:_blank faz abrir uma nova aba/ _self abre na
mesma).
./ ->> própria pasta /// ../ ->> volte uma página (pd ser usado mais de uma vez)
href="" ->> referência hypertexto (URL)
hreflang="pt-br" ->> indica ao navegador e aos softwares de tradução a pág original
do site
target="" ->> controla onde o site vai abrir o link (_blank {nova guia em branco
[ link externo - precisa da URL completa ]}, _self {nessa janela ou frame atual
[padrão] [ link interno ou local - n precisa da URL completa]}, _top {desfaz todos
os frames e abre no navegador completo}, _parent {similar ao top em uma ref. a
janela mãe}, nome-do-frame {caso esteja usando frames, indica o nome da janela a
abrir)
rel="" ->> indica a natureza do destino (next {prox parte do documento atual}, prev
{parte anterior do documento atual}, author {site do autor do artigo atual},
external {link para outro site que não faz parte desse}, nofollow {ele leva vc ao
site, porém, isso indica que vc n necessariamente dá o aval ao site}).
download="" ->> hypertexto com o nome do arquivo, ele baixa nos navegadores que
estiverem com essa opção liberada(URL) + type="" ->> indica ao navegador que tipo
de arquivo será baixado (https://www.iana.org/assignments/media-types/media-
types.xhtml) (pdf: application/pdf /// zip: application/zip /// text.html ///
text/css /// text/javascript /// video/mp4 /// video/webm /// video/ogg ///
video/H264 /// video/JPEG //// audio/aac /// mp3: audio/mpeg /// audio/ogg ///
audio/wav /// font/ttf /// image/jpeg /// image/png)
(não linkar número de whatsapp nem email)
<hr> (horizontal row) -> Cria uma linha
HTML Entities (list):
<
< (less than)
>
> (greater than)
Otimização de páginas para mecanismos de busca (SEO - Search Engine Optimization)
Lorem + enter ->> cria um parágrafo de texto inúteis. Caso queira um número
específico de palavras, coloca ao lado do código. Ex.: Lorem40 (40 palavras) (Lorem
Ipsum). Normalmente, no Lorem vem 30.
obsolete features html5 (tagas q sairam/sairão de uso) (W3C - consórcio responsável
por normatizar a HTML)
<adress></adress> ->> marca um endereço
ctrl + ; >> abrir comentário em html
<small></small> >> texto pequeno, rodapé
<span></span> Não tem valor semântico algum. Ela serve para demarcar algum elemento
na linha para receber alterações específicas.
definições (se buscadas no google, aparecem pro usuário)
<dl></dl> (definition list) >> definition list (cria a listinha)
<dt></dt> (definition term) >> termo a ser definido
<dd></dd> (definition description) >> descrição
Ex.:
<dl>
<dt>HTML</dt>
<dd>Linguagem de marcação para a criação do conteúdo de um site.</dd>
<dt>CSS</dt>
<dd>Linguagem de marcação para a criação do design de um site.</dd>
</dl>
<abbr> abreviações >>> <p><abbr title="Hyper Text Markup Language"HTML</abbr> para
criar sites.</p>
TIPOS DE CAIXAS
block-level >> sempre se inicia em uma nova linha e ocupa a largura total do
elemento onde está contido. Caso não esteja contido em outra caixa, ele ocupa 100%
da width do <body>. O mais conhecido é o <div> e suas variações semântica: <main>,
<section>, <aside>, etc.
Exs. Gerais: <figure>, <footer>, <form>, <h1> - <h6>, <ol>, <p>, <ul>, <video>,
<header>, etc.
inline-level >> começa do ponto exato onde foram deifinidos e não necessariamente
em uma nova linha. A sua largura ocupa apenas o tamanho relativo ao seu conteúdo.
Exs. Gerais: <a>, <abbr>, <br>, <button>, <code>, <img>, <input>, <output>,
<object>, <q>, <script>, <span>, <strong>, <var>.
Tag display: caso queira transformar um elemento inline em um block ou vice-versa,
utiliza-se - display: inline; (ñ se pode usar width e hight com elementos inline)
ou display: block; ou display: inline-block; (o elemento assume características
inline mas também recebe algumas características de block como width e height)
TAGS SEMÂNTICAS
Header >> Cria áreas relativas a CABEÇALHOS. Seja ele um cabeçalho principal de um
site ou até de uma seção ou artigo. Normalmente possui títulos h1 - h6 e menus de
navegação (<nav>).
Nav >> Define uma área que possui links de NAVEGAÇÃO pelas páginas que vão compor o
site. Um <nav> pode estar dentro de um <header>.
Main >> Delimita o conteúdo PRINCIPAL de um site. Normalmente possui seções,
artigos e conteúdos periféricos.
Section >> Cria seções para sua página. Pode conter o conteúdo diretamente no seu
corpo ou dividir os conteúdos em artigos (<article>) com conteúdos específicos.
Segundo a W3C: "é um agrupamento temático de conteúdos, tipicamente com um
cabeçalho".
Article >> Contém um conteúdo que pode ser lido de forma independente e diz
respeito a um mesmo assunto. Podemos usar um <article> para delimitar um psot de
blog ou fórum, uma notícia, etc.
Aside >> Delimita um conteúdo periférico e complementar ao conteúdo principal de um
artigo ou seção.Normalmente, seu conteúdo está posicionado ao lado de um
determinado texto ou até mesmo no meio dele.
(pode ter um article dentro de uma section ou uma section dentro de um article. Não
existem limitações quanto a isso.)
Footer >> Cria um rodapé para o site inteiro, seção ou artigo. Não faz parte do
conteúdo principal e nem é um conteúdo periférico; possui informações sobre a
autoria do conteúdo, links adicionais, mapa do site e documentos relacionados.
Ex.:
<body>
<header></header>
<nav></nav>
<main>
<section>
<article></article>
</section>
<aside></aside>
</main>
<footer></footer>
</body>
Separar caixa em duas/2 colunas ou mais
em um seletor
div {
column-count: 2;
}
Planejador Online gratuito de interface >> mockflow.com
símbolos html5 --> tem vários símbolos
FORMULÁRIOS SEMÂNTICOS EM HTML5
Deve estar dentro da tag <form></form>. Tudo que estiver dentro desse par de tags
será considerado como conteúdo dos campos. É interessante que todos os "grupos" de
inputs, sejam eles com fieldset, legenda, label e input ou somente label e input
estejam agrupados por tags <p>.
>Tag <form></> (formulário) = deve receber os seguintes atributos: method e action.
O "method" indica o método de envio dos dados e o "action" indica para onde os
dados serão enviados.
>Tag <label></> (etiqueta/legenda) = para criar uma relação entre o campo (caixa de
texto, por exemplo) e seu identificador, utilizamos esta tag. Na <label> é inserido
um "for=" e para que a relação funcione, é necessário colocar o for como id no
input correspondente.
Ex.:
<form method="get" action="cadastro.php">
<label for="camponome">Nome:</label>
<input type="text" name="fnome" id="camponome">
<input type="submit" value="Enviar">
</form>
*Obs.: os identificadores ' name="" ' e ' id="" ' são úteis para a identificação na
linguagem de script posteriormente. O name é mais útil para HTML e PHP, já o id, é
mais útil para JavaScript (o submit normalmente n precisa de identificador) (em
name normalmente se usa "f+nome do campo" e em id "campo+nomedocampo").
>Tags para formulários:
[method] Métodos para enviar dados dos formulários = põe ' method="" ' no <form>.
Esse method pode receber dois atributos: get (apelidado de jet) e post (os dados
fornecidos quando o method é "get" aparecem na url. Já com o post, é necessário ir
em DevTools > Aba Network > Clica duas vezes no arquivo configurado na chamada do
action do formulário > Payload {o lado do header}. E lá estará os dados.). Cada um
possui características distintas, mas os utilizaremos nas seguintes ocasiões:
GET: quando os dados a serem enviados não sejam sensíveis como endereços,
números de documentos, senhas, etc // quando tivermos formulários simples que
possam facilmente ser compartilhados por uma URL // quando os dados a serem
enviados nunca ultrapassem 3000 bytes // não contenha envio de arquivos como
imagens, arquivos pdf, etc (condensa todos os dados digitados pelo visitante e
envia como parte do endereço acessado) (+rápido).
POST: quando não queremos que os dados apareçam explicitamente na URL do
navegador // quando capturamos dados como senhas, documentos, etc // quando
precisamos enviar muitos dados (acima de 3000 bytes ~ sem limites) // quando
precisamos enviar imagens ou outro tipo de arquivos (pega os dados enviados e envia
diretamente no corpo da requisitção HTTP que será feita quando seu visitante clicar
para enviar o formulário) (+lento).
[action] "Salvar" os dados para utilização em um script = põe '
action="cadastro.php" ' no <form>. cadastro.php é um exemplo de linguagem que pode
ser utilizada (mais utilizada nesses casos), porém, é possível utilizar outras no
lugar. O importante é adicionar alguma para que o formulário execute a ação quando
o usuário pressionar o submit.
[autocomplete]= no <form>, põe ' autocomplete="off" '. (a tag tbm recebe "on"). Se
usado em conjunto com o atributo "autocomplete" nos inputs, é possível caracterizá-
los.
[fieldset / legend] = no <form>, envelopa os inputs que pertencem a um mesmo grupo
e põe dentro da tag <fieldset></>. Após isso, pode-se colocar uma legenda
(<legend></>) antes dos inputs, que conterá a descrição dos elementos daquele
grupo. Ex.: 3 inputs, Nome, Email e telefoe. Envelopa-se e coloca a legenda Dados
Pessoais, sem <p>.
>Tipos de input e suas tags:
Gerais = "required": exige que o campo esteja preenchido para que o submit
funcione) // ' placeholder="" ' deixa escrito algo na caixa de texto como uma dica
(Ex.: em campo para nome, se coloca "Nome" como placeholder) // ' autocomplete="" '
Recebe diversos parâmetros mas só funciona caso no <form>, o autocomplete esteja
ligado. Serve para adicionar uma identificação aos inputs para que o navegador
idenfique (Ex.: autocomplete="current-password"). //
:text (texto) = permite digitar textos. Tags: ' min-length="" e max-length="" '
servem para determinar a quantidade mínima e máxima de caracteres do campo (Ex.:
3/8/10 {nmr em formato de dígito}) // ' size="" ' determina o comprimento da caixa
(Ex.: 10)
:password (senha) = ao digitar, os caracteres tornam-se símbolos. Tags: ' min-
length="" e max-length="" ' servem para determinar a quantidade mínima e máxima de
caracteres do campo (Ex.: 3/8/10 {nmr em formato de dígito}{min 8 max 15 ou 20,
talvez) // ' size="" ' determina o comprimento da caixa (Ex.: 10)
:number (número) = permite digitar números. Tags: ' min="" e max="" ' determinam o
valor mínimo a ser inserido no formulário numérico // ' step="" ' serve para
determinar o "passo", ou seja, de quanto em quanto o valor muda. Para média de
escola, normalmente se usa "0.5" (5,5/6,0/6,5/... de meio em meio ponto) ou "0.1"
(6,1/6,2/6,3/6,4/... de 0,1 décimos) // ' value="" ' acrescenta um valor que já
estará no campo quando o usuário acessar o site. Diferentemente do placeholder,
esse valor é "editável". É interessante usar para inputs do tipo month. (Ex.:
value="2023-08" >> significa agosto de 2023.) ///// **Obs: Não é compatível com o
safari (macbook) (2020).
:month (mes) = permite digitar ano e mês. Tags: a maioria de suas tags seguem um
padrão de ' "ano"-"mês" '. Ex.: 2020-08 (agosto de 2020).: ' value="" ' acrescenta
um valor que já estará no campo quando o usuário acessar o site. Diferentemente do
placeholder, esse valor é "editável" (Ex.: value="2023-08" >> significa agosto de
2023. // ' min="" e max="" ' determinam o valor mínimo a ser inserido no formulário
numérico ///// **Obs.: não é compatível com o firefox nem com o safari (macbook)
(2020).
:date (data) = permite digitar dia/mês/ano. Tags: a maioria de suas tags seguem um
padrão de ' "ano"-"mes"-"dia" '. Ex.: 2021-02-13 (13 de fevereiro de 2021).: '
value="" ' acrescenta um valor que já estará no campo quando o usuário acessar o
site. Diferentemente do placeholder, esse valor é "editável" (Ex.: value="2023-08-
01" >> significa 1 de agosto de 2023. // ' min="" e max="" ' determinam o valor
mínimo a ser inserido no formulário numérico. /////**Obs.: Não é compatível com o
safari (macbook) (2020).
:time (tempo) = permite digitar hora/minutos. Tags: /////**Obs.: Não é compatível
com o safari (macbook) (2020).
:email (email) = permite digitar texto e exige que tenha @. Tags: ' min-length="" e
max-length="" ' servem para determinar a quantidade mínima e máxima de caracteres
do campo (Ex.: 3/8/10 {nmr em formato de dígito} {50 p max lenght talvez}) // '
size="" ' determina o comprimento da caixa (Ex.: 30, talvez)
:tel (telefone) = permite digitar texto (para "padronizar"/regulamentar, precisa
utilizar 'expressões regulares (RegEx)'.
[0-9]{4} >> indica que teremos 4 números, com dígitos de 0 a 9.
[\s] >> indica que teremos um espaço
Obs.: qlqr caractere especial entre as aspas entra no padrão.
Ex.: required pattern= " ^([0-9]{2})[\s][9]{1}[0-9]{4}-[0-9]{4}$ " ou " ^(\d{2})
[\s][9]{1}\d{4}-\d{4}$ " placeholder="(xx) 9xxxx-xxxx" Isso faz com que só aceite
números com ddd na frente, seguido de 9 na frente, seguidos de 4 dígitos de 0-9,
com hífen, e dps mais quatro desses). Tags: ' min-length="" e max-length="" '
servem para determinar a quantidade mínima e máxima de caracteres do campo (Ex.:
3/8/10 {nmr em formato de dígito}) // ' size="" ' determina o comprimento da caixa
(Ex.: 10)
:checkbox {c} (caixa de seleção múltipla) = permite criar uma opção para o usuário
selecionar. !!!Pode selecionar mais de uma por vez, diferindo do radio. Para
funcionar bem, cria-se um fieldset com legend e põe em cada opção, um checkbox e um
label referente. Tags: ' checked ' Faz com que a opção já esteja selecionada ao
carregar o site (bom para fazer checkbox para aceitar termos e condições. O texto
pode ir dentro do label, sem <p>, mas com um <a> com o link para os termos). Ex.:
<p><fieldset>
<legend>Esportes Favoritos</legend>
<input type="checkbox" name="fesfut" id="iesfut">
<label for="iesfut">Futebol</label>
<input type="checkbox" name="fesvol" id="iesvol">
<label for="iesvol">Vôlei</label>
</fieldset></p>
:radio {r} (caixa de seleção única) = permite criar uma opção para o usuário
selecionar. !!! Não pode selecionar mais de uma por vez, só uma entre todas as
outras opções, diferindo do checkbox. Para funcionar bem, cria-se um fieldset com
legnd e põe em cada opção, um radio e um label referente. É importante colcoar um '
value="" ' em cada uma das opções referindo-se a ela mesma para que os dados sejam
melhor carregados. **Obs.: para que só seja possível selecionar um ou outro
corretamente, é necessário que todas as opções tenham o mesmo "name". O ID pode ser
diferente e será utilizado para ligar ao label. Tags: ' checked ' Faz com que a
opção já esteja selecionada ao carregar o site. Ex.:
<p><fieldset>
<legend>Sexo</legend>
<input type="radio" name="fsex" id="isexmasc" value="M">
<label for="isexmasc">Masculino</label>
<input type="radio" name="fsex" id="isexfem" value="F">
<label for="isexfem">Feminino</label>
</fieldset></p>
:color (cor) = permite criar um campo onde o usuário pode mexer numa grade de cores
em diversos formatos (rgb, hexadecimal, hsl...) e escolhe a tonalidade (css
funciona para aumentar o tamanho do quadrado, mas border-radius n cai mt bem a
partir de um certo tamanho 25px). Tags: value serve para determinar a cor inicial.
Ex.: value="#ff0000" // Ex.:
<p>
<label for="icor">Cor: </label>
<input type="color" name="fcor" id="icor" value="#ff0000">
</p>
:range ("faixa") = cria uma escala (por padrão, de 0 a 100 com o value="" inicial
de 50). Tags: pode-se usar min="" (bom usar 0) e max="" para determinar onde
começar e termina e pode-se usar value="" para determinar onde estará a range ao
carregar o site (para que o valor do range seja mostrado e atualizado
constantemente para o usuário, utiliza-se output (olhar em tags em input abaixo).
:file (arquivo) = cria um campo para o usuário inserir um arquivo do aparelho (para
funcionar adequadamente, é necessário estar utilizando o method="post" no <form>).
Para capturar o arquivo e fazer as configurações é necessário JavaScript. Tags: '
accept="image/*" ' faz com que só seja possível colocar imagens
>Tags que não são inputs:
<select></> : serve para criar uma caixa de seleção com opções (<options></>). Deve
conter um name e um id. Dentro dela, vai as tags <options></> (serão as opções da
caixa de seleção). As <options> recebem um ' value="" ' (deverá conter a
informação/valor que o action do form vai cadastrar) e dentro, deve conter (sem
<p>) o nome que a opção aparecerá na caixa (ao colocar ' selected ' na tag options,
esta aparecerá como selecionada para o usuário ao carregar o site). Você também
pode criar um <optgroup></> com um ' label="" ' dentro para criar grupos dentro da
caixa de seleção que aparecerão para o usuário como categoria mas ele não poderá
selecionar a opção do label. *Obs: para criar uma option em branco ou contendo "---
Escolha---", basta criá-la acima de todas as options e colocar selected. Ex.:
<label for="iest">Estado</label>
<select name="fest" id="iest" required>
<option value="" disabled selected>--Escolha--</option>
<optgroup label="Região Sudeste">
<option value="MG">Minas Gerais</option>
<option value="SP">São Paulo</option>
<option value="RJ">Rio de Janeiro</option>
</optgroup>
<optgroup label="Região Nordeste">
<option value="PE">Pernambuco</option>
<option value="PB">Paraíba</option>
<option value="RN">Rio Grande do Norte</option>
</optgroup>
</select>
**OBS.: para não deixar o usuário enviar o formulário sem escolher uma opção do
select podemos deixar a option -Escolha- com os atributos disabled e selected e
na tag select deixar o atributo required.
<datalist></>: serve para criar uma caixa de seleção com opções, porém, com
possibilidade de o usuário digitar uma opção diferente. É necessário um label >
ligado a um input:text, o qual terá name="", id="" e list="" (o list conterá o id
do <datalist></>) > ligado a um <datalist> com um id="" (talvez, lsttexto, sendo
texto o conteúdo da lista, ex.: lstprof (profissões)). Dentro do <datalist>,
podemos ter vários <options>, porém, sem os ' value="" '. Ex.:
<label for="iprof">Profissão</label>
<input type="text" name="fprof" id="iprof" list="lstprof">
<datalist id="lstprof">
<option>Desenvolvedor(a) Front-End</option>
<option>Desenvolvedor(a) Back-End</option>
<option>Médico(a)</option>
<option>Enfermeiro(a)</option>
<option>Advogado(a)</option>
<option>Juíz(a)</option>
</datalist>
<textarea></>: serve para criar uma caixa de texto para o usuário digitar uma
mensagem grande. Recebe name e id e é customizável quanto ao tamanho de colunas
(cols) e linhas (rows) (talvez, 30 e 10 respectv.). Para evitar que o usuário
modifique o tamanho, basta usar
' style="resize: none;" '. Para limitar a quantidade de caracteres, usamos
maxlength="" (**Obs.: caso queira encontrar um número aproximado para o maslength,
multiplica o valor de cols e rows e divide esse resultado por 0,945 {valor
aproximado, se o produto da primeira conta for maior q 300, aumenta esse valor um
pouco {em 0,015 a cada 100 [ex.: 400], talvez)). É possível acrecentar um
placeholder (Ex.: Escreva aqui...) mas para isso, não pode ter espaço nem enter
entre a tag <textarea> e a </textarea> (seu fechamento). Ex.:
<label for="imsg">Mensagem: </label><br>
<textarea name="fmsg" id="imsg" cols="30" rows="10" style="resize:
none;" maxlength="320" placeholder="Escreva
aqui..."></textarea>
*Obs¹.: é interessante colocar um <br> após o </label> para mover a caixa de texto
para abaixo da label "Mensagem:".
*Obs².: para funcionar adequadamente, é ideal estar utilizando o method="post" no
<form> pois com get não se pode ultrapassar o limite de bytes.
<output></>: é um elemento de saída utilizado somente para fins de exibição (pode
injetar os resultados de um cálculo ou de uma ação do usuário, por exemplo). Por
ser um elemento de saída ele deve estar associado a um script. Funciona da seguinte
maneira: o input que capta dados do usuário receberá um ' oninput="" ' com o código
(JavaScript) que utilizará os ids (tanto do input quanto do output) para realizar
funcionalidades/cálculos (atalho do vscode = out)
¹Ex. de soma:
<form action="cadastro.php" method="get" autocomplete="on">
<p>
<label for="in1">Número 1: </label>
<input type="number" name="fn1" id="in1" min="0" max="50" required
oninput="isoma.innerHTML = Number(in1.value) +
Number(in2.value)">
</p>
<p>
<label for="in2">Número 2: </label>
<input type="number" name="fn2" id="in2" min="0" max="50" required
oninput="isoma.innerHTML = Number(in1.value) +
Number(in2.value)">
</p>
<p>
<label for="isoma">Soma: </label>
<output name="fsoma" id="isoma">0</output>
</p>
</form>
²Ex. de range:
<form action="cadastro.php" method="get" autocomplete="on">
<p>
<label for="inum">Número: </label>
<input type="range" name="fnum" id="inum" min="0" max="10"
value="5" oninput="ival.innerHTML = Number(inum.value)">
<output name="fval" id="ival">5</output>
</p>
<p>
<input type="submit" value="Enviar">
<input type="reset" value="Limpar">
</p>
</form>
³Ex. de cálculo de idade (com javascript na tag ao invés de oninput.):
<form action="cadastro.php" method="get" autocomplete="on">
<p>
<label for="iano">Em que ano você nasceu?</label>
<input type="number" name="ano" id="iano" min="1900" max="2023"
oninput="calcIdade()">
</p>
<p>
<label for="iidade">Sua idade é:</label>
<output id="iidade">0</output>
</p>
<p id="teste">
<input type="submit" value="Enviar">
<input type="reset" value="Limpar">
.
</p>
</form>
<script>
function calcIdade() {
let atual = new Date().getFullYear();
iidade.innerHTML = Number(atual) - Number(iano.value);
}
</script>
