Horizontal form
Labels beside the fields on a wide screen, above them on a phone
Horizontal form
For settings with short labels.
Show the code
<form class="form-h w-100" data-validate data-success="Store saved." novalidate> <div class="field"> <label class="label required" for="hf-n">Store name</label> <div class="input"> <input id="hf-n" name="hf-n" required type="text" value="Market Street"> </div> </div> <div class="field"> <label class="label" for="hf-p">Phone</label> <div class="input"> <input id="hf-p" name="hf-p" autocomplete="tel" type="tel" value="(207) 555-0100"> </div> </div> <div class="field"> <label class="label" for="hf-o">Opens</label> <div class="input"> <input id="hf-o" name="hf-o" type="time" value="07:00"> </div> </div> <div class="field"> <label class="label" for="hf-t">Tax region</label> <select class="input" id="hf-t" name="hf-t"> <option value="Maine">Maine</option> <option value="New Hampshire">New Hampshire</option> <option value="Massachusetts">Massachusetts</option> </select> </div> <div class="actions cluster"> <button type="submit" class="btn btn-primary"> <i class="ti ti-device-floppy"> </i>Save</button> <button type="reset" class="btn">Reset</button> </div> </form>