Curso de HTML5: Nuevos campos y atributos de Formulario

Aquí está el listado de los nuevos campos de formulario:

  •  color: selección de color
  • date: selección de fecha, adiós jcalendar!
  • datetime: fecha y hora
  • Time: sólo hora
  •  Month: mes del año
  • Week: semana del año, esto va para los alemanes 🙂
  • email: para rellenar más fácil un email en el movil
  • number: para rellenar más fácil un número
  • url: para rellenar más fácil una url en el movil
  • tlf: para rellenar más fácil un teléfono en el movil
  • search: típico campo de buscar
  • range: slider desplazador cuyo valor va entre min y max, y a pasos con step.
  • datalist: define un listado para un campo. http://www.w3schools.com/tags/tag_datalist.asp
  • file con opción de multiple

Nuevos atributos de campos de formulario:

  •  Required: campo requerido
  • Placeholder: nos permitirá colocar un texto predefinido en el valor del campo pero que al escribir el usuario se quita 
  •  Autofocus: campo que adquiere el foco
  •  Readonly: solo lectura
  •  Disabled: deshabilitado
  •  Pattern: validaciones por expresiones regulares
  •  Autocomplete: con off deshabilitamos el autocompletado del navegador
  •  Min max step: atributos de los tipo range, number y progress
  • label en option , para dejar ya el value 🙂

Práctica sugerida

Intenta usar estos nuevos tipos de campos en un formulario html5 y comprueba cómo se ven en Chrome, Firefox e Internet Explorer. Si tienes la posibilidad intenta verlo también desde un móvil.

Licencia Creative Commons

Comments

  1. Me alegro que esto esté en marcha de nuevo. Estuve en el curso que impartiste de Drupal 7 en CETIC y hoy he visto que hay mucho material nuevo. A ver si tengo suerte y algún día pones un curso de PHP, porque hice uno hace poco pero estaba muy mal organizado y no aprendí todo lo que me hubiera gustado.

Leave a Reply

*

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos: http://cursosdedesarrollo.com/cursos/

También disponemos de algunos cursos de pago por si son de tu interés: https://cursosdedesarrollo.com/tienda/

Curso de Angular: https://cursosdedesarrollo.com/tienda/angular/

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies