Elementos y atributos nuevos para formularios con HTML 5
En HTML 5 se han añadido nuevos elementos para emplear en los formularios. Éstos presentan nuevas funcionalidades, A continuación, se muestra un listado con los distintos types que se pueden usar en formularios con HTML 5:
text – Para introducir texto, simplemente.
search – Específico para input en un buscador.
url – Específico para direcciones de página web. Requiere http:// o http: simplemente.
tel – Se supone que para números de teléfono aunque no he conseguido que haga nada.
email – El nombre lo dice.
password – Escribe el contenido en asteriscos.
date – Para introducir un fecha (mes, día y año).
time – Para introducir una hora en formato 24 horas (horas, minutos y segundos).
datetime – Para introducir fecha y hora.
datetime-local – Igual que el anterior pero sin posibilidad de indicar zona horaria, ya que se entiende que es la local.
month – Para indicar el mes de un año.
week – Para indicar una semana de un año.
number – Específico para numeros.
range – Sale una barra para elegir un número entre un rango, el número hay que indicarlo entre un min=»10″ y un max=»12″ (los números son de ejemplo.)
checkbox – Para seleccionar y deseleccionar.
radio button – Para seleccionar, uno obligatorio.
color – Para seleccionar colores.
Nuevos atributos de HTML 5:
– Los elementos de fecha y hora permiten atributos max y min. Para indicar fecha/hora máxima y mínima.
– Required que nos permite indicarle al formulario que ese campo es obligatorio.
– Placeholder permite introducir un texto de ejemplo en el cuadro de texto. De esta forma se da a entender como tiene que ser el formato de lo que se introduce.
– List nos permite asociar una lista a un cuadro de texto. El valor de este atributo list, debe coincidir con el identificador de una lista definida con una etiqueta datalist (esta etiqueta también es nueva en HTML 5. El resultado es un efecto muy parecido a un select pero con las ventajas de un text.
– Autofocus hace que un determinado elemento tome el foco.
Cómo se ve, se pueden validar formularios sin ningún esfuerzo y sin necesidad de javascript. Ya que se encarga de realizar la validación el propio formulario. Incluso se pueden añadir funcionalidades con css en función de si se ha rellenado correctamente o no. Tal que así:
Este codigo modifica los colores de todos los input, que se encuentran dentro de un form cuyo id es «idForm», cuando son válidos o inválidos.
1 Comentario
Dejar un comentario
Categorias
- adobe (2)
- agile (1)
- Alfresco (1)
- Android (26)
- Angular (6)
- angularjs (10)
- apache (1)
- axis (2)
- Bases de datos (14)
- Bootstrap (1)
- C# (3)
- Cámara (1)
- chrome (3)
- Codeigniter (2)
- Control de Versiones (2)
- CSS (25)
- CVS (1)
- Django (9)
- Django Rest Framework (1)
- DNS (1)
- Docker (3)
- dominio (1)
- eclipse (5)
- Entity Framework (2)
- ETL (1)
- Firefox (6)
- flash (1)
- freecad (1)
- Git (12)
- GitHub (4)
- gpg (2)
- Groovy (1)
- Handlebars (1)
- hibernate (4)
- hosting (1)
- HTML (50)
- HTML 5 (26)
- Impresión 3D (9)
- Inkscape (1)
- IOS (2)
- ireports (3)
- Java (44)
- Javascript (55)
- JBoss (5)
- JPA (2)
- JQuery (20)
- Json (7)
- JSP (6)
- Keycloak (1)
- Lamp (1)
- LDAP (2)
- lean (1)
- linkedin (1)
- LINQ (1)
- linux (13)
- Livecycle (1)
- log (1)
- microcontroladores (1)
- MongoDB (4)
- MySQL (8)
- Node.js (5)
- OC4J (1)
- Openshift (2)
- Oracle (6)
- Patrones de Diseño (1)
- Photoshop (2)
- php (20)
- PostgreSQL (1)
- python (19)
- rabbitmq (1)
- Raspberry PI (13)
- Raspherry PI (5)
- React (6)
- seguridad (3)
- Selenium (3)
- Sencha Touch (1)
- Sin categoría (29)
- Spring (17)
- spring-boot (3)
- SQL (7)
- SQLServer (1)
- SSO (1)
- struts (2)
- SVN (1)
- Talend (1)
- Tomcat (6)
- unity (3)
- Visual Studio Code (2)
- vmware (5)
- Web Services (11)
- windows (18)
- wordpress (10)
- Xiaomi (1)
- xml (2)
Trabajos Realizados
- App Android – Autoka Fr
- App Android – Cartelera Cántabra
- App Android – Gramática y Vocabulario Ingles
- App Android – Hoja de Gastos
- App Android – Hotel Torre Cristina
- App Android – OcioEnjoy
- App Android – Visor CardBoard
- App Firefox – Managapp
- DiamanteBomba – DisasterCode
- Generador de Partes de Trabajo
- GitHub – Android Web Generator
- GitHub – Dynamic Angular Gallery
- GitHub – Dynamic React Gallery
- GitHub – Sotilizator
- GitHub – SpringAngularJS
- GitHub – Swiper Dynamic Angular Gallery
- HazParejas – DisasterCode
- RompeCabezas – DisasterCode
- Unity Game – English Couple
- Unity Game – Kill Wasp
- WordPress – El Buen Apicultor
- WordPress – El Cajón de los Retales
- WordPress – El Vestidito Azul
- WordPress – Feuchas
- WordPress – Fragua de Navajas Ponce
- WordPress – Humor a las Tres
- WordPress – Photo Places
Hi, Neat post. There’s a problem with your website in internet explorer, would test this IE still is the market leader and a good portion of people will miss your great writing due to this problem. daaaeekcffed