Curso HTML 8.2 Campos de texto (input type=’text’ y type=’password’)

8.2 Campos de texto (input type=’text’ y type=’password’)

Los campos de texto son uno de los controles más utilizados en formularios HTML. Permiten al usuario introducir y editar una línea de texto. Existen dos variantes principales:

input type=’text’: campo de texto normal.
input type=’password’: campo de texto enmascarado (para contraseñas).

1. Estructura básica

Cada campo se identifica mediante el atributo type:

2. Atributos comunes

Atributo	Descripción	Ejemplo
id / name	Identificadores del control, indispensables para vincular etiquetas y procesar el formulario.	`id='email' name='email'`
value	Valor inicial o actual del campo.	`value='juan@example.com'`
placeholder	Texto guía que desaparece al escribir.	`placeholder='Introduce tu correo'`
maxlength	Límite máximo de caracteres.	`maxlength='50'`
size	Ancho en número de caracteres visibles.	`size='30'`
readonly	Solo lectura; el usuario no puede modificarlo.	`readonly`
disabled	Deshabilitado; no se envía al servidor.	`disabled`
required	Obligatorio; impide enviar el formulario si está vacío.	`required`
pattern	Expresión regular para validación en el cliente.	`pattern='[A-Za-z0-9]{6,}'`
autofocus	Enfoca automáticamente el campo en la carga de la página.	`autofocus`

3. Eventos más relevantes

onfocus: al recibir el foco.
onblur: al perder el foco.
oninput: cada vez que cambia el contenido.
onchange: cuando el campo pierde el foco y su valor ha cambiado.
onkeypress, onkeydown, onkeyup: para capturar teclas.

4. Accesibilidad

Siempre asociar un <label> con for al id del input.
Usar aria-label o aria-describedby cuando la etiqueta visual no sea suficiente.
Proporcionar mensajes de error claros y visibles.

5. Seguridad y buenas prácticas

En type='password', el navegador oculta el texto ingresado; no obstante, enviar siempre mediante HTTPS.
No almacenar contraseñas en value ni en el atributo placeholder.
Implementar capas de validación tanto en cliente (HTML5/JS) como en servidor.
Usar políticas de contraseñas robustas con pattern y feedback en tiempo real.

6. Ejemplo práctico completo


  
  Usuario:
  
  
  

  
  Contraseña:
  
  
  
    Mínimo 8 caracteres, al menos una letra mayúscula y un dígito.