How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Form

Basic

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.


Jim Green
Here is some help text.

    <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>        
            

Grid

We recommend using grid layout in the form.


Jim Green

    <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>
            

Multiple columns

Jim Green

    <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>
            

Vertical

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>