Crea tu web, tutor html, css

Algunos ejemplos de INPUT

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 lo puedes teclear también. 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 otuput
<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):

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

Escribe estos ejemplo en tu editor y modificalos para ir entendiendo como funcionan.