表单排版_组件部分_网站宝库

文本框

下拉列表

多选列表

复选框

文字文字

单选按钮

文字1 文字2

多行文本框

0/255

文本框只读

<form>
    <div class="ui-form-group">
        <label>文本框</label>
        <input type="text" name="email" class="ui-form-ip" placeholder="Enter Input Values">
    </div>
    <div class="ui-form-group">
        <label>下拉列表</label>
        <select class="ui-form-ip">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="ui-form-group">
        <label>多选列表</label>
        <select multiple class="ui-form-ip">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="ui-form-group">
        <label>复选框</label>
        <div class="ui-input-group-check">
            <label class="ui-checkbox"><input type="checkbox" name="checkbox-1" checked><i></i>文字</label>
            <label class="ui-checkbox"><input type="checkbox" name="checkbox-2"><i></i>文字</label>
        </div>
    </div>
    <div class="ui-form-group">
        <label>单选按钮</label>
        <div class="ui-input-group-check">
            <label class="ui-radio"><input type="radio" name="radio-1" checked><i></i>文字1</label>
            <label class="ui-radio"><input type="radio" name="radio-1"><i></i>文字2</label>
        </div>
    </div>
    <div class="ui-form-group">
        <label>多行文本框</label>
        <textarea class="ui-form-ip ui-form-limit" data-max="255" ui-rows="5"></textarea>
        <div class="ui-form-limit-text"><span>0</span>/255</div>
    </div>
    <div class="ui-form-group">
        <label>文本框只读</label>
        <input type="text" name="email" disabled class="ui-form-ip" placeholder="Enter Input Values">
    </div>
    <button type="submit" class="ui-btn ui-btn-blue">提交</button>
</form>

用户名：

密码：

备注：

同意用户协议

<form>
    <div class="ui-form-group ui-row">
        <label class="ui-col-2 ui-col-form-label">用户名：</label>
        <div class="ui-col-10">
            <input type="text" name="email" class="ui-form-ip" placeholder="Enter UserName">
        </div>
    </div>
    <div class="ui-form-group ui-row">
        <label class="ui-col-2 ui-col-form-label">密码：</label>
        <div class="ui-col-10">
            <input type="password" name="password" class="ui-form-ip" placeholder="Enter Password" autocomplete="off">
        </div>
    </div>
    <div class="ui-form-group ui-row">
        <label class="ui-col-2 ui-col-form-label-top">备注：</label>
        <div class="ui-col-10">
            <textarea class="ui-form-ip form-limit" data-max="255" ui-rows="5"></textarea>
        </div>
    </div>
    <div class="ui-form-group ui-row">
        <div class="ui-offset-2">
            <label class="ui-checkbox"><input type="checkbox" name="check2" class="ui-form-ip-check" checked><i></i>同意用户协议</label>
        </div>
    </div>
    <div class="ui-form-group ui-row">
        <div class="ui-offset-2">
            <button type="submit" class="ui-btn ui-btn-red ui-mr">注册</button><button type="button" class="ui-btn ui-back">返回</button>
        </div>
    </div>
</form>

Input

¥ 元

Input

元

Input

发送验证码

Input

<form>
    <div class="ui-form-group">
        <label>Input</label>
        <div class="ui-input-group">
            <span class="before"><span class="ui-icon-user"></span></span>
            <input type="text" name="email" class="ui-form-ip radius-left-none" placeholder="Enter Input Values">
        </div>
    </div>
    <div class="ui-form-group">
        <label>Input</label>
        <div class="ui-input-group">
            <span class="before">¥</span>
            <input type="text" name="email" class="ui-form-ip radius-none" placeholder="Enter Input Values">
            <span class="after">元</span>
        </div>
    </div>
    <div class="ui-form-group">
        <label>Input</label>
        <div class="ui-input-group">
            <input type="text" name="email" class="ui-form-ip radius-right-none" placeholder="Enter Input Values">
            <span class="after">元</span>
        </div>
    </div>
    <div class="ui-form-group">
        <label>Input</label>
        <div class="ui-input-group">
            <input type="text" name="email" class="ui-form-ip radius-right-none" placeholder="Enter Input Values">
            <span class="code"><img src="http://www.wangzhanbaoku.com/home-user-code.html"></span>
        </div>
    </div>
    <div class="ui-form-group">
        <label>Input</label>
        <div class="ui-input-group">
            <input type="text" name="email" class="ui-form-ip radius-right-none" placeholder="Enter Input Values">
            <a class="after" href="javascript:;">发送验证码</a>
        </div>
    </div>
    <div class="ui-form-group">
        <label>Input</label>
        <div class="ui-input-group">
            <input type="text" name="email" class="ui-form-ip radius-right-none" placeholder="Enter Input Values">
            <button type="button" class="after"><div class="ui-icon-search"></div></button>
        </div>
    </div>
    <button type="submit" class="ui-btn ui-btn-blue">Sign in</button>
</form>

<form method="post">
    <div class="ui-form-group">
        <i class="ui-form-icon ui-icon-user"></i>
        <input type="text" name="uname" class="ui-form-ip" data-rule="用户名:required;username;ajax(ajax.php);" placeholder="请输入用户名">
    </div>
    <div class="ui-form-group">
        <i class="ui-form-icon ui-icon-lock"></i>
        <input type="password" name="upass" class="ui-form-ip" data-rule="密码:required;password;" placeholder="请输入密码" autocomplete="off">
    </div>
    <button type="submit" class="ui-btn ui-btn-red ui-form-submit" data-type="2">登录</button>　<button type="button" class="ui-btn ui-form-reset">取消</button>
</form>

用户名

密码

确认密码

单选按钮

Radio-1 Radio-2

复选框

CheckBox1-1 CheckBox1-2

复选框

CheckBox1-1 CheckBox1-2

禁用

邮箱

数值

城市

备注

0/255

<form class="ajaxForm">
    <div class="ui-form-group">
        <i class="ui-form-icon ui-icon-user"></i>
        <input type="text" name="uname" class="ui-form-ip" data-rule="用户名:required;username;ajax(ajax.php);" data-token="123456" placeholder="请输入用户名">
    </div>
    <div class="ui-form-group">
        <label>用户名</label>
        <input type="text" name="uname" class="ui-form-ip" data-rule="用户名:required;username;ajax(ajax.php);" data-token="654321" placeholder="请输入用户名">
    </div>
    <div class="ui-form-group">
        <label>密码</label>
        <input type="text" name="upass" id="upass" class="ui-form-ip" data-rule="密码:required;password;" placeholder="请输入密码" autocomplete="off">
    </div>
    <div class="ui-form-group">
        <label>确认密码</label>
        <input type="text" name="urepass" class="ui-form-ip" data-rule="确认密码:required;password;match(upass)" placeholder="请输入确认密码" autocomplete="off">
    </div>
    <div class="ui-form-group">
        <label>单选按钮</label>
        <div class="ui-input-group-check">
            <label class="ui-radio"><input type="radio" name="radio" id="radio-1" class="ui-form-ip-check" value="1" data-rule="单选按钮:checked;"><i></i>Radio-1</label>
            <label class="ui-radio"><input type="radio" name="radio" id="radio-2" class="ui-form-ip-check" value="2" data-rule="单选按钮:checked;"><i></i>Radio-2</label>
        </div>
    </div>
    <div class="ui-form-group">
        <label>复选框</label>
        <div class="ui-input-group-check">
            <label class="ui-checkbox"><input type="checkbox" name="check31" value="1" class="ui-form-ip-check" data-rule="复选框:checked;length(>=2#至少选择2项);"><i></i>CheckBox1-1</label>
            <label class="ui-checkbox"><input type="checkbox" name="check31" value="2" class="ui-form-ip-check" data-rule="复选框:checked;length(>=2#至少选择2项);"><i></i>CheckBox1-2</label>
        </div>
    </div>
    <div class="ui-form-group">
        <label>复选框</label>
        <div class="ui-input-group-check">
            <input type="checkbox" name="check3" id="checkbox-1" value="1" class="ui-form-ip-check" data-rule="复选框:checked;"><label for="checkbox-1">CheckBox1-1</label>
            <input type="checkbox" name="check3" id="checkbox-2" value="2" class="ui-form-ip-check" data-rule="复选框:checked;"><label for="checkbox-2">CheckBox1-2</label>
        </div>
    </div>
    <div class="ui-form-group">
        <label>禁用</label>
        <input type="text" name="ready" id="ready" disabled class="ui-form-ip" data-rule="只读:required;" placeholder="测试只读">
    </div>
    <div class="ui-form-group">
        <label>邮箱</label>
        <div class="ui-input-group">
            <span class="before"><span class="ui-icon-mail"></span></span>
            <input type="text" name="email" class="ui-form-ip radius-none" data-rule="邮箱:required;email;" placeholder="请输入邮箱">
            <button type="button" class="after">发送验证码</button>
        </div>
    </div>
    <div class="ui-form-group">
        <label>数值</label>
        <input type="text" name="number" class="ui-form-ip" data-rule="数值:required;dot;between(10);">
    </div>
    <div class="ui-form-group">
        <label>城市</label>
        <select name="city" class="ui-form-ip" data-rule="城市:required;">
            <option value="">请选择城市</option>
            <option value="南京">南京</option>
            <option value="苏州">苏州</option>
            <option value="无锡">无锡</option>
            <option value="常州">常州</option>
        </select>
    </div>
    <!--如果表单元素状态不可见，则不验证-->
    <div class="ui-form-group ui-hide">
        <label>备注</label>
        <textarea name="content" class="ui-form-ip form-limit" ui-rows="3" data-rule="备注:required;"></textarea>
        <div class="form-limit-text"><span>0</span>/255</div>
    </div>
    <button type="submit" class="ui-btn ui-btn-blue">提交</button>　<button type="button" class="ui-btn ui-form-reset">重设</button>　<button type="button" class="ui-btn" onClick="$('#ready').attr('disabled',false)">只读</button>
</form>

<script>
$(function()
{
	$(".ajaxForm").form(
	{
		type:1,//1:普通验证(默认)，2：弹出错误提示
		hide:1,//1：不验证隐藏元素(默认)，2：验证隐藏的元素(用于选项卡类型表单)
		show:0,//(是否一次性验证，可选择（0或1），默认为0，当type为2时候，只能为0，否则可以为1)
		align:'top-center',//当type=2时，可以设置此参数
		result:function(e)
		{
			//获取表单数据方法
			alert($(e).serialize())
		}
	});
});
</script>

表单排版

默认排版

横向排版

组合排版

图标

表单验证