Register

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>