Atributos de nuevos elementos de formulario en html5

HTML5 introduce nuevos elementos de formulario y le da todos los elementos del formulario unos extras. Como a diseñar y construir páginas web, puede aplicar estos nuevos atributos y capacidades a cualquier elemento de formulario:

• enfoque automático: Un elemento con este atributo es el foco de la primera entrada del usuario. Es común aplicar el enfoque automático atribuir al primer elemento de la forma, y ​​tener sólo una enfoque automático campo por formulario. El código se parece a:

  Si el navegador no acepta la enfoque automático atribuir, nada dañino que sucederá, y todavía se puede utilizar una solución basada en javascript.

• patrón: Con esto se puede especificar una expresión regular utilizada para validar el formulario. Si el contenido coincide con la expresión regular, el campo será considerada válida. Utilice este atributo sólo cuando las técnicas de validación estándar no son suficientes, ya que puede ser difícil para depurar expresiones regulares.

  Cuando se especifica un patrón, también incluir una título atributo para indicar cuál es el patrón, como en el código de ejemplo:

  El navegador puede utilizar esto como un consejo para el usuario. También puede ser útil añadir información de patrón como texto marcador de posición.

  marcador de posición: los marcador de posición actúa como una etiqueta temporal que muestra el propósito de un campo de texto sin necesidad de una etiqueta etiqueta. Tan pronto como el usuario activa el campo, el texto marcador de posición desaparece. Una muestra de la simple código:

  No todos los navegadores soportan texto del marcador, y algunos simplemente ignorar el marcador de posición atribuir. Del mismo modo, si el campo ya se rellena, el marcador de posición no será visible. Por estas razones, añadir una etiqueta para que los usuarios sepan qué tipo en cada área de texto.

  Texto de marcador de posición es especialmente útil para indicar cómo debe formatear la entrada (sobre todo si esto va a ser aplicada por la validación o un patrón).

• necesario: Navegadores de apoyo marcarán todos necesario campos (quizás resaltando en rojo) si no se rellenan. Algunos navegadores también enviar una advertencia si el usuario intenta enviar un formulario con campos obligatorios vacíos.

  El especial : required pseudo-clase le permite aplicar un estilo CSS a todos los elementos requeridos en el formulario (que les da un color de borde o de fondo, por ejemplo). He aquí un ejemplo de un estilo CSS para marcar elementos requeridos con un borde rojo:

   : required {border: 1px sólidos rojos}

  Si se requiere un campo (con la necesario atribuir), se considerará válida hasta que contiene algún valor.

  Validación: Validación de formularios es una de las partes más difíciles del desarrollo Web. Es bastante fácil de configurar un formulario que pide la información del usuario, pero puede ser muy difícil estar seguro de que el usuario introduce información correctamente.

  HTML5 te ayuda. Al utilizar los elementos de entrada de propósito especial, el navegador comprueba automáticamente si el campo de formulario para asegurarse de que está en un formato adecuado. Si la entrada no es válida, el formulario (en general) no presentó, y el especial : inválido CSS pseudo-clase estará asociado con el campo válido. Simplemente suministrar CSS a su página de manejo de la : inválido estado:

  : inválido {background-color: rojo-}

  Cuando este estado CSS está activo, los campos no válidos tendrán la : inválido estilismo. Por ejemplo, si tiene una color campo y el estilo del fondo CSS roja definido aquí, el campo de color tendrán un fondo rojo a menos que el usuario introduce un color válido (un nombre de color reconocido o valor de color hexadecimal). Asimismo, el correo electrónico campo mostrará rojo hasta que se introduzca una dirección de correo electrónico válida. No es necesario añadir cualquier otro código al formulario. Sólo tienes que añadir CSS para mostrar las entradas no válidas, y el navegador se encargará del resto.

  Puede desactivar la validación de cualquier campo añadiendo el novalidate atribuir a ese elemento.

  Es posible que el navegador rechazar la tramitación de una forma hasta que se validan todos los campos, pero este comportamiento no parece ser universal entre los navegadores HTML5 compatibles.