This component is used to align the form elements properly.
The<form>node is optional.
The class.z-form-rowrepresents a form row.
Add class.z-form-controlon the elements like<input>and<textarea>that occupy the full width of the column.
Use.z-form-control-wrapperto wrap the form elements.
<div>
<div class="z-form-row">
<label class="z-form-label" style="width: 100px">Name:</label>
<span class="z-form-text">Jim Green</span>
</div>
<div class="z-form-row">
<label class="z-form-label required" style="width: 100px">Age:</label>
<div class="z-form-control-wrapper" style="width: 280px">
<input type="text" name="age" class="z-input z-form-control">
<span class="z-form-help">Here is some help text.</span>
</div>
</div>
<div class="z-form-row">
<label class="z-form-label small required" style="width: 100px">Gender:</label>
<div class="z-form-control-wrapper">
<div class="z-radio-group">
<label class="z-radio">
<input type="radio" name="sex" value="m">
<span>Male</span>
</label>
<label class="z-radio">
<input type="radio" name="sex" value="w">
<span>Female</span>
</label>
</div>
</div>
</div>
<div class="z-form-row">
<label class="z-form-label" style="width: 100px">Address:</label>
<div class="z-form-control-wrapper" style="width: 280px">
<textarea name="addr" class="z-textarea z-form-control"></textarea>
</div>
</div>
<div class="z-form-action">
<button class="z-btn primary" style="margin-left: 100px">Submit</button>
</div>
</div>
We recommend using grid layout in the form.
<form style="width: 400px">
<div class="z-form-row">
<label class="z-form-label z-col-3">Name:</label>
<span class="z-form-text z-col-9">Jim Green</span>
</div>
<div class="z-form-row">
<label class="z-form-label z-col-3 required">Age:</label>
<div class="z-form-control-wrapper z-col-9">
<input type="text" name="age" class="z-input z-form-control">
</div>
</div>
<div class="z-form-row">
<label class="z-form-label z-col-3">Address:</label>
<div class="z-form-control-wrapper z-col-9">
<textarea name="addr" class="z-textarea z-form-control"></textarea>
</div>
</div>
<div class="z-form-row">
<div class="z-form-control-wrapper z-col-9 z-offset-3">
<label class="z-checkbox">
<input type="checkbox" name="agree">
<span>I have read the agreements.</span>
</label>
</div>
</div>
<div class="z-form-action z-col-9 z-offset-3">
<input type="reset" class="z-btn default" value="Reset">
<button class="z-btn primary">Submit</button>
</div>
</form>
<form style="width: 600px">
<div class="z-form-row">
<label class="z-form-label z-col-2">Name:</label>
<span class="z-form-text z-col-4">Jim Green</span>
<label class="z-form-label z-col-2">Age:</label>
<div class="z-form-control-wrapper z-col-4">
<input type="text" name="age" class="z-input z-form-control">
</div>
</div>
<div class="z-form-row">
<label class="z-form-label z-col-2">Birth:</label>
<div class="z-form-control-wrapper z-col-4">
<span class="z-input-wrapper z-form-control">
<input type="text" name="birth" id="birth" class="z-input">
<i class="fa fa-calendar"></i>
</span>
</div>
<label class="z-form-label z-col-2">Phone:</label>
<div class="z-form-control-wrapper z-col-4">
<span class="z-input-group z-form-control">
<input type="text" class="z-input" value="010" style="width:30%" readonly>
<input type="text" class="z-input" style="width:70%">
</span>
</div>
</div>
<div class="z-form-row">
<label class="z-form-label z-col-2">Address:</label>
<div class="z-form-control-wrapper z-col-10">
<textarea name="addr" class="z-textarea z-form-control"></textarea>
</div>
</div>
<div class="z-form-action z-col-10 z-offset-2">
<button class="z-btn primary">Submit</button>
</div>
</form>
Add class.verticalon the form row, the items will be aligned vertically.
<form style="width: 600px">
<div class="z-row">
<div class="z-col-6" style="padding-right: 10px;">
<div class="z-form-row vertical">
<label class="z-form-label required">Name:</label>
<div class="z-form-control-wrapper">
<input type="text" name="name" class="z-input light z-form-control" placeholder="Your Name">
</div>
</div>
<div class="z-form-row vertical">
<label class="z-form-label">Phone:</label>
<div class="z-form-control-wrapper">
<span class="z-input-group z-form-control">
<input type="text" class="z-input light" value="010" style="width:18%" readonly>
<input type="text" class="z-input light" style="width:82%">
</span>
</div>
</div>
</div>
<div class="z-col-6" style="padding-left: 10px;">
<div class="z-form-row vertical">
<label class="z-form-label required">Age:</label>
<div class="z-form-control-wrapper">
<input type="text" name="name" class="z-input light z-form-control" placeholder="Your Age">
</div>
</div>
<div class="z-form-row vertical">
<label class="z-form-label">Company:</label>
<div class="z-form-control-wrapper">
<input type="text" name="age" class="z-input light z-form-control" placeholder="">
</div>
</div>
</div>
</div>
<div class="z-form-action">
<button class="z-btn primary">Submit</button>
</div>
</form>