- 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.
- 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
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
- 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
- set the method and action to send a get request to the
- 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
- 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
- set the method and action to send a get request to the
- 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
- 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
- set the method and action to send a get request to the
- 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
In example_05.html
, make a form that looks like this: