/html-forms

Building HTML Forms

Primary LanguageHTML

html-forms

Building HTML Forms

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"

Phase 0: Setup

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.

Phase 1: Creating the Form

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"

Phase 2: Basic Information

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

Phase 3: Drop Down Menu

Create a drop-down menu with the following:

Select element labeled "Status" with three options:

  • Student
  • Teacher
  • Guest

Phase 4: Radio Buttons

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"

Phase 5: Additional Information

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

Phase 6: Submission

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"

Preview

Screenshot of HTML Forms