Simple Form

In this project, you create a simple but styled and responsive form.

The goal

A nice-looking styled form that looks great on devices of any sizes.

What you will learn
  • Creation of a simple HTML form
  • using different form elements such as lists, inputs, ragiobuttons, checkbuttons and others
  • styling the webpage to make it look great and responsinve.
Preliminary material

Please refer to the very first project in this series that explains in detail how to create and work on a project: https://www.codingwolves.io/project/a179f0e9/simple-personal-page 

Before you start, get familiar with the basics of HTML forms. We found these resources pretty clear:

You also may want to refresh your memory about some common principles of HTML and CSS:

This is also a good short introduction to HTML: https://www.geeksforgeeks.org/html-introduction/ 

We use the Fontawesome version 5.1 for icons and Google Fonts for the font.

For the brand icon styles (brand colors) please use this CSS file: https://github.com/CodingWolvesIO/assets/blob/main/HTML-CSS/brand-colors.css 

Instructions
  1. Create the project folder, add files, and include all links. The most detailed instructions on how to start any project can be found in Step 1 of the first project
  2. Think out which form you want to create, find the assets (pictures), think about the style. For inspiration, you may visit Dribbble, the community for graphic design. But keep in mind, most projects there are based on very customized elements that are far out of the scope of this exercise.
  3. To make the process easier you may want to draw the layout of your future form on paper, or in your favorite prototyping tool.
  4. Create a simple form, add the elements.
  5. In our example project, we wrap any new line in a specific block (the div tag), which makes it easier to work with rows.
  6. Add the style to the whole form, style the separate elements.
  7. If you use images, it's a good practice to work with images of different sizes. In our example, all the images are different but we set up the following rules that keep all of them the same size:
        max-width: 100%;
        height: 100%;
        object-fit: cover;
  8. Note that if you set up both height and width, the images may be stretch what is not the desired behavior.
  9. If you use radiobuttons, make sure if you click one, others will reset.
  10. Make sure the text and elements are aligned well. It's a good practice to set up the size as a percentage of the total available width. 
    Note. If you are struggling to set up the width as a percentage for text input, try to add the following rule to their class:
    box-sizing: border-box;
    This rule tells the browser to calculate the width taking into account border and padding, see the full explanation here.
  11. Add the media queries, play with your webpage in different modes for different sizes to make sure it looks great everywhere.
Additional ideas
  • Find some interesting ideas of forms; for inspiration, visit online services for generating the forms like jotforms or others;
  • play with colors, sizes, images, controls.
Screenshots
Acceptance criteria
  1. The page has a form with at least 4 form elements (in our example they are: radiobuttons, text input, date, time, select) and text input, select, and radiobuttons are mandatory elements.
  2. When you click on one of the radio buttons, others should reset.
  3. All the rows and columns should have enough space between them and inner elements. No a "butt-to-butt" joints allowed.
  4. The page should look great on any device!
Share your experience with this project, help others, ask and answer questions, get feedback
Ali Hamidi
Dec 22, 2021 01:48:00
Question
Not a responsive view

Another question is why my form looks so bad on small screens? I thought, it should at least scale controls but it doesn't:

Ali Hamidi
Dec 22, 2021 01:31:15
Question
How to change the form look?

I've just started this project. It's not clear to me how to change the look of the form inputs. The background color is not working and I don't know how to change its text. Thanks.