Em HTML é um elemento importante do formulário HTML. O atributo 'type' do elemento de entrada pode ser de vários tipos, o que define o campo de informação. Tal como fornece uma caixa de texto.

A seguir está uma lista de todos os tipos de elementos de HTML.

HTML5 adicionou novos tipos de elemento. A seguir está a lista de tipos de elementos do HTML5

A seguir está a descrição sobre os tipos de elementos com exemplos.

1.:

elemento do tipo 'texto' é usado para definir um campo de texto de entrada de linha única.

Exemplo:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 

Saída:

Insira o tipo de 'texto':

O 'texto' field define um campo de texto de entrada de linha única.

Observação: O comprimento máximo padrão do caractere é 20.

2.:

O elemento do tipo 'senha' permite que um usuário insira a senha com segurança em uma página da web. O texto digitado no campo de senha é convertido em '*' ou '.', para que não possa ser lido por outro usuário.

Exemplo:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Saída:

classificação de pilha

Insira o tipo de 'senha':

O 'senha' campo define um campo de senha de entrada de linha única para inserir a senha com segurança.

3.:

O elemento do tipo 'submit' define um botão de envio para enviar o formulário ao servidor quando ocorrer o evento 'clique'.

Exemplo:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Saída:

Digite o tipo 'enviar':

Após clicar no botão enviar, o formulário será enviado ao servidor e redirecionará a página para Ação valor. Aprenderemos sobre o atributo 'ação' em capítulos posteriores

4.:

O tipo 'reset' também é definido como um botão, mas quando o usuário executa um evento de clique, por padrão ele redefine todos os valores inseridos.

Exemplo:

 User id: Password: <br> <br> 

Saída:

Digite o tipo 'reset':

Tente alterar os valores de entrada de ID de usuário e senha e, ao clicar em redefinir, os campos de entrada serão redefinidos com os valores padrão.

5.:

O tipo 'radio' define os botões de opção, que permitem escolher uma opção entre um conjunto de opções relacionadas. Por vez, apenas uma opção de botão de opção pode ser selecionada por vez.

Exemplo:

Por favor, selecione sua cor favorita

Saída:

Digite o tipo 'rádio'

Por favor, selecione sua cor favorita

6.:

O tipo 'caixa de seleção' é exibido como caixas quadradas que podem ser marcadas ou desmarcadas para selecionar as opções fornecidas.

Nota: Os botões de opção são semelhantes às caixas de seleção, mas há uma diferença importante entre os dois tipos: os botões de opção permitem ao usuário selecionar apenas uma opção por vez, enquanto a caixa de seleção permite ao usuário selecionar de zero a várias opções por vez. .

Exemplo:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 

Saída:

Insira o tipo 'caixa de seleção'

Formulário de registro

Por favor, selecione seus esportes favoritos

7.:

O tipo 'botão' define um botão simples, que pode ser programado para controlar funcionalmente qualquer evento, como um evento de clique.

Nota: Funciona principalmente com JavaScript.

Exemplo:

Saída:

Insira o tipo de 'botão'.

Clique no botão para ver o resultado:

Nota: No exemplo acima usamos o ‘alert’ de JS, que você aprenderá em nosso tutorial de JS. É usado para mostrar uma janela pop.

8.:

O elemento do tipo 'arquivo' é usado para selecionar um ou mais arquivos do armazenamento do dispositivo do usuário. Depois de selecionar o arquivo e após o envio, ele pode ser carregado no servidor com a ajuda do código JS e da API de arquivo.

Exemplo:

 Select file to upload: 

Saída:

Insira o tipo de 'arquivo'.

Podemos escolher qualquer tipo de arquivo até que não o especifiquemos! O arquivo selecionado aparecerá ao lado da opção ‘escolher arquivo’

9.:

O tipo 'imagem' é usado para representar um botão de envio em forma de imagem.

Exemplo:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br> 

Elemento de tipos HTML5 recém-adicionado

1.:

O tipo 'cor' é usado para definir um campo de entrada que contém uma cor. Ele permite que um usuário especifique a cor pela interface visual de cores em um navegador.

Nota: O tipo 'color' suporta apenas valores de cor em formato hexadecimal e o valor padrão é #000000 (preto).

Exemplo:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 

Saída:

Tipos de 'cor' de entrada:

Observação: O valor padrão do tipo 'cor' é #000000 (preto). Ele suporta apenas valores de cores em formato hexadecimal.

código abs c

2.:

O elemento do tipo 'data' gera um campo de entrada, que permite ao usuário inserir a data em um determinado formato. Um usuário pode inserir a data por campo de texto ou pela interface do seletor de data.

Exemplo:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 

Saída:

Insira o tipo de 'data'

3.:

O elemento do tipo 'datetime-local' cria campos de entrada que permitem ao usuário selecionar a data e a hora local em hora e minuto sem informações de fuso horário.

Exemplo:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 

Saída:

Insira o tipo 'datetime-local'

4.:

O tipo 'email' cria um campo de entrada que permite ao usuário inserir o endereço de e-mail com validação de padrão. Os múltiplos atributos permitem que um usuário insira mais de um endereço de e-mail.

Exemplo:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b> 

Saída:

Insira o tipo de 'e-mail'

Observação: O usuário também pode inserir vários endereços de e-mail separados por vírgula ou espaço em branco da seguinte forma:

5.:

O tipo 'mês' cria um campo de entrada que permite ao usuário inserir facilmente o mês e o ano no formato 'MM, AAAA' onde MM define o valor do mês e AAAA define o valor do ano. Novo

Exemplo:

 Enter your Birth Month-year: 

Saída:

Digite o tipo 'mês':

6.:

O tipo de elemento número cria um campo de entrada que permite ao usuário inserir o valor numérico. Você também pode restringir a inserção de um valor mínimo e máximo usando os atributos min e max.

Exemplo:

 Enter your age: 

Saída:

mapear iterador java

Insira o tipo de 'número'

Observação: Isso permitirá inserir números no intervalo de 50 a 80. Se você quiser inserir um número diferente do intervalo, será exibido um erro.

7.:

O elemento do tipo 'url' cria um campo de entrada que permite ao usuário inserir a URL.

Exemplo:

 Enter your website URL: <br> 

Saída:

Insira o tipo de 'url'

8.:

O tipo semana cria um campo de entrada que permite ao usuário selecionar uma semana e um ano no calendário suspenso sem fuso horário.

Exemplo:

 <b>Select your best week of year:</b> <br> <br> 

Saída:

Insira o tipo 'semana'

9.:

O tipo 'pesquisa' cria um campo de entrada que permite ao usuário inserir uma string de pesquisa. Eles são funcionalmente simétricos ao tipo de entrada de texto, mas podem ter estilos diferentes.

Exemplo:

 Search here: 

Saída:

Insira o tipo de 'pesquisa'

10.:

O elemento do tipo ?tel? cria um campo de entrada para inserir o número de telefone. O tipo 'tel' não possui validação padrão como email, pois o padrão do número de telefone pode variar em todo o mundo.

Exemplo:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 

Saída:

Insira o tipo 'tel'

Observação: Aqui estamos usando dois atributos que são 'padrão' e 'obrigatório' que permitirão ao usuário inserir o número em determinado formato e é necessário inserir o número no campo de entrada.