Un formulario de registro es uno de los elementos más frecuentes en cualquier aplicación que requiera acceso por parte de un usuario. En este post, te enseñaremos cómo crear un formulario de registro en HTML con los distintos inputs de usuario y contraseña.
¿Cómo crear un formulario de registro en HTML?
Un formulario de registro es un componente, normalmente situado en la página de inicio de nuestra aplicación, que nos permite controlar la creación de usuario. Este formulario suele tener inputs de tipo texto para que el usuario cree su nombre y contraseña con los que accederá a nuestra aplicación.
Para crear un formulario de registro en HTML, como con cualquier elemento que requiere una nueva vista, deberemos crear un nuevo archivo. En nuestro caso, hemos creado el archivo signup.html, aunque podrás llamarlo como quieras.
Dentro de este nuevo archivo, puedes crear un esqueleto automático que luego vas a modificar. Si estás trabajando con Visual Studio Code, insertar las letras .html hará que Emmet (herramienta de abreviación) te dé la opción de crear distintos esqueletos. Nosotros trabajaremos con un esqueleto base de HTML5. A continuación, puedes ver cómo se ve este esqueleto:
Una vez tenemos este esqueleto inicial, podemos situarnos en el body para empezar a insertar las etiquetas que necesitaremos.
Para crear un formulario de registro en HTML, las etiquetas fundamentales a tener en cuenta son form e input. Para entender la etiqueta form, puedes leer nuestro post sobre formularios en React. Si quieres conocer más sobre input, te invitamos a leer nuestro post sobre tipos de input en React.
Ahora, dentro del body de nuestro esqueleto crearemos un form. Sin embargo, primero crearemos un main y dentro un section para situar este form. A continuación, puedes ver estas líneas de código iniciales:
<body>
<main>
<section class="signup">
<form></form>
</section>
</main>
</body>Puede que cuando insertes la etiqueta form dentro de tu esqueleto se active inmediatamente el atributo action. Usar o no este atributo depende de tu proyecto. Si la usas, lo que harán el navegador y la etiqueta form es consumir la URL que pongas en action para hacer una petición al servidor directamente y autenticar lo que desees. Sin embargo, muchas veces querrás gestionar tus formularios directamente desde JavaScript. Esta es la diferencia entre formularios no controlados y formularios controlados.
Ahora que hemos logrado crear un formulario de registro en HTML, debemos decidir qué inputs insertar en este formulario. Es decir, qué datos queremos pedirle al usuario para que se registre en nuestra aplicación. En nuestro caso, hemos decidido pedir el usuario, la contraseña y la confirmación de contraseña insertada (repetir la contraseña inicial).
A continuación, te mostramos las líneas de código que hemos insertado para crear estos tres inputs. Ten presente que a cada uno le hemos dado un nombre e ID iguales para reconocerlos más fácilmente y no matarnos la cabeza con nombres.
<body>
<main>
<section class="signup">
<form>
<input type="text" name="textInput" id="textInput"/>
<input type="password" name="passwordInput" id="passwordInput"/>
<input type="password" name="passwordMatchInput" id="passwordMatchInput"/>
</form>
</section>
</main>
</body>¿Qué otros elementos podemos insertar?
Ahora que hemos logrado crear un formulario de registro en HTML con los input deseados, podemos insertar algunos otros atributos y etiquetas para ofrecer una mejor experiencia de usuario. Es decir, podemos insertar un label a cada input para que el usuario sepa qué insertar en el espacio dado. Además, podemos ponerle un atributo placeholder para facilitar la comprensión del tipo de respuesta deseada.
A continuación, te mostramos los cambios que hemos hecho en nuestro formulario usando la etiqueta label y el atributo placeholder:
<body>
<main>
<section class="signup">
<form>
<label for="textInput"> Usuario: </label>
<input type="text" name="textInput" id="textInput" placeholder="nombre de usuario"/>
<label for="passwordInput"> Contraseña: </label>
<input type="password" name="passwordInput" id="passwordInput" placeholder="contraseña"/>
<label for="passwordMatchInput"> Contraseña: </label>
<input type="password" name="passwordMatchInput" id="passwordMatchInput" placeholder="repite la contraseña"/>
</form>
</section>
</main>
</body>Ahora, lo único que falta para crear un formulario de registro en HTML es generar un botón de tipo submit para que el usuario pueda enviar sus datos al hacer clic sobre el elemento.
<button type="submit"> Crear usuario </button>
El resultado de lo que hemos hecho en este post se ve en la siguiente imagen:
Ahora que sabes cómo crear un formulario de registro en HTML, ¡es momento de que crees tus propios formularios! Para seguir aprendiendo sobre la creación y desarrollo de elementos y proyectos web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio donde aprenderás a desarrollar con herramientas y lenguajes fundamentales como HTML, CSS y JavaScript. ¿A qué esperas para dar el siguiente paso en tu formación? ¡Inscríbete ya y conviértete en un experto en cuestión de meses!
