Ir al contenido principal

Curso HTML 5: Nuevos atributos para formularios. Parte I

Curso HTML 5: Nuevos atributos para formularios

Como hemos podido ver en anteriores entradas, HTML5 trae consigo una amplia lista de nuevos tipos de inputs. En esta entrada vamos a centrarnos en los nuevos atributos para formularios. Estas nuevas características permiten una mejor optimización y control de datos.

A continuación puedes observar un listado con los nuevos atributos para formularios de HTML 5 y su soporte en diferentes navegadores:

Nuevos atributos para formularios

<form> / <input> Atributo autocomplete Podemos controlar que campos tendrán la opción de autocompletado activada o desactivada. Cuando la está activada, el navegador automáticamente completa los valores basados en antiguos datos que hemos introducido anteriormente. Es posible asignar la característica de autocompletado al formulario, y desactivarla para cualquier campo específico. También funciona a la inversa.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="validacion.php" autocomplete="on">
  Nombre:<input type="text" name="name"><br>
  Dirección: <input type="text" name="adress"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form> 

<form> Atributo novalidate Si queremos que los campos de un formulario no sean validados cuando se envíe, le asignamos el atributo novalidate

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form> 

<input> Atributo autofocus Cuando asignamos este atributo a un campo del formulario, automáticamente estará seleccionado cuando la página cargue.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp">
  Nombre:<input type="text" name="fname" autofocus><br>
  Apellidos: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<input> Atributo form El atributo form referencia un input fuera del formulario que pertenece a este.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp" id="form1">
  Nombre: <input type="text" name="fname"><br>
  <input type="submit" value="Enviar">
</form>

Apellidos: <input type="text" name="lname" form="form1">

<input> Atributo formaction este atributo especifica la URL de la página que validará el formulario cuando sea enviado.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp">
  Nombre: <input type="text" name="fname"><br>
  Apellidos: <input type="text" name="lname"><br>
  <input type="submit" value="Enviar"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Enviar como administrador">
</form> 

<input> Atributo formenctype El atributo formenctype especifica la codificación en la que será enviada la información al servidor (solo para formularios con method="post")

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_post_enctype.asp" method="post">
  Nombre: <input type="text" name="fname"><br>
  <input type="submit" value="Enviar">
  <input type="submit" formenctype="multipart/form-data"
  value="Enviar como Multipart/form-data">
</form>  

<input> Atributo formmethod El atributo formmethod especifica el método en el que será enviado el formulario.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp" method="get">
  Nombre: <input type="text" name="fname"><br>
  Apellidos: <input type="text" name="lname"><br>
  <input type="submit" value="Enviar">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="Enviar usando POST">
</form>  

<input> Atributo formnovalidate Cuando utilizamos este atributo, especificamos que el elemento <input> no será validado cuando se envíe.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Enviar"><br>
  <input type="submit" formnovalidate value="Enviar sin validación">
</form> 

Comentarios

Entradas populares de este blog

Efecto destello CSS3

En estas fechas tan señaladas a todos nos invade el espíritu navideño, y con él las ganas de decorar nuestra casa, nuestra habitación y por qué no, nuestra web. Por este motivo se me ocurrió crear un efecto destello de luz mediante CSS3 e imágenes para dar la calidez necesaria que nuestra web se merece. El efecto es sencillo, consiste en dos imágenes (una de fondo y otra que realizará el efecto) y una animación mediante CSS3. El resultado sería el siguiente: Podemos duplicar cuantas veces queramos la estrella y posicionarla donde mejor nos venga. A continuación os dejo el fragmento de código HTML y CSS para que lo probéis y hagáis las modificaciones que sean necesarias. HTML <div class="efectos"> <img src="directorio/imagen-01.jpg" alt="Navidad" class="background-navidad"> <img src="directorio/imagen-02.jpg" class="destello destello-01"> <img src="directorio/imagen-03.jpg" class=

Placeholder y su uso en HTML5 y CSS3

¿Qué es Placeholder? Placeholder es un texto descriptivo que incluimos dentro de la etiqueta <input> , cuando introduzcamos un valor se sustituirá automáticamente. Sintaxis HTML Su sintaxis es de lo más simple, dentro de la etiqueta <input> añadimos el atributo placeholder incluyendo el texto descriptivo. <input type="text" name="example" placeholder="Ejemplo de Placeholder"> Debajo podemos ver un ejemplo del código anterior. Soporte en navegadores A continuación podemos ver una lista con el soporte en los principales navegadores :   Chrome 4+   Internet Explorer 10+   Firefox 4+   Safari 5+   Opera 11.5+ Sintaxis CSS Mediante CSS podemos dar estilo al atributo Placeholder. Hay que tener en cuenta que la sintaxis no está estandarizada, por lo que en un futuro puede que cambie. ::-webkit-input-placeholder { color: #2c3e50; } ::-moz-placeholder { /* Firefox 19+ */ color:

Curso HTML 5: Introducción

¿Qué es HTML5? HTML son las siglas de HyperText Markup Language (lenguaje de marcas de hipertexto). Este nombre hace referencia al estándar de código y estructura básica con la que vamos a trabajar. El número 5 hace referencia a la quinta versión de este estándar, que trae consigo novedades y mejoras frente a sus predecesores. Una de las mejoras más significativas son las nuevas etiquetas que aportan un significado semántico , y por lo tanto tendrán un valor añadido en cuanto al posicionamiento web . Hay que tener presente que aún está en una fase experimental. Navegadores obsoletos como IE7 no van a poder interpretar correctamente muchas de las nuevas funcionalidades. En la siguiente imagen podemos observar las diferencias entre HTML5 y HTML4/XHTML : De un vistazo podemos percatarnos como con HTML5 obtenemos una estructura más limpia y estandarizada, mediante que con HTML4/XHTML debíamos aplicarles identificadores o clases a todas las cajas y careciamos de un signifi