matthewseiwert.com

In this tutorial we will dive deeper into form building. If you haven't already I encouraged you to first check out How to Create a Simple HTML Form and Understand Each Element as this post is more of a continuation in learning from the original blog post.

Setup your desktop

Be sure to add the Live Server extension for automatic refresh and use Prettier to format your code.

It can also be useful to learn some Visual Studio Code shortcuts to work faster.

The Project

In this assignment we will be learning a new form field the select element and applying css to our form with light styling and centering using Flexbox.

For a better grasp of CSS Flexbox I encourage you to check out my guide Learn CSS the Fun Way: Interactive Games That Teach Flexbox and Grid.

You are tasked with building a form with 4 form fields (name, phone, email, & select dropdown) in HTML, centering it with CSS Flexbox, and styling it with CSS.

How to add a Select dropdown to an HTML form

Just like other more basic form fields, a form field with select with also consist of two elements: the input area and the label. However instead of an input field you will instead use a special select element that wraps around option elements. The label element does not change and is the same implementation we learned in the prior blog post.

Another unique thing to point out is that the select element does not use a type attribute as the type is already implied by the word select. Normally when we use the input tag we also need to use the type attribute to make it more specific and clear what type we intend for the form field. In this case for select the type is implied so we only need the other three attributes we discussed (id, name, & required).

 <label for="language">Choose a programming language:</label>
      <select id="language" name="language" required>
        <option value="python">Python</option>
        <option value="javascript">JavaScript</option>
        <option value="java">Java</option>
        <option value="csharp">C#</option>
      </select>

I'd also like to note that the option tag uses the value attribute the same way that the submit button uses the value attribute. Here the value serves as the text that displays for the option in the dropdown. You could also have server-side logic based on the value selected. This is similar to having multiple submit buttons with different server-side actions. Also note that the name attribute for the select element serves as the key and the value attribute will serve as the value depending on which option is chosen.

Add CSS to your HTML Form

To add css to your html form you will need to create an external stylesheet (styles.css) and link it to your html file (<link href="styles.css" rel="stylesheet" />). It will also be useful to add a reset.css file.

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Practice</title>
    <link href="reset.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
  </head>

After linking your css files be sure to style your form and center it in the browser using flexbox. Remember that a css ruleset begins with the name of the tag followed by curly braces and within the curly braces you add your css rules.

form {
    border: 2px solid black;
    background-color: white;
    border-radius: 5%;
    padding: 1em;
}

Final Solution

    <form action="/submit" method="post">
      <label for="name">Name:</label><br />
      <input type="text" id="name" name="name" required /><br /><br />
      <label for="phone">Phone:</label><br />
      <input type="tel" id="phone" name="phone" required /><br /><br />
      <label for="email">Email:</label><br />
      <input type="email" id="email" name="email" required /><br /><br />
      <label for="language">Choose a programming language:</label><br>
      <select id="language" name="language">
        <option value="python">Python</option>
        <option value="javascript">JavaScript</option>
        <option value="java">Java</option>
        <option value="csharp">C#</option>
      </select><br><br>
      <input type="submit" value="submit" />
    </form>

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #999;
    padding: 0;
    margin: 0;

}

form {
    border: 2px solid black;
    background-color: white;
    border-radius: 5%;
    padding: 1em;
}

Build a Simple HTML Form with CSS Styling and a Dropdown Field

Learn how to build a basic HTML form, add light CSS for styling, and use the select dropdown field to expand your form-building skills.

Setup your desktop

The Project

How to add a Select dropdown to an HTML form

Add CSS to your HTML Form

Final Solution

Social

Contact