The form controls how the webapp looks and is a key component of the user experience.
The form is created using HTML & CSS.
This quick start guide will provide you with the basics that you need when creating the form of a webapp.
The Hyper-Text Markup Language (HTML) is the foundation for all webpages; which are in turn the foundation of all webapps - they are the building blocks and can be thought of as similar to the elements (materials) used in building a house. If you right-click on this webpage and click View Source, you will see the use of the div, p and a elements. Elements have attributes that define them, ie the a element has an attribute of href which is the webpage (URL) that will be opened when clicked by the user.
Some common HTML elements used in webapps include;
Cascading Style Sheets (CSS) is a language that describes the style of the elements - ie how they look.
Again if you think about building a house, then the brick as an element would have a style of color equal to say brown.
Some common styles used in webapps include;
Example CSS style definition use on a p element;
<p style="background-color:lightblue; color:steelblue; padding:6px; margin:4px; text-align:center;">Hello!</p>
Hello!
To make it easier to work with CSS you can group styles together as a class.
You can then set the class attribute on an HTML element which will then set the style (look) of that element. This is also helps keep the look of your webapp consistent and you can then change the styles in a class once, which makes the change everywhere in the webapp.
Example CSS class definitions and use on a p element;
.example
{
background-color: lightblue;
color: steelblue;
padding: 6px;
margin: 4px;
text-align: center;
}
<p class="example">Hello!</p>
Hello!
Rather than creating all your classes (styles) from scratch, you can use existing free frameworks that have done a lot of the work for you. One of the most popular (and used with this webpage) is bootstrap.
Some common bootstrap classes used in webapps include;