A complete order form

Combine several controls in one form, choosing each with care.

What to build

An order form.

Requirements

• A select named size with options whose values and text are: s Small, m Medium, l Large. m is selected from the start.
• A number input named qty, with min="1" and value="1".
• A phone input named phone, of the type meant for phone numbers.
• A textarea named note with rows="3".
• A checkbox named gift with value="yes".
• Every control has a joined label.

Constraints

Use one form. Do not use type="number" for the phone.

Example

<option value="s">Small</option>

Why it works

Each control fits its answer: a fixed list of sizes, a counted quantity, a keypad for phone numbers, free text, and one independent yes or no.

Hints

Solution

<form>
  <label for="size">Size</label>
  <select id="size" name="size">
    <option value="s">Small</option>
    <option value="m" selected>Medium</option>
    <option value="l">Large</option>
  </select>
  <label for="qty">Quantity</label>
  <input id="qty" name="qty" type="number" min="1" value="1">
  <label for="phone">Phone</label>
  <input id="phone" name="phone" type="tel">
  <label for="note">Note</label>
  <textarea id="note" name="note" rows="3"></textarea>
  <input id="gift" name="gift" type="checkbox" value="yes">
  <label for="gift">Gift wrap</label>
</form>

Lesson: The right control for each question →