Pizza Order

index.html

<h1>Zentraler Pizza-Service der Fachhochschule Südwestfalen</h1>
<form method="post" action="https://localhost/inet_sose2019/echo.php" target="_blank">
  <section id="customer_data">
    <p><label for="customer">Name:</label><input id="customer" name="customer" required="true" /></p>
    <p><label for="phone">Telefon:</label><input id="phone" type="tel" name="phone"></p>
    <p><label for="email">Email:</label><input id="email" type="email" name="email"></p>
    <p>
      <label for="location">Standort:</label>
      <select id="location" name="location">
        <option value="hagen">Hagen</option>
        <option value="iserlohn">Iserlohn</option>
        <option value="meschede">Meschede</option>
        <option value="soest">Soest</option>
      </select>
    </p>
  </section>

  <fieldset>
    <legend> Größe </legend>
    <div><label> <input type="radio" name="size" value="small"> Klein </label></div>
    <div><label> <input type="radio" name="size" value="medium" checked="true"> Mittel </label></div>
    <div><label> <input type="radio" name="size" value="large"> Groß </label></div>
  </fieldset>
  <fieldset>
    <legend> Pizza Toppings </legend>
    <div><label> <input type="checkbox" name="mozzarella"> Mozzarella </label></div>
    <div><label> <input type="checkbox" name="zwiebeln"> Zwiebeln </label></div>
    <div><label> <input type="checkbox" name="champignons"> Champignons </label></div>
    <div><label> <input type="checkbox" name="salami"> Salami </label></div>
  </fieldset>
  <p><label>gewünschte Lieferzeit:</label> <input type="time" name="delivery_time" min="11:00" max="21:00" step="900"></p>
  <input type="date" name="delivery_date" value="2019-04-28"></p>
  <p><label for="instructions">Sonderwünsche:</label> <textarea id="instructions" name="instructions"></textarea></p>
  <p><input type="submit" label="Bestellung absenden"/></p>
</form>

pizza-order.markdown

Pizza Order

A Pen by Christian Gawron on CodePen.

License.

style.css

* {
  font-family: "IBM Plex Sans";
}

p > label {
  display: block;
  margin-top: 0.5ex;
}

fieldset {
  margin-top: 2ex;
  margin-bottom: 2ex;
  width: 15em;
}