Skip to main content

Exercise 12

  1. Create a new folder with the name ex_12
  2. Create the following file structure
    /ex_12
    |-- img
    | |-- register_button.png
    |-- index.html
    |-- create_user.html

index.html

  1. Add a Document Title: Create User
  2. Add a Main Title: Create User
  3. Add an Horizontal Rule
  4. Create a form element with the following attributes:
    • action: create_user.html
    • method: get
    • enctype: 'application/x-www-form-urlencoded'
  5. Inside the form create the following inputs:
    • Create a text input with the folloging attributes:
      • name: username
      • placeholder: username
      • size: 30
      • maxlength: 12
      • Add a label for this input
    • Add a fieldset and legend elements. Legend content: User Form
    • Create a password input with the folloging attributes:
      • name: password
      • size: 30
      • maxlength: 8
      • placeholder: password
      • Add a label for this input
    • Create a radio button group with the following values:
      • Description: Select your favourite superheroe
      • Inputs values and description: Superman, Batman, Wonder Woman, Flash, Thor & Hulk
      • Default selected superhero can be Batman or Wonder Woman becouse they rock! your call
      • Inputs name should be superheros
      • Add a label for this input
    • Create a Checkbox group with the following values:
      • Description: Select your favourite video game
      • Inputs values and description: Fifa, NHL, Residen Evil & Uncharted
      • Default selected video game can be Fifa & Uncharted
      • Inputs name should be videogames
      • Add a label for this input
    • Create a hidden input with the following attributes:
      • name: userid
      • value: 2300
    • Create a image button:
      • name: login
      • src: add the path to get te register_button.png image
      • width and height: resize it to make the image look good

create_user.html

  1. Add a Document Title: Created User
  2. Add a Main Title: Created User
  3. Add an Horizontal Rule
  4. Add a parragraph with the following text: Now you can login to our site
  5. Create a fake link (href=#) around the login word from the previous paragraph

  1. Go to index.html
  2. Input all the form data
  3. Submit the form by clicking on the submit button
  4. The browser will navigate to the create_user.html page
  5. Take a look at the URL to see the data that you just input on the previous form