Tipos de input: text, password, email, number y tel
Use el tipo de input adecuado para cada campo de datos.
Tipos de input: text, password, email, number y tel es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
El elemento input
El elemento <input> crea varios controles de formulario. El atributo type determina de qué tipo:
<input type="text"> <!-- single-line text -->
<input type="password"> <!-- masked text -->
<input type="email"> <!-- email address -->
<input type="number"> <!-- numeric -->
<input type="tel"> <!-- phone number -->type=text
El tipo de input predeterminado: un campo de texto de una sola línea:
<label for="username">Username</label>
<input
type="text"
id="username"
name="username"
placeholder="e.g. jane_doe"
maxlength="50"
autocomplete="username"
>type=password
El campo de contraseña oculta los caracteres a medida que el usuario escribe:
<label for="pwd">Password</label>
<input
type="password"
id="pwd"
name="password"
minlength="8"
autocomplete="current-password"
required
>
<!-- Browser may offer to save/fill the password -->
<!-- autocomplete="new-password" for registration forms -->type=email
El campo de correo electrónico valida el formato de la dirección en dispositivos móviles y de escritorio:
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@example.com"
autocomplete="email"
required
>
<!-- Mobile: shows @ on keyboard -->
<!-- Browser validates basic email format on submit -->type=number
El campo numérico acepta valores numéricos con controles de incremento y decremento:
<label for="qty">Quantity</label>
<input
type="number"
id="qty"
name="quantity"
min="1"
max="100"
step="1"
value="1"
>
<!-- min, max, step control allowed values -->
<!-- Mobile: shows numeric keypad -->
<!-- Note: only integers with step=1; decimals need step="0.01" -->type=tel
El campo tel acepta números de teléfono sin validar el formato:
<label for="phone">Phone number</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="+1 (555) 555-0100"
pattern="[+][0-9 ()-]{7,20}"
autocomplete="tel"
>
<!-- Mobile: shows phone keypad -->
<!-- No built-in validation — phone formats vary globally -->
<!-- Use pattern attribute for format validation -->El atributo name es esencial
El atributo name permite al servidor identificar cada campo:
<form action="/search">
<!-- Without name, the field is NOT sent with the form -->
<input type="text" name="q" placeholder="Search">
<button type="submit">Search</button>
</form>
<!-- Submits: /search?q=your+search+term -->
<!-- name="q" → the key in the submitted data -->Placeholder frente a etiqueta
El atributo placeholder proporciona un texto de ejemplo, pero no lo utilice nunca en lugar de una etiqueta:
<!-- BAD: placeholder as label -->
<input type="text" placeholder="Enter your name">
<!-- GOOD: label + helpful placeholder -->
<label for="name">Full name</label>
<input type="text" id="name" name="name" placeholder="e.g. Jane Smith">
<!-- Placeholder disappears on typing — screen readers often skip it -->value y defaultValue
Rellene previamente los campos de entrada con el atributo value:
<input type="text" name="country" value="United States">
<!-- Renders with 'United States' pre-filled -->
<input type="number" name="qty" value="1" min="1" max="10">
<!-- Default quantity of 1 -->disabled y readonly
Hay dos formas de hacer que un campo de entrada no sea editable:
<input type="text" value="Fixed value" readonly>
<!-- readonly: user can see and select text, but not edit it -->
<!-- Value IS submitted with the form -->
<input type="text" value="Disabled" disabled>
<!-- disabled: user cannot interact with it at all -->
<!-- Value is NOT submitted with the form -->
<!-- NOT in tab order -->Valores de autocomplete de los campos de entrada
Los valores específicos de autocomplete mejoran la precisión del autocompletado del navegador:
<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="street" autocomplete="address-line1">
<input type="text" name="city" autocomplete="address-level2">
<input type="text" name="zip" autocomplete="postal-code">
<input type="password" autocomplete="new-password">Comprobación rápida
¿Qué tipo de input debe utilizar para un campo de número de teléfono?
Resumen: tipos de input
Tipos de input habituales:
type="text": texto general (predeterminado)type="password": texto oculto; utiliceautocomplete="new-password"type="email": correo electrónico con tecla @ en dispositivos móvilestype="number": valores numéricos con min/max/steptype="tel": número de teléfono con teclado telefónico- Incluya siempre
namey un<label>asociado
Preguntas frecuentes
¿La lección «Tipos de input: text, password, email, number y tel» es gratis?
Sí — el texto completo de «Tipos de input: text, password, email, number y tel» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Tipos de input: text, password, email, number y tel»?
Use el tipo de input adecuado para cada campo de datos. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Tipos de input: text, password, email, number y tel»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El elemento form: action, method y enctype
- Tipos de input: text, password, email, number y tel
- El elemento label y la accesibilidad
- El elemento button: submit, reset y button