<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="webaddress">Web Address</label> <input id="webaddress" type="url" placeholder="http://yoursite.com"> </div> <div class="field-container"> <label for="emailaddress">Email Address</label> <input id="emailaddress" 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>