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.
