HTML Tipo de entrada = Tel | Explicado
Los desarrolladores web utilizan el HTML "aporte"Elemento con el tipo"Tel"Para crear el campo de entrada para los números de teléfono. Los usuarios pueden utilizar este tipo de campo de entrada para enviar un número de teléfono. Además, crear un campo de entrada para ingresar específicamente al número de teléfono puede hacer que su página web se vea profesional y diferente de los competidores.
Este artículo explicará el tipo de entrada HTML = "Tel" elemento.
Cómo crear un elemento de entrada HTML = "Tel"?
Para crear un tipo de entrada HTML Tel, siga los pasos dados.
Paso 1: Crear campo de entrada para el número de teléfono
En el archivo HTML, primero, cree un elemento Div con el nombre "principal". Dentro de este elemento div, agregue y elementos. Dentro del elemento de la etiqueta, primero, mencione la leyenda y luego agregue una etiqueta de entrada asociada con los atributos de tipo y nombre. Después de eso, incluya una etiqueta con la leyenda "Entregar":
Guarde el archivo y ábralo en su navegador. En este momento, la página web se verá así:
Paso 2: Aplicar estilos al campo de entrada
Aplicemos estilos al tipo de entrada Tel con propiedades CSS.
Estilo "principal" Div
.principal
Color de fondo: RGBA (0, 0, 0, 0.159);
Máxido: 600px;
margen: 15px automático;
Altura: 200px;
Radio fronterizo: 30px;
El ".principal"Se utiliza para acceder al elemento DIV con la clase principal de clase, y las propiedades que se aplican a él se describen a continuación:
- "color de fondoLa propiedad se utiliza para la configuración del color de fondo del elemento.
- "anchura máximaLa propiedad se utiliza para la configuración del ancho máximo del elemento.
- "margen"Propiedad con el valor"15px"Representa el espacio de 15px en el fondo superior, y el" "auto"Genera el espacio igual en el lado izquierdo-derecha del elemento.
- "alturaLa propiedad se utiliza para establecer la altura del elemento en 200px.
- "radio fronterizoLa propiedad se utiliza para la configuración del ancho del elemento a 30px.
Estilo "Forma principal" Div
.formulario principal
Pantalla: Flex;
Justify-Content: Center;
Alineación de ítems: Centro;
Altura: 100%;
tamaño de fuente: 24px;
El ".formulario principal"Se utiliza para acceder al elemento DIV con el formulario de clase principal. La descripción de las propiedades aplicadas se menciona a continuación:
- "mostrar"Propiedad con el valor establecido como"doblar"Creará un diseño flexible para los elementos.
- "Justify-ContentLa propiedad se utiliza para alinear los elementos flexibles horizontalmente.
- "ítems alineadosLa propiedad se utiliza para alinear los artículos flexibles verticalmente.
- "alturaLa propiedad se utiliza para la configuración de la altura del elemento.
- "tamaño de fuenteLa propiedad se utiliza para la configuración del tamaño de fuente del elemento.
Estilo "entrada" de la forma principal div Div
.Formulario de entrada principal
borde: 1px sólido RGB (47, 63, 63);
relleno: 10px;
tamaño de fuente: 22px;
Color de fondo: RGB (85, 104, 104);
Color: #ffffff;
Esquema: ninguno;
La clase principal se aplica con propiedades CSS que se explican a continuación:
- "borde"La propiedad se aplica con el valor"1px sólido RGB (47, 63, 63)", Donde 1px representa el ancho del borde, el tipo de línea continua y RGB (47, 63, 63) representa el color.
- "relleno"La propiedad se asigna con el valor"10px", Donde el primer 10px representa el espacio en la parte superior e inferior del contenido, y el segundo se refiere al espacio de 10px en el lado izquierdo y derecho del contenido del elemento.
- "tamaño de fuenteLa propiedad se utiliza para establecer el tamaño de la fuente.
- "color de fondoLa propiedad se utiliza para la configuración del color de fondo del elemento.
- "colorLa propiedad se utiliza para establecer el color de la fuente.
- "describirPropiedad "con el valor, ninguno eliminará el esquema del campo de entrada cuando se seleccione.
Estilo "marcador de posición" de entrada
.Formulario principal de entrada :: marcador de posición
Color: #Dadada;
Solo hemos aplicado color al marcador de posición de entrada.
Estilizar el "botón" del formulario principal
.Botón de formulario principal
borde: 1px sólido RGB (47, 63, 63);
relleno: 10px 20px;
tamaño de fuente: 22px;
Color de fondo: RGB (12, 33, 33);
Color: #A3A3A3;
cursor: puntero;
margen-izquierda: 5px;
Transición: todos 0.3s facilidad;
Aquí está la descripción de las propiedades dadas:
- "borde"La propiedad se aplica con el valor"1px sólido RGB (47, 63, 63)", Donde 1px representa el ancho del borde, el tipo de línea continua y RGB (47, 63, 63) representa el color.
- "relleno"La propiedad se asigna con el valor"10px", Donde 10px representa el espacio en la parte superior e inferior del contenido y el espacio de 10 px en el lado izquierdo y derecho del contenido.
- "tamaño de fuenteLa propiedad se utiliza para establecer el tamaño de la fuente.
- "color de fondoLa propiedad se utiliza para la configuración del color de fondo del elemento.
- "colorLa propiedad se utiliza para establecer el color de la fuente.
- "cursor"Con el valor establecido como el"puntero"Cambiará el cursor a una mano puntiaguda cuando se coloque en el botón.
- "margen de pesa"La propiedad establecerá un espacio de 5px a la izquierda del elemento.
- "transición"Propiedad con el valor establecido como todo 0.La facilidad de 3 permite que el elemento se mueva gradualmente.
Estilizar el "botón" en el flotador
.Botón de formulario principal: Hover
Transform: traduce (-5px);
Al proporcionar el código mencionado anteriormente, la pantalla de salida generará el resultado como se muestra a continuación:
Paso 3: Agregar atributo "requerido" al campo de entrada
A menudo es obligatorio agregar un patrón específico del número de teléfono en nuestros formularios, que se puede validar antes de la presentación del formulario.
Para hacerlo, el "requerido"El atributo se utiliza de tal manera que si un usuario envía un campo de entrada vacío, se generará un mensaje para llenar el campo de la siguiente manera:
Se puede ver en la imagen a continuación que es obligatorio ingresar el valor en el campo de entrada:
Paso 4: Agregar atributo "Patrón" al campo de entrada
Como sabemos, no hay un procedimiento de validación para los números de teléfono, ya que varían de un lugar a otro. El atributo del patrón se utiliza para la especificación del formato del número de teléfono. Como resultado, el usuario solo puede agregar un número de teléfono de acuerdo con el patrón:
Proporcionemos un patrón incorrecto y veamos qué sucede:
Se puede observar que el campo de entrada notifica al usuario que ingrese a un número que debería coincidir con el patrón.
Entonces, ingresemos un número de teléfono con el patrón correcto, haga clic en el "Entregar"Botón y ver qué sucede:
Fresco! Hemos aprendido con éxito a usar un elemento de entrada de tipo tel.
Conclusión
Para hacer un campo de número de teléfono, se puede utilizar el tipo de entrada HTML Tel. Este tipo puede tener varios atributos para agregar funcionalidades adicionales como marcador de posición, patrón, requerido y más. Más específicamente, el atributo de patrón se utiliza para configurar el patrón para el número de teléfono, y los atributos requeridos restringen al usuario a enviar un valor no vacío. Este artículo ha demostrado el tipo de entrada HTML Tel y sus atributos con ejemplos.