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 e Tag. Este atributo booleano é válido apenas para e-mail ou tipos de entrada de arquivo.
Usando vários atributos com
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 o Mudança ou Ctrl chaves).
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.
2. conteúdo editável
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, exercício quis nostrud
ullamco laboris nisi ut aliquip ex e a commodo consequat.
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 no elementos, texto nos elementos editáveis ou texto nos elementos de entrada (exceto senhas).
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 exercício
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Relacionado: A folha de referências do HTML Essentials: tags, atributos e Mais
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 e a tag .
Nota : O atributo de download só funciona com URLs da mesma origem. Ela segue as regras da política de mesma origem .
Download 5. aceitar
O atributo aceitar da tag especifica o tipo de arquivos que um usuário pode enviar. Você pode especificar uma lista separada por vírgulas de um ou mais tipos de arquivo como seu valor.
Aceitando um arquivo de áudio
Aceitando um arquivo de vídeo
código> Aceitando um arquivo de imagem
código> Aceitando um arquivo do Microsoft Word
aceitar = ". doc, .docx, aplicativo / msword, application / vnd.openxmlformats-officedocument.wordprocessingml.document "> Aceitando arquivos PNG ou JPEG
Aceitando um arquivo PDF
Relacionado: efeitos HTML interessantes que qualquer um pode adicionar aos seus sites
6. translate
O atributo translate diz ao navegador que o elemento deve ser traduzido ou não quando a página é localizada. Pode ter 2 valores: "sim" ou "não".
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 exercício
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Relacionado: Exemplos de código HTML simples que você pode aprender em 10 Minutos
7. poster
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 seja acessível. Quando o primeiro quadro está disponível, ele é mostrado como o quadro do pôster.
poster="posterImage.png">
8. inputmode
O atributo inputmode indica ao navegador qual teclado exibir quando um usuário selecionar qualquer elemento input ou textarea. Este atributo aceita vários valores:
Nenhum
pre >Numérico
Tel
Decimal
URL
Pesquisa
9. pattern
O atributo pattern do elemento permite que você especifique uma expressão regular para a qual o valor do elemento será validado. Você pode usar o atributo pattern com vários tipos de entrada como texto, data, pesquisa, URL, tel, e-mail e senha.
Relacionado: melhores sites para Exemplos de codificação de HTML de qualidade
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 ou elementos.
11. autofocus
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 , ,
, , ou elementos. Usando o atributo autofocus com elemento de entrada
< / code>Usando o atributo autofocus com o elemento select
Usando o atributo autofocus com elemento 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.
11 JavaScript One-Liners que você deve conhecerObtenha muito com apenas um pouco de código, usando essa ampla variedade de linhas simples de JavaScript.
Leia a seguir
CompartilhadoTweetE-mailTópicos relacionadosSobre o autor
- Programação
- HTML
- Linguagens de programação
- Dicas de codificação
Yuvraj Chandra (78 artigos publicados)Mais de Yuvraj ChandraYuvraj é estudante de graduação em Ciência da Computação na Universidade de Delhi, na Índia. Ele é apaixonado por Full Stack Web Development. Quando não está escrevendo, ele está explorando a profundidade de diferentes tecnologias.
Assine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever
