Tipo de entrada HTML = ”Tel” | Explicado
Os desenvolvedores da web utilizam o HTML “entrada”Elemento com o tipo“Tel”Para criar o campo de entrada para números de telefone. Esse tipo de campo de entrada pode ser utilizado pelos usuários para enviar um número de telefone. Além disso, criar um campo de entrada para inserir especificamente o número de telefone pode fazer com que sua página da web pareça profissional e diferente dos concorrentes.
Este artigo explicará o tipo de entrada html = “Tel" elemento.
Como criar um tipo de entrada HTML = elemento “tel”?
Para criar um tipo de entrada HTML TEL, siga as etapas fornecidas.
Etapa 1: Crie um campo de entrada para o número de telefone
No arquivo html, primeiro, crie um elemento div com o nome “principal”. Dentro deste elemento div, adicione e elementos. Dentro do elemento da etiqueta, primeiro, mencione a legenda e depois adicione uma etiqueta de entrada associada aos atributos de tipo e nome. Depois disso, inclua uma tag com a legenda “Enviar”:
Salve o arquivo e abra -o em seu navegador. Neste momento, a página da web ficará assim:
Etapa 2: Aplicar estilos no campo de entrada
Vamos aplicar estilos ao tipo de entrada tel com propriedades CSS.
Div "Main" de estilo
.principal
Background-Color: RGBA (0, 0, 0, 0.159);
MAX-LUDA: 600PX;
margem: 15px automático;
Altura: 200px;
Radio de fronteira: 30px;
O ".principal”É utilizado para acessar o elemento div com a classe principal, e as propriedades aplicadas a ele são descritas abaixo:
- ““cor de fundo”A propriedade é utilizada para a configuração da cor de fundo do elemento.
- ““largura máxima”A propriedade é utilizada para o cenário da largura máxima do elemento.
- ““margem”Propriedade com o valor“15px”Representa o espaço de 15px no fundo superior e o“auto”Gera o espaço igual no lado esquerdo-direito do elemento.
- ““altura”A propriedade é utilizada para definir a altura do elemento para 200px.
- ““Radio de fronteira”A propriedade é utilizada para a configuração da largura do elemento para 30px.
Estilo “form-me-main” div
.Formulário
exibição: flex;
Justify-Content: Center;
alinhado-itens: centro;
Altura: 100%;
Size da fonte: 24px;
O ".formulário-principal”É utilizado para acessar o elemento div com o formulário de classe. A descrição das propriedades aplicadas é mencionada abaixo:
- ““mostrar”Propriedade com o valor definido como o“flex”Criará um layout flexível para os elementos.
- ““Justify-Content”A propriedade é utilizada para alinhar os itens flexíveis horizontalmente.
- ““alinhado-itens”A propriedade é utilizada para alinhar os itens flexíveis verticalmente.
- ““altura”A propriedade é utilizada para o cenário da altura do elemento.
- ““tamanho da fonte”A propriedade é utilizada para a configuração do tamanho da fonte do elemento.
Estilo “entrada” da divisão de formulário
.entrada de formulário
borda: 1px RGB sólido (47, 63, 63);
preenchimento: 10px;
Size da fonte: 22px;
Background-Color: RGB (85, 104, 104);
Cor: #ffffff;
Esboço: Nenhum;
A classe Form-Main é aplicada com propriedades CSS que são explicadas abaixo:
- ““fronteira”A propriedade é aplicada com o valor“1px RGB sólido (47, 63, 63)”, Onde 1px representa a largura da borda, tipo de linha sólida e RGB (47, 63, 63) representa a cor.
- ““preenchimento”A propriedade é atribuída com o valor“10px”, Onde o primeiro 10px representa o espaço na parte superior e inferior do conteúdo, e o segundo se refere ao espaço de 10px no lado esquerdo e direito do conteúdo do elemento.
- ““tamanho da fonte”A propriedade é utilizada para definir o tamanho da fonte.
- ““cor de fundo”A propriedade é utilizada para a configuração da cor de fundo do elemento.
- ““cor”A propriedade é utilizada para definir a cor da fonte.
- ““contorno”Propriedade com o valor Nenhum removerá o contorno do campo de entrada quando selecionado.
Estilo “espaço reservado” da entrada
.Form-Main Input :: Planteholder
Cor: #dadada;
Só aplicamos a cor ao espaço reservado de entrada.
Estilize o "botão" do formulário
.botão de formulário
borda: 1px RGB sólido (47, 63, 63);
preenchimento: 10px 20px;
Size da fonte: 22px;
cor de fundo: RGB (12, 33, 33);
Cor: #A3A3A3;
Cursor: Ponteiro;
margem-esquerda: 5px;
transição: tudo 0.3s facilitar;
Aqui está a descrição das propriedades dadas:
- ““fronteira”A propriedade é aplicada com o valor“1px RGB sólido (47, 63, 63)”, Onde 1px representa a largura da borda, tipo de linha sólida e RGB (47, 63, 63) representa a cor.
- ““preenchimento”A propriedade é atribuída com o valor“10px”, Onde 10px representa o espaço na parte superior e inferior do conteúdo e o espaço de 10px no lado esquerdo e direito do conteúdo.
- ““tamanho da fonte”A propriedade é utilizada para definir o tamanho da fonte.
- ““cor de fundo”A propriedade é utilizada para a configuração da cor de fundo do elemento.
- ““cor”A propriedade é utilizada para definir a cor da fonte.
- ““cursor”Com o valor definido como o“ponteiro”Mudará o cursor para uma mão apontadora quando colocado no botão.
- ““margem-esquerda”A propriedade definirá um espaço de 5px à esquerda do elemento.
- ““transição”Propriedade com o valor definido como todos 0.A facilidade de 3s permite que o elemento seja movido gradualmente.
Estilize o "botão" no circuito
.Botão de formulário: hover
Transform: tradutor (-5px);
Ao fornecer o código acima mencionado, a tela de saída gerará o resultado como mostrado abaixo:
Etapa 3: Adicione o atributo "necessário" ao campo de entrada
Muitas vezes, é obrigatório adicionar um padrão especificado do número de telefone em nossos formulários, que podem ser validados antes do envio do formulário.
Para fazer isso, o “obrigatório”O atributo é utilizado de tal maneira que, se um usuário enviar um campo de entrada vazio, uma mensagem será gerada para preencher o campo da seguinte forma:
Pode ser visto a partir da imagem abaixo que inserir o valor no campo de entrada é obrigatório:
Etapa 4: Adicione o atributo "padrão" ao campo de entrada
Como sabemos, não há procedimento de validação para números de telefone, pois eles variam de um lugar para outro. O atributo padrão é utilizado para a especificação do formato do número de telefone. Como resultado, o usuário só pode adicionar um número de telefone de acordo com o padrão:
Vamos fornecer um padrão errado e ver o que acontece:
Pode -se observar que o campo de entrada notifica o usuário para inserir um número que deve corresponder ao padrão.
Então, vamos inserir um número de telefone com o padrão correto, clique no “Enviar”Botão e veja o que acontece:
Legal! Aprendemos com sucesso a usar um elemento de entrada do tipo Tel.
Conclusão
Para fazer um campo de número de telefone, o tipo de entrada HTML TEL pode ser utilizado. Este tipo pode ter vários atributos para adicionar funcionalidades adicionais, como espaço reservado, padrão, necessário e muito mais. Mais especificamente, o atributo padrão é usado para definir o padrão para o número de telefone, e os atributos necessários restringem o usuário a enviar um valor não vazio. Este artigo demonstrou o tipo de entrada HTML TEL e seus atributos com exemplos.