Ejemplos de uso de INPUT

En estas lineas tienes algunos ejemplos para que veas la fomra de utlilizar los controles INPUT en el elemento form.

Vemos el uso de atributos para validar entradas numéricas  Por ejemplo una entrada limitada a un valor entre 1 y 10.

<form action="demo.php">

Escribir un número entre 1 y 10:

<input type="number" name="nota" min="1" max="10">

<input type="submit" value="Enviar">

</form>

Este código crea este formulario

Escribir un número entre 1 y 10:

El uso de los límites máximo y mínimo crea un selector de valores enteros (la doble flecha arriba/abajo a la derecha del cuadro) para entrar el dato correcto, aunque también lo puedes teclear a mano. Si te pasas de los límites te aparecerá un aviso al enviar el formulario.

---

Y hablando de rangos, mira esto algo parecido, ahora entre 0 y 10

<form action="demo.php">

Calificación

<input type="range" name="nota" min="0" max="10">

<input type="submit" value="Enviar">

</form>

Calificación

Como ves este sistema es más gráfico, aunque no se ven los valores, para eso se necesita un poco de javascript. Es útil cuando no se necesita precisión en los datos.

Mira esta modificación usando un campo output

<form action="demo.php" oninput="rango.value=votos.value">

Escribir tu voto, entre 1 y 10:<br>

<input type="range" name="votos" min="0" max="10" title="votos">

<output name="rango" for="nota">5</output>

<input type="submit" value="Enviar">

</form>

Escribir tu voto, entre 1 y 10):

5

---

En este otro ejemplo tiene un formulario que pide el número de libros de una compra, los libros van en cajas de 5 por tanto no puedes pedir 6 libros ni 4 ni 11. Sería algo como esto:

<form action="demo.php" method="post">

Número de libros (van en cajas de 5):

<input type="number" name="cantidad" min="0" max="100" step = "5">

<input type="submit">

</form>>

Número de libros (van en cajas de 5):

---

En este ejemplo se usa una expresión regular para permitir solo un tipo de valores, concretamente un código que serán 3 letras seguidas de un guión y 3 numeros como abc-234 o frw-567

<form action="demo.php" method="post">

<input name="codigo" type="text" pattern="[a-z]{3}-[0-9]{3}">

<input type="submit" name="submit" id="submit" value="Enviar">

</form>

Este formulario ser vería como sigue:

Puedes ver más sobre expresiones regulares

Un ejemplo de formulario donde se usan campos agrupados, algo bastante útil si quieres tomar información sobre algo con varios apartados, por ejemplo:

<form action="demo.php" method="post">

<fieldset>

<legend>Cliente:</legend>

Nombre:     <input name="nombre" type="text"><br>

Apellido 1º: <input name="apel1" type="text"><br>

Apellido 2º: <input name="apel2" type="text">

</fieldset>

<input type="submit" name="submit" id="submit" value="Enviar">

</form>

Este código crea este formulario

Cliente:

Nombre:     
Apellido 1º:
Apellido 2º:

Los datos quedan agrupados en el recuadro con nombre Cliente, es algo visual para remarcar que los datos están relacionados entre sí.  Se crea un elemento tipo bloque rodeado por un borde. Las etiquetas claves son legend, para darle un nombre al grupo y fieldset que conforma el grupo propiamente dicho. Para el proceso del formualrio esta estructura no afecta en nada: los datos son enviados individualmente como si no existiera el filedset