<fieldset>
    <div class="field-container">
        <label for="text">Text Input <abbr title="Required">*</abbr></label>
        <input id="text" type="text" placeholder="Text Input">
    </div>
    <div class="field-container">
        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Type your Password">
    </div>
    <div class="field-container">
        <label for="password">Web Address</label>
        <input id="password" type="url" placeholder="http://yoursite.com">
    </div>
    <div class="field-container">
        <label for="password">Email Address</label>
        <input id="password" type="email" placeholder="name@email.com">
    </div>
    <div class="field-container">
        <label for="search">Search</label>
        <input id="search" type="search" placeholder="Enter Search Term">
    </div>
    <div class="field-container">
        <label for="text">Number Input <abbr title="Required">*</abbr></label>
        <input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
    </div>
    <div class="field-container">
        <label for="textarea">Textarea</label>
        <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
    </div>
    <div class="field-container">
        <label class="error">Error Input</label>
        <input class="is-error" type="text" placeholder="Text Input">
    </div>
    <div class="field-container">
        <label  class="valid">Valid</label>
        <input  class="is-valid" type="text" placeholder="Text Input">
    </div>
</fieldset>