El atributo type cambia el teclado en el móvil, la validación y el control que se muestra.
type="text": Texto de una línea.
type="email": Una dirección de correo.
type="password": Una contraseña.
type="number": Un número, con flechas para subir y bajar.
El atributo type cambia el teclado en el móvil, la validación y el control que se muestra. Elegir bien el tipo es la forma más fácil de hacer un formulario cómodo.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Texto de una línea. Es el tipo por defecto.
Esencial. Una dirección de correo: el navegador comprueba que tiene forma de correo y el móvil muestra la @.
Esencial. Una contraseña: los caracteres se ocultan.
Esencial. Un número, con flechas para subir y bajar. min, max y step lo limitan.
📌 Nota. Para códigos que son números pero no se cuentan (un código postal, una tarjeta), mejor type="text" inputmode="numeric".
Un deslizador para elegir un valor aproximado entre un mínimo y un máximo.
Un teléfono: el móvil muestra el teclado numérico. No comprueba el formato (cada país tiene el suyo).
Una dirección web completa (con https).
Un campo de búsqueda: algunos navegadores añaden un botón para borrar.
Esencial. Una fecha, con calendario. El valor se envía como año-mes-día.
Una hora.
Fecha y hora juntas, sin zona horaria.
Un mes de un año.
Una semana de un año (número de semana).
Un selector de color. El valor es un hexadecimal (#rrggbb).
Esencial. Una casilla que se marca o se desmarca. Cada una es independiente.
Esencial. Botones de opción: con el mismo name, solo se puede elegir uno. Van en un <fieldset>.
Para elegir uno o varios ficheros. accept limita los tipos. El formulario necesita enctype="multipart/form-data".
Un dato que se envía con el formulario pero no se ve ni se puede editar en la página (aunque sí se lee en el código).
Un botón que envía el formulario. Hoy es más habitual <button>, que admite contenido.
Un botón que deja el formulario como estaba al cargar. Úsalo poco: es fácil pulsarlo sin querer y perderlo todo.
Un botón sin acción propia, para JavaScript. Es más cómodo <button type="button">.
Un botón de envío que es una imagen. Lleva alt, como cualquier imagen.
El atributo type cambia el teclado en el móvil, la validación y el control que se muestra.
Código del tema: <label for="t">Nombre del proyecto</label>
El atributo type cambia el teclado en el móvil, la validación y el control que se muestra. Elegir bien el tipo es la forma más fácil de hacer un formulario cómodo.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Texto de una línea. Es el tipo por defecto.
Esencial. Una dirección de correo: el navegador comprueba que tiene forma de correo y el móvil muestra la @.
Esencial. Una contraseña: los caracteres se ocultan.
Esencial. Un número, con flechas para subir y bajar. min, max y step lo limitan.
📌 Nota. Para códigos que son números pero no se cuentan (un código postal, una tarjeta), mejor type="text" inputmode="numeric".
Un deslizador para elegir un valor aproximado entre un mínimo y un máximo.
Un teléfono: el móvil muestra el teclado numérico. No comprueba el formato (cada país tiene el suyo).
Una dirección web completa (con https).
Un campo de búsqueda: algunos navegadores añaden un botón para borrar.
Esencial. Una fecha, con calendario. El valor se envía como año-mes-día.
Una hora.
Fecha y hora juntas, sin zona horaria.
Un mes de un año.
Una semana de un año (número de semana).
Un selector de color. El valor es un hexadecimal (#rrggbb).
Esencial. Una casilla que se marca o se desmarca. Cada una es independiente.
Esencial. Botones de opción: con el mismo name, solo se puede elegir uno. Van en un <fieldset>.
Para elegir uno o varios ficheros. accept limita los tipos. El formulario necesita enctype="multipart/form-data".
Un botón que envía el formulario. Hoy es más habitual <button>, que admite contenido.
Un botón que deja el formulario como estaba al cargar. Úsalo poco: es fácil pulsarlo sin querer y perderlo todo.
Un botón sin acción propia, para JavaScript. Es más cómodo <button type="button">.
Un botón de envío que es una imagen. Lleva alt, como cualquier imagen.