forms

HTML forms

Exercise #1: Login form

• Create a login form with two fields and a submit button
• The first field is called username.
• The second field is called pw.
• The submit button should have the label Login.
• Leave the action attribute of the form empty

Exercise #1b: Sending form data

• Set the action of the previous form to http://www3.ux.uis.no/~balog/dat310/formtest.php.
• Check what happens upon submitting the form.
• Which form method should you use in this case: GET or POST?

Exercise #2: Subscription form

Create the form below.

• Personal details:
  • First and last name as text inputs, email address as input type email.
  • Gender (male/female) as radio buttons (by default none of them is selected).
• List of magazines to be selected with checkboxes.
• Subscription period as a select list: 6, 12, 18, or 24 months.
• The submit button is labeled as Subscribe.

Exercise #3: Subscription form (2)

• Extend the form you created in the previous exercise.
• Label the fields using <label>.
  • Because of the follow-up exercise, keep labels separate from the form control and use the for attribute.
• Group the fields using <fieldset>.
• Add a hidden field campaign_id.
• Set the form action to http://www3.ux.uis.no/~balog/dat310/formtest.php and check what happens upon submission.

Exercise #4: Subscription form (3)

• Use css to style the form you created in the previous exercise:
  • Set a fixed width for the fieldsets, apply a background color, and align them in the middle of the page.
  • Align the fields. (Hint: you can set the width property of the <label> tag.)
  • Align the submit button in the middle of the page.

Exercise #5: HTML5 form elements

Try some of the other HTML5 input types, e.g., color, url, search, date, etc. How are these displayed in different browsers?