Os atributos HTML permitem que você execute tarefas muito mais complexas diretamente em seus arquivos HTML. Aqui estão alguns dos mais úteis de conhecer!
HTML é o bloco de construção da web. Conhecer algumas partes menos conhecidas, mas úteis, dessa linguagem de marcação pode tornar sua vida muito mais fácil. Os atributos HTML fornecem vários recursos que podem ajudá-lo a obter o máximo do HTML. Ele define características ou propriedades adicionais de um elemento HTML.
Neste artigo, você aprenderá sobre 11 atributos HTML dos quais provavelmente ainda não ouviu falar.
1. múltiplo
Este atributo permite que os usuários insiram vários valores. Você pode usar o atributo múltiplo com tags <input> e tags <select> . Este atributo booleano é válido apenas para e-mail ou tipos de entrada de arquivo.
Usando vários atributos com tag <select>
<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>Usando vários atributos para entrada de arquivo
Ao usar o atributo múltiplo para entrada de arquivo, você pode selecionar vários arquivos (segurando as teclas Shift ou Ctrl ).
<input type="file" multiple>Usando vários atributos para entrada de e-mail
Usando o atributo múltiplo para entrada de e-mail, você pode inserir uma lista de endereços de e-mail separados por vírgula. Todos os espaços em branco serão removidos de cada endereço na lista.
<input type="email" multiple>2. contenteditable
Você pode tornar o conteúdo HTML editável em uma página da web usando o atributo contenteditable. Este é um atributo global, ou seja, é comum a todos os elementos HTML.
<p contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>3. verificação ortográfica
O atributo spellcheck especifica se o elemento pode ser verificado quanto a erros ortográficos ou não. Você pode verificar a ortografia do texto nos elementos <textarea> , texto nos elementos editáveis ou texto nos elementos de entrada (exceto senhas).
<p contenteditable="true" spellcheck="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>4. download
Você pode baixar um recurso usando o atributo download. O atributo download informa ao navegador para baixar o URL especificado em vez de navegar até ele. Você pode usar o atributo de download com a tag <a> e a tag <area> .
Observação : o atributo de download funciona apenas com URLs da mesma origem. Segue as regras da política de mesma origem .
<a href="xyz.png" download="myImage">Download</a>5. aceitar
O atributo de aceitação da tag <input> especifica o tipo de arquivos que um usuário pode carregar. Você pode especificar uma lista separada por vírgulas de um ou mais tipos de arquivo como seu valor.
Aceitando um arquivo de áudio
<input type="file" id="audioFile" accept="audio/*">Aceitando um arquivo de vídeo
<input type="file" id="videoFile" accept="video/*">Aceitando um arquivo de imagem
<input type="file" id="imageFile" accept="image/*">Aceitando um arquivo do Microsoft Word
<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">Aceitando arquivos PNG ou JPEG
<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">Aceitando um arquivo PDF
<input type="file" id="pdfFile" accept=".pdf">6. traduzir
O atributo translate informa ao navegador que o elemento deve ser traduzido ou não quando a página é localizada. Pode ter 2 valores: “sim” ou “não”.
<p translate="no">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>7. pôster
O atributo poster é usado para mostrar uma imagem durante o download do vídeo ou até que o usuário reproduza o vídeo.
Nota : Se você não especificar nada, nada será exibido até que o primeiro quadro esteja disponível. Quando o primeiro quadro está disponível, ele é mostrado como o quadro de pôster.
<video controls
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>8. modo de entrada
O atributo inputmode indica ao navegador qual teclado exibir quando um usuário selecionar qualquer elemento de entrada ou textarea. Este atributo aceita vários valores:
Nenhum
<input type="text" inputmode="none" />Numérico
<input type="text" inputmode="numeric" />Tel
<input type="text" inputmode="tel" />Decimal
<input type="text" inputmode="decimal" /><input type="text" inputmode="email" />URL
<input type="text" inputmode="url" />Procurar
<input type="text" inputmode="search" />9. padrão
O atributo pattern do elemento <input> permite que você especifique uma expressão regular para a qual o valor do elemento será validado. Você pode usar o atributo padrão com vários tipos de entrada como texto, data, pesquisa, URL, tel, e-mail e senha.
<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>10. autocomplete
O atributo autocomplete especifica se o navegador deve completar automaticamente a entrada com base nas entradas do usuário ou não. Você pode usar o atributo autocomplete com vários tipos de entrada como texto, pesquisa, URL, telefone, e-mail, senha, selecionadores de data, intervalo e cor. Você pode usar este atributo com os elementos <input> ou elementos <form> .
<input name="credit-card-number" id="credit-card-number" autocomplete="off">11. foco automático
O atributo autofocus é um atributo booleano que indica que um elemento deve ser focado no carregamento da página. Você pode usar este atributo com os elementos <button> , <input> , <keygen> , <select> ou <textarea> .
Usando o atributo de foco automático com elemento de entrada
<input type="text" autofocus>Usando o atributo de foco automático com o elemento selecionado
<select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>Usando o atributo de foco automático com elemento textarea
<textarea autofocus>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</textarea>Se você quiser dar uma olhada no código-fonte completo usado neste artigo, verifique o repositório GitHub .
Facilite sua vida com JavaScript One-Liners
O código de uma linha ajuda a conseguir mais com menos código. Você pode usar várias linhas simples de JavaScript para codificar como um profissional.
Com apenas uma linha de código, você pode embaralhar um array, encontrar a média de um array, verificar se um array está vazio, gerar uma cor hexadecimal aleatória, gerar um UUID aleatório e assim por diante.