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;

Tag Name Description Attributes
div division Used to divide up the page - ie acts as a container
p paragraph A container for text
a hyperlink / anchor Used to create a link to another webpage - ie to a part of your webapp
h1 to h6 ... headers Used to mark text as a header - more about this in the CSS section below.
ul, li unordered list, list item Used to create a list of items.
input input Used to create input boxes for user interaction - ie collect information.
table table Used to show a table of information - like this list of elements!


Try it yourself


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;

Name Description Definition
background-color Used to set the background colour of an element.
color Used to set the colour of an element.
margin Used to set the space around an element.
padding Used to set the space inside an element.


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!

Try it

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!

Try it

Making it even easier to work with CSS

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;

Class Description Definition
container, row, col ... Used as part of a 12 column grid system to help layout pages.
btn Used to style buttons - ie for users to click/press.
table Used to style a table - ie hover effect.
alert For highlighting a message.
list-group A list of options.
m-, p- For setting margins and padding.


Try it