Tipos de entrada HTML

Os tipos de entrada de formulário HTML são discutidos nesta seção. O elemento HTML <input> tem vários tipos que são discutidos neste capítulo.

Listados abaixo estão os diferentes tipos de entradas de formulário HTML que você pode usar em HTML:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

Dica: Uma dica útil sobre tipos de entrada de formulário HTML é que o valor “text” da propriedade type é sempre usado como padrão.

Índice-

O tipo de entrada Texto:

Um campo de entrada de texto de linha única é determinado pelo atributo <input type=”text”> no tipo de entrada html :

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">Owner First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um navegador exibirá o código HTML acima da seguinte maneira:

Primeiro nome:

Sobrenome:

A entrada de texto também pode ser limitada, pois você pode definir o caractere máximo a ser preenchido. Veja exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<form>
<div>
<label for="choose">Which book you prefer a Ulysses or a lolita?</label>
<input type="text" id="choose" name="fav" required minlength="7" maxlength="7">
</div>
<div>
<button>Submit</button>
</div>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Senha do tipo de entrada Html:

Quando usamos <input type=”password”> em formulários HTML , um campo de senha é criado da seguinte forma:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<form>
<label for="username">Your Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Your Password:</label><br><input type="password" id="pwd" name="pwd">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Veja como o código HTML acima aparecerá em um navegador:

Nome de usuário:

Senha:

Nota: O mascaramento é aplicado para ocultar caracteres em campos de senha (exibidos como asteriscos ou círculos).

O tipo de senha também pode ser limitado ao comprimento mínimo e máximo e também definir a entrada da senha. Veja o exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<form>
<label for="number">PIN:</label>
<input id="number" type="password" inputmode="numeric" minlength="6" maxlength="11" size="11">
<div>
<button>Submit</button>
</div>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Reinicialização do tipo de entrada:

Utilizando o formulário HTML <input type=”reset”> , você pode modificar todos os valores do formulário para seus valores padrão clicando no botão reset:

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<form action="/action-attribute-page.php">
<label for="fname">Owner First name:</label><br>
<input type="text" id="fname" name="fname" value="Elon"><br>
<label for="lname">Last name:</label><br>
</form></body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Abaixo está um exemplo de como o código HTML que escrevemos aparecerá em um navegador da web:

Primeiro nome:

Sobrenome:

Nos tipos de entrada de formulário HTML , se você alterar os valores de entrada e clicar no botão “Redefinir”, os dados do formulário serão redefinidos para os valores padrão se você alterar os valores de entrada e clicar no botão Redefinir.

Tipo de entrada Enviar:

<input type=”submit”> fornece um botão para enviar dados de formulário para um manipulador de formulário em tipos de entrada de formulário HTML .

Uma página de servidor contendo um script para processamento de dados de entrada serve como manipulador de formulário na maioria dos casos.

A propriedade action do formulário indica o manipulador de formulário:

As variedades de entrada de formulário HTML são mostradas aqui!

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<form action="/action-attributes-page.php">
<label for="fname">Owner First name:</label><br>
<input type="text" id="fname" name="fname" value="Elon"><br>
<label for="lname">Last name:</label><br>
</form></body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um navegador renderizará o código HTML acima da seguinte maneira:

Primeiro nome:

Sobrenome:

Você obterá o seguinte texto padrão se ignorar o atributo de valor para o botão enviar quando se trata do tipo de entrada html :

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<form action="/action-attribute-page.php">
<label for="fname">Owner First name:</label><br>
<input type="text" id="fname" name="fname" value="Elon"><br>
<label for="lname">Last name:</label><br>
</form></body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Caixa de seleção do tipo de entrada:

Uma caixa de seleção é especificada usando a tag <input type=”checkbox”> em um formulário HTML.

Os usuários podem selecionar ZERO ou MAIS opções de um número limitado de opções usando caixas de seleção.

Example

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Tesla Truck">
</form></body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um navegador renderizará o código HTML acima da seguinte maneira:






A caixa de seleção também é validada usando Javascript como vemos em nossas formas de vida diária que existe a caixa de seleção de termos e condições e temos que ler e marcá-la para continuar adiante. Aqui está um exemplo de como isso é feito:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<script>
function checkForm(form)
{
if(!form.terms.checked) {
alert("Please read out the terms and condition and check it to move forward");
form.terms.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return checkForm(this);">
<p><input type="checkbox" name="terms"> I accept the <u>Terms and Conditions</u></p>
<p><input type="submit"></p>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tipo de entrada Rádio:

Um botão de opção é especificado pelo tipo de entrada do formulário HTML <input type=”radio”> .

Um usuário só pode escolher a opção Única em uma pequena lista de opções usando os botões de opção :

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Como você pode ver, um navegador exibe o código HTML da seguinte forma:






Botões de opção também podem ser validados com a ajuda de javascript . Caso o usuário se esqueça de selecionar o botão de opção, aparecerá a mensagem alet. Veja o exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<script>
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) & ( form.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
</head>
<body>
<form name="feedback" action="#" method="post">
Your Gender: <input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<input type="button" name="SubmitButton" value="Submit" onclick="ValidateForm(this.form)">
<input type="reset" value="Reset">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Botão de tipo de entrada:

Um botão é estabelecido como uma entrada de formulário HTML com a tag <input type=”button”> .

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" onclick="alert('Hello World!')" value="Click Here">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Em um navegador da Web, o código anterior ficará assim:

O botão is tem uma propriedade de desabilitado, pois você pode adicionar um botão, mas não funcionará porque, na verdade, está desabilitado. Veja exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<p>User Name: <input type="text" name="uname"></p>
<p>
<input type="submit" value="Submit">
<input type="button" value="Check " disabled>
</p>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tipo de entrada Data:

Quando se trata de tipos de entrada para formulários HTML, a tag <input type=”date”> é aquela usada para campos que precisam incluir uma data.

Um seletor de data pode ou não aparecer no campo de entrada, dependendo da funcionalidade fornecida pelo navegador.

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Se você deseja adicionar restrições às datas, pode usar os atributos min e max da seguinte forma:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<form>
<label for="datemax">Put a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Put a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tipo de entrada Cor:

Quando se trata de tipos de entrada para formulários HTML, a tag <input type=”color”> é aquela usada para campos que precisam conter uma cor.

Um seletor de cores pode ou não aparecer no campo de entrada, dependendo dos recursos oferecidos pelo navegador no que diz respeito ao tipo de entrada html .

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<form>
<label for="favcolor">Select your favorite Tesla truck color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Número do tipo de entrada:

Um campo de entrada numérica é definido pela tag <input type=”number”> . Também é possível definir restrições sobre quais números são aceitos.

Aqui está um exemplo de um campo de entrada numérica que pode receber valores de 1 a 5:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><div class="form"><br><br><form><br><label for="quantity">Quantity (between 1 and 5):</label><br><br><br><input type="number" id="quantity" name="quantity" min="1" max="5"><br></form><br><br></div><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um campo de entrada numérica pode ser definido como valor padrão para representar um número inteiro a ser colocado nele. Veja exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<label for="slots">Number of slots you would like to pick:</label>
<input id="slots" type="number" name="slots" value="0">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tipo de entrada Datetime-local:

A tag <input type="datetime-local"> denota um campo de entrada de data e hora que não leva em consideração o fuso horário atual.

É possível que um selecionador de data apareça no campo de entrada dos tipos de entrada de formulário HTML ; no entanto, isso depende do suporte do navegador.

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<form>
<label for="Your Sister/Brother Birthday">Siblings Birthday(date and time):</label><br>
<input type="datetime-local" id="Your Sister/Brother Birthday" name="Your Sister/Brother Birthday">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Arquivo de tipo de entrada:

Com a finalidade de fazer upload de arquivos, a tag <input type="file"> cria um campo de seleção de arquivo e um botão chamado "Browse".

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><form><br><label for="myfile">Choose your file:</label><br><br><br><br><input type="file" id="myfile" name="myfile"><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A entrada do arquivo pode ser especificada qual arquivo será aceitável, você mesmo pode definir o formato. Veja exemplo abaixo:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><br><form><br><label for="picture">Choose your picture:</label><br><input type="file" id="picture" name="picture" accept="image/png, image/jpeg"><br><input type="submit" value="submit"><br></form><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tipo de entrada E-mail:

Para caixas de texto onde um endereço de e-mail deve ser inserido, use a tag <input type=”email”> .

É possível que os navegadores façam uma validação automatizada do endereço de e-mail após o envio.

Vários smartphones podem dizer quando você está tentando enviar um e-mail e eles acrescentam automaticamente “.com” ao teclado.

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><form><br><label for="email">Type your email address:</label><br><br><br><br><input type="email" id="email" name="email"><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Os e-mails podem ou não estar corretos às vezes. Você pode colocar o padrão em seu campo de entrada para que os e-mails válidos possam ser colocados nele.
Aqui está como é feito:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><br><form><br><div class="emailBox"><br><label for="emailAddress">Your email address</label><br><br><input>id="emailAddress"<br>type="email"<br>size="32"<br>maxlength="32"<br>required<br>placeholder="[email protected]"<br>pattern=".+@.+\.com"<br>title="Please provide valid email address" /><br></div><br><input type="submit" value="Send"><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tipo de entrada Mês:

O usuário tem a opção de selecionar o mês e o ano através do <input type=”month”> .

Um seletor de data pode ou não aparecer no campo de entrada, dependendo dos recursos do navegador.

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><form><br><label for="bdaymonth">Birthday (month and year):</label><br><br><br><br><input type="month" id="bdaymonth" name="bdaymonth"><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A entrada do mês pode ser definida como data mínima e máxima. Aqui está como podemos fazer isso:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><br><form><br><label for="bday-month">what is your birth date?</label><br><input>id="bday-month"<br>type="month"<br>name="bday-month"<br>min="1991-01"<br>max="2010-09" /><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Restrições de entrada:

Algumas restrições de entrada comuns podem ser encontradas na lista a seguir:

Atributo Visão geral
min O valor mínimo de um campo de entrada.
verificado Quando a página carregar, um campo de entrada deve ser pré-selecionado (para type=”checkbox” ou type=”radio”).
desabilitado Um campo de entrada desabilitado é especificado.
padrão Verifica o valor de entrada em relação a uma expressão regular.
obrigatório Um campo de entrada obrigatório (deve ser preenchido).
tamanho A largura de um campo de entrada é calculada em caracteres.
etapa Forneça um campo de entrada com intervalos de números válidos.
valor O valor padrão de um campo de entrada.
somente leitura Torne um campo de entrada somente leitura (não editável).
máximo Define o valor máximo para um campo de entrada.
comprimento máximo Limite os campos de entrada a um determinado número de caracteres.

Em seguida , você aprenderá sobre as restrições de entrada.

Um exemplo de um campo de entrada com um intervalo de valores numéricos de 0 a 100, em incrementos de 10 passos, aparece abaixo. 30 é o valor padrão:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<h2>Numeric Steps</h2>
<p>Depending on browser support: Fixed steps will apply in the input field.</p>
<form action="/action_page.php">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para campos de pesquisa, <input type=”search”> é usado (os campos de pesquisa se comportam como campos de texto normais).

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><form><br><label for="gsearch">Search Google:</label><br><br><br><br><input type="search" id="gsearch" name="gsearch"><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Faixa do tipo de entrada:

Um <input type="range"> permite inserir um número cujo valor exato não é relevante.

Há um intervalo padrão de 0 a 100.

Em combinação com os atributos min , max e step , no entanto, você pode restringir quais números são aceitáveis :

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><div class="range"><br><br><form><br><label for="vol">Volume (between 0 and 50):</label><br><br><br><input type="range" id="vol" name="vol" min="0" max="50"><br></form></div><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tipo de entrada Tel:

Os campos de entrada contendo números de telefone devem usar <input type=”tel”> .

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><form><br><label for="phone">Enter your phone number:</label><br><br><br><br><input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tipo de entrada Hora:

Os usuários podem selecionar um horário selecionando um <input type=”time”> (não há opção de fuso horário).

Os campos de entrada podem exibir um seletor de tempo, dependendo do suporte do navegador.

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><form><br><label for="appt">Select a time:</label><br><br><br><br><input type="time" id="appt" name="appt"><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O intervalo de entrada de tempo pode ser definido usando o valor mínimo e máximo aqui é como:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<label for="gtime">Pick a time for going:</label>
<input type="time" id="gtime" name="gtime" min="09:00" max="17:00" required>
<small>Pickup timings are 9am to 5pm</small>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tipo de entrada Semana:

O usuário pode escolher uma semana e um ano com <input type=”week”> .

Os campos de entrada podem incluir um seletor de data, dependendo do suporte do navegador.

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><form><br><label for="week">Select a week:</label><br><br><br><br><input type="week" id="week" name="week"><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

URL do tipo de entrada:

O uso de <input type=”url”> garante que os endereços de URL sejam incluídos nos campos de entrada.

Quando o campo url é enviado, o navegador pode validá-lo automaticamente.

Para corresponder à entrada de URL, alguns smartphones adicionam “.com” ao teclado.

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><form><br><label for="landingpage">Add your landingpage:</label><br><br><br><br><input type="url" id="landingpage" name="landingpage"><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo de tipo de entrada HTML:

Marcação Visão geral
<tipo de entrada=””> Indica que tipo de entrada deve ser renderizada

Benefícios dos tipos de entrada HTML

Os tipos de entrada HTML são atributos poderosos usados ​​para criar campos de entrada que podem aceitar vários tipos de dados. Eles oferecem inúmeros benefícios que os tornam uma ferramenta essencial para desenvolvedores web.

  • Experiência do usuário aprimorada: os tipos de entrada HTML fornecem uma interface de usuário intuitiva que permite aos usuários inserir dados de forma rápida e eficiente, resultando em uma melhor experiência do usuário. Os usuários podem inserir dados com facilidade e precisão, reduzindo a frustração e aumentando a satisfação.
  • Tempo de desenvolvimento reduzido: os tipos de entrada HTML vêm pré-construídos com funcionalidade, permitindo que os desenvolvedores economizem tempo evitando a necessidade de criar campos de entrada personalizados. Isso reduz o tempo de desenvolvimento e acelera o processo de criação de páginas da web.
  • Compatibilidade entre plataformas: os tipos de entrada HTML são suportados pela maioria dos navegadores da Web, oferecendo compatibilidade entre plataformas. Isso garante que os usuários possam acessar páginas da Web independentemente do dispositivo usado. O mesmo tipo de entrada funcionará perfeitamente em diferentes plataformas, eliminando a necessidade de os desenvolvedores criarem diferentes campos de entrada para diferentes dispositivos.
  • Validação: os tipos de entrada HTML oferecem validação integrada, evitando que os usuários enviem dados incorretos. Isso economiza tempo e aumenta a precisão dos dados coletados. Os desenvolvedores podem configurar regras de validação específicas, como campos obrigatórios, comprimento mínimo e máximo e formato de dados, garantindo que os dados sejam inseridos corretamente.
  • Segurança aprimorada: os tipos de entrada HTML, como senha e campos de e-mail, são projetados para proteger informações confidenciais, garantindo que não sejam facilmente acessadas por pessoas não autorizadas. Isso ajuda a proteger os dados do usuário e evitar roubo de identidade.
  • Acessibilidade aprimorada: os tipos de entrada HTML podem incluir rótulos e outros elementos que melhoram a acessibilidade da página da Web, fornecendo informações adicionais para leitores de tela e outras tecnologias assistivas. Isso garante que os usuários com deficiências possam acessar e usar as páginas da web de forma eficaz.
  • Integração fácil: os tipos de entrada HTML podem se integrar facilmente com JavaScript e outras tecnologias da Web, permitindo que os desenvolvedores adicionem funcionalidades avançadas às páginas da Web. Isso permite a criação de páginas web dinâmicas com recursos avançados e interatividade.
Se você deseja estar em contato com o conhecimento técnico deste site, assine nossa Newsletter abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.