Weekly Task - Laying out Forms

The purpose of this task is to increase your understanding of how to layout forms.

1 Setup

• Create the file form_task.html and store it in a safe place on your u drive. Copy the starting HTML source code from here https://raw.githubusercontent.com/sirus21/Internet_technology/master/session8/practicals/session_8_main_task.html and past it into form_task.html.

• Include create an external css file and <link> it to form_task.html

2 Lay out the form

As you can see, currently no consideration has been given to the layout of the form. Using the techniques we covered in the lecture, your task is to lay the form out. As a minimum you should:

• Use <p> tags to divide inputs and labels into related lines
• Use fieldset and legend to group together common inputs
• Ensure inputs and labels are aligned correctly
• Style the submit button

3 HTM5 validation

Apply an HTML5 validation to your form and use the :invalid or :valid pseudo class so users know if their input is valid.

4 Validate your HTML

Make sure your HTML is valid.

5 Optional (Advanced Tasks)