Responsive Form Using HTML And CSS
Tags: html, css
Published: 2021-03-08 03:40:15

Today I am going to demonstrate a [responsive](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) `Form` utilizing HTML and CSS. This is going to be a simple `survey form` intended for Web Developers. It includes their information, a dropdown menu that describes their current role, a checkbox feature to describe their favorite technologies and tool, a radio button feature for their recommendations, a textarea to leave any other comments or suggestions, and a submit button to submit the form. My goal here is to make it fully responsive. So let’s begin.

First thing first, I am going to make a directory where my project is going to be saved. Then open up VScode(My favorite text editor), and create `index.html` and `style.css` files. Those are the only files, we need for this project. Right now it looks something like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flehhlk7ktqgrly3o7yd.png)

Inside the `html` file, I added a DOCTYPE declaration, and link tag of the stylesheet to connect the `style.css` file and on the right, I have a `style.css` file where I added a background-color to the body of the HTML page. Nothing much happening here but right now if I open up my HTML page in the browser by using `open html.index` command in the terminal, I can see a purple screen like so:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdcgbge8avfqnozym239.png)

Now let’s create a `form` then we will add the CSS at the end.

```html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="style.css">
   <title>Developer's Survey Form</title>
</head>
<body>
   <div class="container">
       <header>
           <h1 id='title'>Web Developer's Survey Form</h1>
           <p id='description'>
               Thank you for taking the time to do this survey
           </p>
       </header>
  
       <form id='survey-form'>
           <div class='form-input'>
               <label id='name-label'>Name</label>
               <input type='text' id='name' placeholder='Enter your name' class='form-input-size' required />
           </div>
           <div class='form-input'>
               <label id='email-label'>Email</label>
               <input type='email' id='email' placeholder='Enter your email' class='form-input-size' required />
           </div>
           <div class='form-input'>
               <label id='number-label'>Age
                   <span>(optional)</span>
               </label>
               <input type='number' id='number' placeholder='25' min='0' max='80' class='form-input-size' />
           </div>
  
           <div class='form-input'>
               <p>Which option best describes your current role?</p>
               <select id='dropdown' class='form-input-size' required>
                   <option disabled selected value>Select current role</option>
                   <option value='Student'>Student</option>
                   <option value='Senior Software Engineer'>Senior Software Engineer</option>
                   <option value='Junior Software Engineer'>Junior Software Engineer</option>
                   <option value='Full Stack Web Developer'>Full Stack Web Developer</option>
                   <option value='Front-end Web Developer'>Front-end Web Developer</option>
                   <option value='Back-end Web Developer'>Back-end Web Developer</option>
                   <option value='Prefer not to say'>Prefer not to answer</option>
                   <option value='Other'>Other</option>
               </select>
           </div>
  
           <div class='form-input'>
               <p>Would you recommend Web Development career to a friend or family?</p>
               <input type='radio' name='answer' id='radio-btn' value='Definately' checked />Definately    </br>
               <input type='radio' name='answer' id='radio-btn' value='Maybe' />Maybe </br>
               <input type='radio' name='answer' id='radio-btn' value='Not sure' />Not sure </br>
           </div>
  
           <div class='form-input'>
               <p>What are your favorite Technology Languages and Frameworks?
                   <span>(Check all that apply)</span>
               </p>
               <label><input type='checkbox' id='check-box' value='Ruby on Rails'>Ruby on Rails</label>
               <label><input type='checkbox' id='check-box' value='JavaScript'>JavaScript</label>
               <label><input type='checkbox' id='check-box' value='React'>React</label>
               <label><input type='checkbox' id='check-box' value='Python'>Python</label>
               <label><input type='checkbox' id='check-box' value='Java'>Java</label>
               <label><input type='checkbox' id='check-box' value='PHP'>PHP</label>
               <label><input type='checkbox' id='check-box' value='Angular'>Angular</label>
               <label><input type='checkbox' id='check-box' value='Vue'>Vue</label>
               <label><input type='checkbox' id='check-box' value='Swift'>Swift</label>
               <label><input type='checkbox' id='check-box' value='HTML'>HTML</label>
               <label><input type='checkbox' id='check-box' value='CSS'>CSS</label>
               <label><input type='checkbox' id='check-box' value='Other'>Other</label>
           </div>
  
           <div class='form-input'>
               <p>Any comments or suggestions to a new Web Developers?</p>
               <textarea type='text' placeholder='Enter your comment here...'></textarea>
           </div>
  
           <div class='form-input'>
               <button type='submit' id='submit'>Submit</button>
           </div>
       </form>
   </div>
  
</body>
</html>

```
Above I created a header, form, and added `id` `class` `div` etc for reference. We will use them to style later on. Currently, it looks something like this in the browser right now:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfkfnh8y3ur2i0oa1pxc.png)

Looks okay but let’s add some CSS to make it better and responsive. I will work each section at a time to have a better picture of how it is working. So let’s work on the body page and header part first. In the `style.css` file add the following code:

```css

html{
    font-size: 16px;
}

body{
    background-color: rgba(98, 95, 241, 0.635);
    margin: 0;
    font-family: sans-serif;
    color: white;
}

.container{
  width: 100%;
  margin: 3.2rem auto 0 auto;
}

@media(min-width: 576px){
  .container{
    max-width: 540px;
  }
}

@media(min-width: 768px){
  .container{
    max-width: 720px
  }
}

header{
    text-align: center;
    margin-bottom: 1.5rem;
}

h1{
  font-weight: 400;
}

#description{
  font-weight: 200;
  font-style: italic;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5)
}

```
Here I am not going to talk about every CSS element we are using but I will mention the factors which could affect the responsive design. Above in `html` we have `font-size` set to 16px and further I am going to use `em or rem` instead of `px` on `font-size`. You can refer to this [documentation](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) about `em and rem` to get detailed information. Another important thing is `@media`, which plays a huge role to make your layout responsive. It will let you add the breakpoints and according to the breakpoints, you can style your CSS. Above I added two breakpoints and added desire width on container class based on device size. To learn more about `@media` refer to this [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries). The output from the above CSS looks like so:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pnsig2xu2r7jdpjzzhm.png)

You can check it out in all device size in your `developer tool` whether or not it’s responsive. Now let’s move on to the `Form`. It’s looking very congested right now. I am going to add a background color and some padding/margin to it and work slowly on each section. 

```css

#survey-form{
   background: rgba(21, 20, 85, 0.7);
   padding: 2.3rem 0.5rem;
   border-radius: 0.3rem;
}
 
.form-input{
   margin: 0 2.5rem 1.2rem 2rem;
}
 
.form-input-size{
   display: block;
   width: 100%;
   height: 1.5rem;
   padding: 0.3rem 0.4rem;
   border-radius: 0.2rem;
   outline: 0;
   border-style: none;
   margin-top: 0.4rem;  
}
```

Adding these code will output the following result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75c9yaw1t0graktrj0lf.png)

Ahh much better right? If you notice I am using `rem` instead of `px` in most of the places. If you haven’t read the documentation about `em and rem` please read it from the above link I provided earlier. Now that padding, margins, and inputs look good, let’s fix the checkbox, radio buttons, and labels. Add the following in your CSS file:

```css
p{
 font-size: 1.12rem;
}
 
#radio-btn,
#check-box {
 margin-right: 0.5rem;
 min-height: 1.2rem;
 min-width: 1.2rem;
}
 
label {
 display: flex;
 align-items: center;
 font-size: 1.125rem;
 margin-bottom: 0.5rem;
}

```
Here I want to mention `display: flex` in the label section. Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. It’s responsive so it can save some time on designing layouts. To read more about Flexbox follow this [link](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). I also recommend that comment out each line of code and see the difference and what each one of those lines doing. Here is the result from previous changes:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9cmirvqeo7q9lcq9n52.png)

We are almost there. The last thing we have to accomplish is the textarea and a submit button. So let’s add some styling to it like so:

```css

textarea{
 width: 100%;
 min-height: 6rem;
 resize: vertical;
 padding: 0.5rem 0 0 0.5rem;
}
 
#submit{
 width: 100%;
 padding: 0.8rem;
 background: rgb(7, 173, 7);
 color: white;
 border-radius: 0.2rem;
 cursor: pointer;
 border: none;
}
```
Here I would like to discuss few things: 
* by adding `resize: vertical;` we are allowing users to only expand the `textarea` vertically so that it won’t go outside our form box and look odd.
* `cursor: pointer;` will give us a pointer icon upon hover and make it easier to understand that it’s clickable.
* `border: none;` will remove the outline border from buttons and make it more elegant.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6llduuldzq3zy55z7y5.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91mdvbogwgb71c4syung.png)

Alright! We did it. I add the final result in mobile view as well. Make sure you test it in all device sizes as well. I hope you enjoyed this tutorial on creating a `responsive form`. Thank you