22 min read

Submit and Reset Buttons — the Complete Order Form

Submit and reset buttons, built-in validation with required, and the tea room's finished order form.

Submit and Reset

Two kinds of buttonHTML

1<form action="order-received.html" method="get">2  <label for="guest">Name</label>3  <input type="text" id="guest" name="name" required>4  <p>5    <button type="submit">Send order</button>6    <button type="reset">Clear form</button>7  </p>8</form>

What the browser shows

Form buttons
Form buttons

Press Send order with the name empty: the browser stops and asks you to fill it in. That is built-in validation from the required attribute. Fill it in and send again to see the result page.

The Complete Order Form

Kasun puts everything together. Try the whole form below — fill it in, submit it, and check the result page. Then press Reset and watch every field clear.

<h1>Order or Book</h1>
<form action="order-received.html" method="get">
  <fieldset>
    <legend>Your details</legend>
    <label for="name">Full name *</label>
    <input type="text" id="name" name="name" required>

<label for="email">Email *</label>
    <input type="email" id="email" name="email" required>

<label for="phone">Phone</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>

<fieldset>
    <legend>Your order</legend>
    <label for="tea">Tea</label>
    <select id="tea" name="tea">
      <option value="nuwara-eliya">Nuwara Eliya</option>
      <option value="uva" selected>Uva</option>
      <option value="ruhuna">Ruhuna</option>
      <option value="ginger">Ginger tea</option>
    </select>

<p><strong>Extras</strong></p>
    <label class="choice"><input type="checkbox" name="extras" value="milk"> Milk</label>
    <label class="choice"><input type="checkbox" name="extras" value="honey"> Honey</label>
    <label class="choice"><input type="checkbox" name="extras" value="love-cake"> Love cake</label>

<p><strong>How would you like it?</strong></p>
    <label class="choice"><input type="radio" name="service" value="eat-in" checked> Eat in</label>
    <label class="choice"><input type="radio" name="service" value="takeaway"> Takeaway</label>

<label for="notes">Notes</label>
    <textarea id="notes" name="notes" rows="3"></textarea>
  </fieldset>

<button type="submit">Send order</button>
  <button type="reset">Clear form</button>
</form>

What the browser shows

Try it:

Submit it empty first (validation stops you), then complete it and send. Every value on the result page came from a field's name and value.

The same form, with CSS styling, is on the example site's order page .

What Happens After Submit?

1 The browser checks required fields and input types (such as email). 2 It collects every field that has a name : text boxes, the checked checkboxes and radio button, and the selected option. 3 It sends them to the action address using the method . 4 A program on the web server (written in a language such as PHP, Python or JavaScript) stores the order, sends an email, and returns a thank-you page. This course covers the front end (what runs in the browser). The server program is back-end development.

Practice

Select everything a complete order form for a small business should include.

Choose all that apply.

More lessons in HTML · Next: Building a Multi-Page Site · Previous: Checkboxes, Radio Buttons and Dropdowns

Submit and Reset

Two kinds of buttonHTML

1<form action="order-received.html" method="get">2  <label for="guest">Name</label>3  <input type="text" id="guest" name="name" required>4  <p>5    <button type="submit">Send order</button>6    <button type="reset">Clear form</button>7  </p>8</form>

What the browser shows

Form buttons
Form buttons

Press Send order with the name empty: the browser stops and asks you to fill it in. That is built-in validation from the required attribute. Fill it in and send again to see the result page.

The Complete Order Form

Kasun puts everything together. Try the whole form below — fill it in, submit it, and check the result page. Then press Reset and watch every field clear.

<label for="email">Email *</label>
    <input type="email" id="email" name="email" required>

<label for="phone">Phone</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>

<label for="notes">Notes</label>
    <textarea id="notes" name="notes" rows="3"></textarea>
  </fieldset>

<button type="submit">Send order</button>
  <button type="reset">Clear form</button>
</form>

What the browser shows

Try it:

Submit it empty first (validation stops you), then complete it and send. Every value on the result page came from a field's name and value.

The same form, with CSS styling, is on the example site's order page .

What Happens After Submit?

1 The browser checks required fields and input types (such as email). 2 It collects every field that has a name : text boxes, the checked checkboxes and radio button, and the selected option. 3 It sends them to the action address using the method . 4 A program on the web server (written in a language such as PHP, Python or JavaScript) stores the order, sends an email, and returns a thank-you page. This course covers the front end (what runs in the browser). The server program is back-end development.

Practice

Select everything a complete order form for a small business should include.

Choose all that apply.