company logo

Before you start

Components List

Navigation

Data Display

Forms

Creating a Form using HTML and CSS

What you'll learn

  • Flexbox
  • How to style a form

Prerequisites

  • Basic HTML and CSS

React verison coming soon!

The Code

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Static Site</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class = "form-cont">
        <form action="submit">
            <div class = "formItem">
                <label for="fName">First Name</label>
                <input type="text" id = "fname" name = "fname" placeholder = "Enter here">
            </div>
            <div class = "formItem">
                <label for="lName">Last Name</label>
                <input type="text" id = "lname" name = "lname" placeholder = "Enter here">
            </div>
            <div class = "formItem">
                <label for="country">Country</label>
                <select id="country" name="country">
                    <option value="australia">USA</option>
                    <option value="canada">Canada</option>
                    <option value="usa">Mexico</option>
                </select>
            </div>
            <div class = "formItem">
                <label for="desc">Description</label>
                <textarea name="desc" id="desc" cols="30" rows="10"></textarea>
            </div>
            <button>Submit!</button>
        </form>
    </div>
    <script src="script.js"></script>
    </body>
    </html>
Open on CodeSandboxOpen Sandbox

* If the component preview isn't loading, try refreshing the page.

* You can adjust the size of the code preview and code by draging the sides!

Explanation

HTML

  • Let's start out with creating an overall container to hold our form. We will then create our form using the <form> tag and start adding our elements.
  • Each form element will be in its own container. For our text inputs, we use a label with a 'for' referencing the text inputs 'name'. We do the same for our select dropdown, but we aren't using input, but rather the <select> element. Finally, we create a text area with the same pattern as before.

CSS

  • We will always start by resetting the entire document's margin and padding.
  • For our form, we'll make a flex container and set it to column. For each type of input(and button), we will add some basic padding, border, and border radius. We will allow them to take the full width of our container
  • Our overall container named form-cont will have a light grey background and a display of flex, so we can position the form in the center of our screen.
  • Each of our inputs is contained within a container with the class formItem, where we will create a flex container again with the direction of column. We will align everything to the start to prevent our items from stretching.

Javascript

  • No JS needed(yet :))

Made by Sam Kotecha

linkedin logo