<!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">
    <title>HTML Forms</title>
    <link rel="stylesheet" href="layout.css">
</head>

<body>

    <h1>HTML Forms</h1>

    <form>

        <!-- Username -->
        <label for="username">enter username:</label>
        <input type="text" id="username" name="username" placeholder="username" required>
        <br><br>
        <!-- Email -->
        <label for="email">enter email:</label>
        <input type="email" id="email" name="email" placeholder="your email" required>
        <br><br>
        <!-- Password -->
        <label for="password">password:</label>
        <input type="password" id="password" name="password" placeholder="choose password" required>
        <!-- Radio Buttons -->
        <p>Select your age:</p>

        <input type="radio" name="age" value="0-25" id="option-1">
        <label for="option-1">0-25</label>
        <br><br>
        <input type="radio" name="age" value="26-50" id="option-2">
        <label for="option-2">26-50</label>
        <br><br>
        <input type="radio" name="age" value="51+" id="option-3">
        <label for="option-3">51+</label>

        <br><br>

        <label for="question">Security question:</label>
        <select name="question" id="question">
            <option value="q1">what colour are you favourite pair of socks</option>
            <option value="q2">If you could be a vegetable, what would it be</option>
            <option value="q3">What is your best ever security question?</option>

        </select>

        <br><br>

        <label for="answer">Security question answer:</label>
        <input type="text" id="answer" name="answer">

        <br><br>

        <label for="bio">Your bio</label><br>
        <textarea name="bio" id="bio" cols="30" rows="10" placeholder="about you..."></textarea>
        <br><br>
        <!-- Submit -->
        <input type="submit" value="submit the form">

        <input class="favourite styled" type="button" value="Add to favourites">
        <br><br>

        <!-- Check Box -->
        <fieldset>
            <legend>Choose your monster's features:
            </legend>

            <div>
                <input type="checkbox" id="scales" name="scales" checked>
                <label for="scales">Scales</label>
            </div>

            <div>
                <input type="checkbox" id="hornes" name="hornes">
                <label for="hornes">Hornes</label>
            </div>
        </fieldset>
        <br><br>

        <!-- Colour -->
        <p>Choose your monster's colors:</p>

        <div>
            <input type="color" id="head" name="head" value="#e66465">
            <label for="head">Head</label>
        </div>

        <div>
            <input type="color" id="body" name="body" value="#f6b73c">
            <label for="body">Body</label>
        </div>
        <br><br>
        <!-- Date -->
        <label for="start">Start date:</label>

        <input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31">
        <br><br>

        <!-- Local Date/Time -->

        <label for="meeting-time">Choose a time for your appointment:</label>

        <input type="datetime-local" id="meeting-time" name="meeting-time" value="2018-06-12T19:30"
            min="2018-06-07T00:00" max="2018-06-14T00:00">
        <br><br>

        <!-- Choose a File -->
        <label for="avatar">Choose a profile picture:</label>
        <br><br>

        <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">
        <br><br>

        <!-- Hidden -->
        <div>
            <label for="title">Post title:</label>
            <input type="text" id="title" name="title" value="My excellent blog post">
        </div>
        <div>
            <label for="content">Post content:</label>
            <textarea id="content" name="content" cols="60" rows="5">
                This is the content of my excellent blog post. I hope you enjoy it!
                    </textarea>
        </div>
        <div>
            <button type="submit">Update post</button>
        </div>
        <input type="hidden" id="postId" name="postId" value="34657">
        <br><br>

        <!-- Image -->

        <p>Sign in to your account:</p>

        <div>
            <label for="userId">User ID</label>
            <input type="text" id="userId" name="userId">
        </div>

        <input type="image" id="image" alt="Login" src="images/login.png">
        <br><br>

        <!-- Month -->

        <label for="start">Start month:</label>

        <input type="month" id="start-1" name="start" min="2018-03" value="2018-05">
        <br><br>

        <!-- Number -->
        <label for="tentacles">Number of tentacles (10-100):</label>

        <input type="number" id="tentacles" name="tentacles" min="10" max="100">
        <br><br>

        <!-- Range -->

        <p>Audio settings:</p>

        <div>
            <input type="range" id="volume" name="volume" min="0" max="11">
            <label for="volume">Volume</label>
        </div>

        <div>
            <input type="range" id="cowbell" name="cowbell" min="0" max="100" value="90" step="10">
            <label for="cowbell">Cowbell</label>
        </div>
        <br><br>
        <!-- Reset -->


        <div class="controls">

            <label for="id">User ID:</label>
            <input type="text" id="id" name="id">

            <input type="reset" value="Reset">
            <input type="submit" value="Submit">

        </div>
        <br><br>
        <!-- Search -->

        <label for="site-search">Search the site:</label>
        <input type="search" id="site-search" name="q">

        <button>Search</button>
        <br><br>
        <!-- Tele -->

        <label for="phone">Enter your phone number:</label>

        <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>

        <small>Format: 123-456-7890</small>
        <br><br>

        <!-- Text -->

        <label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">
       <br><br>

       <!-- Time -->

       <label for="appt">Choose a time for your meeting:</label>

<input type="time" id="appt" name="appt"
       min="09:00" max="18:00" required>

<small>Office hours are 9am to 6pm</small>
<br><br>

<!-- URL -->

<label for="url">Enter an https:// URL:</label>

<input type="url" name="url" id="url"
       placeholder="https://example.com"
       pattern="https://.*" size="30"
       required>
       <br><br>

       <!-- Week -->

       <label for="camp-week">Choose a week in May or June:</label>

<input type="week" name="week" id="camp-week"
       min="2018-W18" max="2018-W26" required>
       <br><br>









    </form>


</body>

</html>