Shukhrat's Coding Space

HTML structure for Forms

Shukhrat Khodjaev's photo
Shukhrat Khodjaev
·

3 min read

HTML structure for Forms

When learning html & css, creating the structure and styling of forms is something that i've mostly found a bit difficult. I kept forgetting how to center the form container and how to properly style the input and label tags so that they look decent on a page.

There are so many ways when it comes to creating the html structure of forms and every tutorial i've done related to forms the structure of it has been different.

One structure that i've liked involves grouping all related form content in section tags. First, we start by creating the boiler plate for html as shown below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="main.css" />
    <title>HTML Forms</title>
  </head>
  <body>
  </body>
</html>

You always have a h1 element in the center for "Contact Us" or "Application Form", so we just input the h1 tag in the header tag. We use the main tag to wrap everything and in the example below I've grouped information such as name, email and password in one section.

<header>
  <h1>Application Form</h1>
</header>
<main>
  <form action="/" method="POST">
    <section>
      <ul>
        <li>
          <label for="username">Your Name</label>
          <input type="text" name="user-name" id="username" required />
        </li>
        <li>
          <label for="useremail">Your email address</label>
          <input type="email" name="user-email" id="useremail" required />
        </li>
        <li>
          <label for="userpassword">Your password</label>
          <input
            type="password"
            name="user-password"
            id="userpassword"
            minlength="4"
            maxlength="10"
            required
          />
        </li>
      </ul>
    </section>

Other sections include tags such as textarea, select and input types such as radio and checkbox. Below is an example of input type checkbox wrapped in a separate section.

<section>
  <h2>How should we contact you?</h2>
  <ul>
    <li class="form-control-inline">
      <input
        type="checkbox"
        name="contact"
        id="contact-email"
        value="email"
      />
      <label for="contact-email">Contact me via email</label>
    </li>
    <li class="form-control-inline">
      <input
        type="checkbox"
        name="contact"
        id="contact-phone"
        value="phone"
      />
      <label for="contact-phone">Contact me via phone</label>
    </li>
  </ul>
</section>

Our html so far without CSS looks pretty horrible but we'll fix it in a minute..

Below is the css code I've used to style the form.

body {
  background-color: rgb(31, 30, 30);
  font-family: 'Roboto', sans-serif;
}

h1 {
  text-align: center;
  color: #fff;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

form {
  background-color: rgb(255, 255, 255);
  width: 30rem;
  margin: 1rem auto;
  padding: 1rem;
  border-radius: 6px;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input,
textarea,
select {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  box-sizing: border-box;
  padding: 0.25rem;
  border: 1px solid rgb(184, 184, 184);
  font: inherit;
  color: rgb(61, 58, 58);
}

input:focus,
textarea:focus {
  background-color: rgb(219, 190, 253);
  color: rgb(32, 5, 63);
  border-color: rgb(32, 5, 63);
}

textarea {
  resize: none;
}

.form-control-inline {
  display: flex;
}

.form-control-inline input {
  width: auto;
  margin-right: 0.5rem;
}

button {
  display: block;
  font: inherit;
  background-color: rgb(32, 5, 63);
  color: rgb(255, 255, 255);
  border: 1px solid rgb(32, 5, 63);
  padding: 0.5rem 1.5rem;
  margin: 0.25rem;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: rgb(52, 14, 95);
  border-color: rgb(52, 14, 95);
}

.buttons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.clr {
  background-color: transparent;
  color: rgb(32, 5, 63);
}

.clr:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

Finally, the result!

Hope, this blog post helps others as much as it's helped to learn about structuring and styling forms.

Peace! ✌️

html formsstructure