We regularly come across fields on web pages used to collect user input, like names, e-mail addresses, checkbox answers or messages. This bundle of features on a website is a form. Forms are the most common interface used on websites or web applications. A form consists of different form elements called controls or widgets. Controls are usually defined by input elements which in their turn have numerous different types. So, a form can have for instance three input elements; one with type "text" for name, another one with type "email" for e-mail address and a third one with type "submit"; the well known submit button.
HTML Forms help us collect data. But what is the best way and the most effective structure to ask and gather specific information? What can be included in order to make it easier for the user to submit these data?
Read up on the basics of Forms
Think about what you want to include in a form
Draw a sketch of a form on paper
Mozilla Developer Network: My First HTML Form
The most common way to define a form element is the input element. Input elements can have a multitude of types, defined by the type attribute. However, they are not the only types of form elements.
Discover the different types of input elements
Learn the difference between the various form elements
Mozilla Developer Network: The <input> element
Mozilla Developer Network: The native form widgets
Transfer the HTML form sketch to code. Using the resources above decide on which elements you should use for your form and how is best to order them in the form.
Fork the code on the Plunker link below
Add form elements of your choice to build the form
Use and change the existing CSS to style your form
Hit Run on Plunker to see what it looks like
Plunker: Build an HTML Form