Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Request a hotel room</title>
- <link rel="stylesheet" type="text/css" href="style.css">
- </head>
- <body>
- <form>
- <fieldset>
- <legend>Personal data</legend>
- <div class="double-input">
- <div class="form-input-container">
- <label for="fname">First name</label>
- <input type="text" id="fname" placeholder="Ania" minlength="3" required>
- </div>
- <div class="form-input-container">
- <label for="lname">Last name</label>
- <input type="text" id="lname" placeholder="lname" minlength="3" required>
- </div>
- </div>
- <div class="double-input">
- <div class="form-input-container">
- <label for="email">E-mail</label><input type="email" id="email" placeholder="e-mail" required>
- </div>
- <div class="form-input-container">
- <label for="phone">Phone</label><input type="tel" id="phone" placeholder="phone" required>
- </div>
- </div>
- </fieldset>
- <fieldset>
- <legend>Room details</legend>
- <div class="double-input">
- <div class="form-input-container">
- <label for="hotelcity">City</label>
- <select id="hotelcity">
- <option value="new-york">New York</option>
- <option value="las-vegas">Las Vegas</option>
- <option value="chicago">Chicago</option>
- <option value="miami">Miami</option>
- </select>
- </div>
- <div class="form-input-container">
- <label for="capacity">For (capacity)</label>
- <input type="number" id="capacity" value="1" min="1" max="10" step="1" />
- </div>
- </div>
- <div class="double-input">
- <div class="form-input-container date-select">
- <label for="start-date-day">Start Date</label>
- <select name="start-date-day">
- <option disabled selected>Day</option>
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- <option value="5">5</option>
- </select>
- <label for="start-date-month">Start Month</label>
- <select name="start-date-month">
- <option disabled selected>Month</option>
- <option value="january">January</option>
- <option value="february">February</option>
- <option value="march">March</option>
- <option value="april">April</option>
- <option value="may">May</option>
- </select>
- </div>
- <div class="form-input-container date-select">
- <label for="end-date-day">End Day</label>
- <select name="end-date-day">
- <option disabled selected val="">Day</option>
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- <option value="5">5</option>
- </select>
- <label for="end-date-month">End Month</label>
- <select name="end-date-month">
- <option disabled selected val="">Month</option>
- <option value="january">January</option>
- <option value="february">February</option>
- <option value="march">March</option>
- <option value="april">April</option>
- <option value="may">May</option>
- </select>
- </div>
- </div>
- </fieldset>
- <button type="submit">Submit a request</button>
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement