Formulario Html5

2 de /agosto08 de /2014

4m 58s

html

0 comentarios

1676

Html5 posee nuevos elementos y atributos para formularios que proporcionan una mejora semánica y nos ahorran mucho trabajo en programación y diseño, las nuevas funcionalidades ofrecen una mejor experiencia de usuario al permitir que los formularios tengan un comportamiento más consistente entre diferentes sitios web y darle una devolución inmediata acerca de los datos que van a ser enviados, incluso con Javascript deshabilitado.

Estas nuevas caracteristicas no son compatibles con todos los navegadores, Opera y Chrome ofrecen un mayor soporte pero algunas caracteristicas todavía no son compatibles con muchos navegadores web, por lo que debes tener cuidado con su uso.

Nuevos atributos para la etiqueta <input>

autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder, required, step

Nuevos atributos para la etiqueta <form>

autocomplete, novalidate

Nuevos tipos de entrada

<input type="email">
<input type="url">
<input type="date">
<input type="time">
<input type="datetime">
<input type="month">
<input type="week">
<input type="number">
<input type="range">
<input type="tel">
<input type="search">
<input type="color">

Código de ejemplo

<!-- Formulario Html5 Didesweb https://didesweb.com -->
<form action="." oninput="range_control_value.value = range_control.valueAsNumber">	<p>	Nombre: <input type="text" name="name_control" autofocus required>	</p>	<p>	Correo Electrónico: <input type="email" name="email_control" required>	</p>	<p>	URL: <input type="url" name="url_control" placeholder="Escripe la URL de tu página web personal">	</p>	<p>	Fecha: <input type="date" name="date_control">	</p>	<p>	Tiempo: <input type="time" name="time_control">	</p>	<p>	Fecha y hora de nacimiento: <input type="datetime" name="datetime_control">	</p>	<p>	Mes: <input type="month" name="month_control">	</p>	<p>	Semana: <input type="week" name="week_control">	</p>	<p>	Número (min -10, max 10): <input type="number" name="number_control" min="-10" max="10" value="0">	</p>	<p>	Intervalo (min 0, max 10):	<input type="range" name="range_control" min="0" max="10" value="0">	<output for="range_control" name="range_control_value" >0</output>	</p>	<p>	Teléfono: <input type="tel" name="tel_control">	</p>	<p>	Término de búsqueda: <input type="search" name="search_control">	</p>	<p>	Color Favorito: <input type="color" name="color_control">	</p>	<p>	<input type="submit" value="Enviar">	</p>
</form>

Resultado