Advanced Forms and Attribute Selectors

Download Exercise 15

Update: A solution is now included with the files.

Fun facts about forms

1. A form is first-and-foremost defined by the elements between <form> and </form> tags. There might be many text fields, radio buttons, and checkboxes, but if they all appear inside a single set of <form> tags, that’s one form.
2. Forms usually have at least two attributes, called method and action. The two options for method are get and post, and the action specifies a file to process the form when it gets submitted. So usually we’ll write something like <form id="contact" method="post" action="email-sender.php"">. We’ll go over these details later.
3. Most form elements are inline by default, and inline HTML elements need to be contained by block level elements to be valid. This is why you see so many pointless-looking <div> tags in forms.
4. The most common form elements — text inputs, textareas, and submit buttons — require illogical-looking markup. Pay special attention to the type attribute whenever you see an input:

   Form element	Markup	Output
   A single-line text field	<input type="text" />
   A multiline text area	<textarea rows="5" cols="20">I suppose some placeholder text could go here, but most people leave it out.</textarea>	I suppose some placeholder text could go here, but most people leave it out.
   A “submit” button that sends a form	<input type="submit" value="Submit Form!" />

Further Reading

• 24 Ways: Have a Field Day with HTLM5 Forms, by Inayaili de León
• 456 Berea Street: Styling form controls
• 456 Berea Street: Styling form controls with CSS, revisited
• Rethinking Forms in HTML5