willyschu/html-forms

HTML forms and form elements

Setup

• Fork
• Clone
• CD into the directory
• Run open index.html

When you add HTML elements to the forms, and click the button, you will see a table of types / names / values appear below. This is how you'll know you did it correctly.

Resources

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form
• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
• http://diveintohtml5.info/forms.html

Challenge #1

Inside the form in index.html add some fields:

• add two inputs with the type "text"
  • give one a value
• add two textareas
  • give one some pre-filled text
• add an input of type "email"
• add an input of type "date"
• add an input of type "number"
• add an input of type "file"
• for each input and textarea, add a label with a for attribute that matches
• add unique names and ids to each
• make one of the text fields have focus when the page loads
• give one of the fields some placeholder text
• add a submit button (input with a type of submit)
  • submit the form and inspect the results

Challenge #2

• in the example_02.html file add a form
  • set the method and action to send a get request to the example_02.html page
• add 2 hidden fields, give each a unique name and value
• add three inputs with the type "checkbox"
• wrap each checkbox in a label with some text
• make one checkbox checked by default when you load the page
• make one checkbox have the same name as a hidden field
• add a submit button (a button with a type of submit)
  • submit your form, inspect the results

Challenge #3

• in the example_03.html file add a form
  • set the method and action to send a get request to the example_03.html page
• add a fieldset with a legend for "Size"
  • add three radio buttons, for small, medium and large, each with a label
  • give each the same name and different values
• add a fieldset with a legend for "Color"
  • add three radio buttons, for blue, red and yellow, each with a label
  • make "red" pre-selected when the page loads
• Add a submit button (input or button), submit your form and inspect the results

Challenge #4

• in the example_04.html file add a form
  • set the method and action to send a get request to the example_04.html page
• add 4 select boxes with options
• in the first
  • add options with values and text
  • make one of them selected by default when the page loads
• in the second, add options with just text
• in the third, add some options with blank values
• make the 4th a multi-select box
• add labels for all select boxes
• add a submit input or button, submit the form and inspect the results

Extra:

• add optgroups with labels to group options

Challenge #5

In example_05.html, make a form that looks like this: