HTML Demo: <input type="time">

<fieldset>
    <legend>Appointment details</legend>

    <div class="control">
        <label for="appt-time">Time:</label>
        <input type="time" id="appt-time" name="appt-time"
               min="9:00" max="18:00" required />
        <span class="hours">Office hours: 9AM to 6PM</span>
    </div>

    <div class="control">
        <label for="doctor">Doctor:</label>
        <select id="doctor">
            <option value="strangelove">Strangelove</option>
            <option value="moreau">Moreau</option>
            <option value="watson">Phibes</option>
        </select>
    </div>
</fieldset>

.output {
    font: 1rem 'Fira Sans', sans-serif;
}

legend {
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
}

.control {
    margin: 1rem 0;
}

label {
    display: inline-block;
    text-align: right;
    font-size: .8rem;
    width: 20%;
}

.hours {
    font-size: .7em;
    color: #999;
}

Output