In this lesson, students will learn:
Files to Download
At the end of this project, the student will be able to demonstrate their ability to:
- Use information from the design to obtain measurements to style the elements
- Create a page structure using divisions <div>
- Create a form and style with CSS
- Folder: lastname_firstname-styled-web-form
- XHTML document: styled-webform.html
- Directory structure
- External style sheet
- Use the image provided to obtain measurements needed (height, width, margin and/or padding) in Photoshop
[Click on image twice to get the large images, download and open in Photoshop].
- Open Sans ( Main font, Google Web Font) and Arial (Secondary)
- Default 1em
- Copyright .8em
- Logo 5em
- form text box .8em
Place files in a folder and name: lastname_firstname-styled-web-form.
Share folder link at the end of class to the Google Classroom > Styled Web Forms.
Upload at the end of the class.
DUE: Friday, December 8, 2017
In this lessons, students will learn:
- How to create a style a web form with CSS
Create an HTML document and re-create the web form below.
- Name and Email box have a character width of 30 and a maximum of 100 characters.
- “How did you hear about us?” has four options:
Google, Friend, Advert and Other.
- The comments box is 4 characters high and 40 characters wide.
Upload the file to the Google Classroom > Web Form.
Aim: How to create a simple web form
In this lessons, students will apply:
- The different tools for collecting data
- Whenever you want to collect information from visitors you will need a form, which lives in the <form> element.
- Information from a form is sent in name/value pairs.
- Each form control is given a name and the text the user types in or the values of the options they select are sent to the server.