Los formularios en HTML sirven para poder recopilar informacion sobre el usuario que nosotros necesitemos. Los formularios se abren y se cierran con la etiqueta <form>. Funcionan de forma similar a otras etiquetas como <section> o <div>, pero es la unica que habilita la creación de formularios.

Input

Los inputs son las instancias del formulario en la cual se completan los datos. Hay muchos tipos de inputs y todos tienen por objeto recopilar datos del usuario. Los inputs no necesitan etiquetas de cierre para poder funcionar, con solo llamarlos con <input> alcanza. El atributo mas importante de los inputs es type, que permite definir que tipo de input va a ser. Puede ser:

  1. Text: crea un cuadro de texto

  2. Number: crea un cuadro de texto que solo permite ingresar numeros

  3. Password: crea un cuadro de texto para escribir una contraseña

  4. Email: crea un cuadro de texto para crear un email

  5. Radio: crea un selector redondo para elegir alguna opcion.

  6. Checkbox: crea un selector en forma de caja para tildar alguna opción

  7. Radio: crea una barra donde se puede seleccionar una escala de valores

Name

Los inputs necesitan tener un nombre para que despues la base de datos asocie el dato con un nombre. Además, JavaScript usa mucho los nombre de los inputs para poder trabajar. El nombre se define como un atributo mas. Ej:

<input type="password" name="contraseña">

ATENTI

En algunos casos, como en los radios, los nombres son fundamentales para poder seleccionar solo uno de ellos. Ej: supongamos que tenemos dos radios para elegir que tipo de socio queremos ser, si Activo Simple o Activo Pleno. Se vería asi

<label><input type=radio>Activo Simple</label>
<label><input type=radio>Activo Pleno</label>

Si lo creamos de esta forma, el usuario puede seleccionar los dos a la vez. La forma de evitarlo es asignarle el mismo nombre a los dos radios para que, si se selecciona uno, no pueda seleccionarse el otro y viceversa. Quedaria asi

<label><input type=radio name="tipo_socio">Activo Simple</label>
<label><input type=radio name="tipo_socio">Activo Pleno</label>

Label