Skip to main content

How to create forms in HTML: A step-by-step guide with practical examples

Creating forms with HTML

HTML forms allow you to collect user data through fields such as text, email, and passwords. In this practical guide, you will learn how to create an HTML form step by step, using essential tags such as<form>,<input>,<label>and more. Ideal for those taking their first steps in web development.

What is an HTML form?​

An HTML form is a section of a web page that allows users to enter data and send it to a server for processing. Forms are fundamental for user interaction with web applications, as they allow the collection of information such as names, emails, passwords, and other relevant data.

Basic Form Structure and Common Tags​

An HTML form is defined using the <form> tag.<form>Within this tag, you can include various form elements such as text fields, buttons, checkboxes, and more.

Example of an HTML Form with Common Tags​

Code Explanation​

Tag<form>​

The HTML element<form>This represents a section of the document that contains interactive controls for sending information, which is essential for communication between different systems and applications. This element contains several important attributes:

The attributeactionDefines the URL to which the form data will be sent.

The attributemethodSpecifies the HTTP method for sending the data (GET or POST).

Label<label>​

It is used to describe the purpose of a form field. The attributeformust match theidof the associated form element.

Input Fields<input>​

The label<input>Specifies an input field, that is, a field where the user can enter data.

Attributetype="text"Text field for simple text entry.

Attributetype="email"Email field, which automatically validates the format.

Attributetype="password"Password entry field, which hides the entered text.

AttributenameThe name of the field being sent to the server.

Attributerequired: Attribute that makes the field required.

Submit Button<button>​

The element<button>An HTML element is an interactive element that the user activates using a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it performs an action such as submitting a form or opening a dialog box.

Attributetype="submit"The attributetype="submit"in an element<button>In HTML, it's used to submit a form to which that button belongs.

When a<button type="submit">It is located inside a<form>When you click on it:

  • The form's submit event is triggered.

  • The browser attempts to validate the form (for example, that the required fields are completed).

  • If the validation passes, the form data is sent to the URL specified in the attribute.action of the <form>, using the method defined inmethod(The default is GET).

Most Common Tags in HTML Forms​

HTML forms use various tags to create input fields, buttons, and other interactive elements. The most common tags used in form creation are described below.

Text Fields​

Fields for users to enter text.

HTML
<label for="name">Nombre: </label> <input type="text" id="name" name="name" />

Password Fields​

Fields for users to enter passwords. The entered text is hidden.

HTML
<label for="password">Contraseña: </label>
<input type="password" id="password" name="password" />

Email Fields​

Fields specifically for email addresses, with automatic validation.

HTML
<label for="email">Correo Electrónico: </label>
<input type="email" id="email" name="email" />

Number Fields​

Fields for users to enter numbers, such as ages or quantities.

HTML
<label for="age">Edad: </label> <input type="number" id="age" name="age" />

Date Fields​

Fields for users to select a date, such as their date of birth.

HTML
<label for="birthdate">Fecha de Nacimiento: </label>
<input type="date" id="birthdate" name="birthdate" />

Radio Buttons​

Radio buttons allow users to select a single option from a set.

HTML
<label>Género: </label>
<input type="radio" id="masculino" name="gender" value="masculino" />
<label for="masculino"> Masculino </label>
<input type="radio" id="femenino" name="gender" value="femenino" />
<label for="femenino"> Femenino </label>

Checkboxes​

Checkboxes allow users to select multiple options from a set.

HTML
<label>Intereses: </label>
<input type="checkbox" id="musica" name="interest" value="musica" />
<label for="musica"> Música </label>
<input type="checkbox" id="deportes" name="interest" value="deportes" />
<label for="deportes"> Deportes </label>
<input type="checkbox" id="lectura" name="interest" value="lectura" />
<label for="lectura"> Lectura </label>

Dropdown menus allow users to select an option from a predefined list.

HTML
<label for="country">País: </label>
<select id="country" name="country">
  <option value="argentina">Argentina</option>
  <option value="brasil">Brasil</option>
  <option value="chile">Chile</option>
  <option value="mexico">México</option>
</select>

Text Area​

A text area allows users to enter multiple lines of text.

HTML
<label for="comment">Comentarios: </label>
<textarea id="comment" name="comment" rows="3" cols="40"></textarea>

Submit Button​

A submit button allows users to submit the form.

HTML
<button type="submit">Enviar</button>

Conclusion​

Creating forms with HTML is a fundamental skill for any web developer. Understanding how to use the various form tags and how to apply styles with CSS can help you create effective and attractive user interfaces. This article provides you with a solid foundation to start working with forms in your web projects.

Keep practicing and experimenting with different elements and styles to master this crucial area of web development!

Resources
Exercises

🚀Test your knowledge with these basic form exercises: