Formulario con HTML5 Básico!
<form action=».» oninput=»range_control_value.value =
range_control.valueAsNumber»>
<table>
<tr>
<th>
Nombre:
</th>
<td>
<input type=»text» name=»name_control» autofocus required />
</td>
</tr>
<tr>
<th>
Correo Electrónico:
</th>
<td>
<input type=»email» name=»email_control» required />
</td>
</tr>
<tr>
<th>
URL:
</th>
<td>
<input type=»url» name=»url_control» placeholder=»Escripe la
URL de tu página web personal» />
</td>
</tr>
<tr>
<th>
Fecha:
</th>
<td>
<input type=»date» name=»date_control» />
</td>
</tr>
<tr>
<th>
Tiempo:
</th>
<td>
<input type=»time» name=»time_control» />
</td>
</tr>
<tr>
<th>
Fecha y hora de nacimiento:
</th>
<td>
<input type=»datetime-local» name=»datetime_control» />
</td>
</tr>
<tr>
<th>
Mes:
</th>
<td>
<input type=»month» name=»month_control» />
</td>
</tr>
Guía teórica HTML 5 Página 24
<tr>
<th>
Semana:
</th>
<td>
<input type=»week» name=»week_control» />
</td>
</tr>
<tr>
<th>
Número (min -10, max 10):
</th>
<td>
<input type=»number» name=»number_control» min=»-10″
max=»10″ value=»0″ />
</td>
</tr>
<tr>
<th>
Intervalo (min 0, max 10):
</th>
<td>
<input type=»range» name=»range_control» min=»0″ max=»10″
value=»0″ />
<output for=»range_control» name=»range_control_value»
>0</output>
</td>
</tr>
<tr>
<th>
Teléfono:
</th>
<td>
<input type=»tel» name=»tel_control» />
</td>
</tr>
<tr>
<th>
Término de búsqueda:
</th>
<td>
<input type=»search» name=»search_control» />
</td>
</tr>
<tr>
<th>
Color Favorito:
Guía teórica HTML 5 Página 25
</th>
<td>
<input type=»color» name=»color_control» />
</td>
</tr>
<tr>
<th colspan=»2″>
<input type=»submit» value=»Enviar!» />
</th>
</tr>
</table>
</form>
Con este código podremos observar el siguiente resultado:
En cada uno de los capos podremos ver la funcionalidad que nos brinda.