lesson-5-form

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS - link to the external CSS file -->
    <link rel="stylesheet" href="/lesson-4/css/styles.css">

    <title>Contact</title>

    <!-- FOLDER STRUCTURE

            lesson-4
                ∟ css
                    ∟ styles.css
                ∟ form.html
                ∟ index.html

    -->

</head>

<body>

    <div id="header">
        <h1>This is a <span class="pageName">contact</span> page</h1>
        <h2>Tag line</h2>
    </div>

    <div id="topNavigation">
        <ul>
            <li> <a href="index.html"> home </a> </li>
            <li> <a href="form.html"> contact </a> </li>
        </ul>
    </div>

    <div id="main">
        <form>

            <label for="fname">First name<small>*</small></label>
            <input type="text" id="fname" name="fname" required placeholder="John" autofocus pattern="[A-Za-z]{3}">

            <label for="lname">Last name<small>*</small></label>
            <input type="text" id="lname" name="lname" required placeholder="Green" pattern="[a-zA-Z]{5}">

            <label for="email">Your email<small>*</small></label>
            <input type="email" id="email" name="email" required placeholder="j.green@email.com"
                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

            <label for="destination">Choose your destination:<small>*</small></label>
            <select id="destination" name="destination" required>
                <option value="0">--</option>
                <option value="London">London</option>
                <option value="Barcelona">Barcelona</option>
                <option value="Berlin">Berlin</option>
                <option value="Manchester">Manchester</option>
            </select>

            <label for="passengers">How many passengers?<small>*</small></label>
            <input type="number" id="passengers" name="passengers" required min="1" max="10" step="1" value="1">

            <label for="fromDate">First day of travel:<small>*</small></label>
            <input type="date" id="fromDate" name="fromDate" required min="2022-03-09" max="2022-06-09">

            <label for="toDate">Last date of travel:<small>*</small></label>
            <input type="date" id="toDate" name="toDate" required min="2022-03-10" max="2022-06-10">
            <br>
            <br>
            <input type="submit" value="Confirm Order">
            <br>
            <small>* these fields are mandatory</small>

        </form>
    </div>

    <!-- Footer -->
</body>

</html>