This project allows you to use all the HTML forms knowledge you've learned so far. Using what you know about input elements create a detailed form gathering information about a user.
In this project, you are creating a basic survey form for the students and faculty of a/A to find out what their favorite programming language is with any additional comments they would like to submit.
At a minimum, your form must have the elements and features listed below.
-
Form element with a post method
-
Fieldset element
-
Legend element titled "Add user"
-
Single-lined text input field for the first name
-
Single-lined text input field for the last name
-
Single-lined text input field for the email address
-
Select element labeled "Status" with three options: a) Student b) Instructor c) Guest
-
A p tag with the sentence "Choose your favorite programming language:"
-
A radio button with the label "HTML"
-
A radio button with the label "CSS"
-
A radio button with the label "JavaScript"
-
A text area labeled "Comments"
-
Input element for the date labeled current date
-
A checkbox input element labeled "Sign up for newsletter"
-
A checkbox input element label "Agree to terms and conditions"
-
A submit button labeled "Submit"
Create a new repository in GitHub. This is a good opportunity to practice using Github and getting familiar with managing and pushing your projects up to your own repo.
You do want a README, so check that box. You don't need a .gitignore file yet, or a license. Not choosing a license at all is actually the strongest option - it's assumed you reserve all rights!
Clone your new repo and open it locally. Create a new file called index.html and open it.
Start by creating the HTML doc with the correct HTML tags and include the following in the body:
- Form element with a post method
- Fieldset element
- Legend element labeled "Add user"
After you've completed your set up start gathering basic information of the user:
- Single-lined text input field for the first name
- Single-lined text input field for the last name
- Single-lined text input field for the email address
Create a drop-down menu with the following:
Select element labeled "Status" with three options:
- Student
- Teacher
- Guest
Create a set of radio buttons that ask the user what their favorite programming language is:
- A p tag with the sentence "Choose your favorite programming language:"
- A radio button with the label "HTML"
- A radio button with the label "CSS"
- A radio button with the label "JavaScript"
Create elements that allow the user to input additional information and the current date.
- A text area labeled "Comments"
- Input element for the date labeled current date
Create two check boxes that allow the user to sign up for the newsletter and to agree to the terms and conditions. Finally, make a submit button that allows the user to submit their information.
- A checkbox input element labeled "Sign up for newsletter"
- A checkbox input element label "Agree to terms and conditions"
- A submit button labeled "Submit"