表单
0/255
<form> <div class="form-group"> <label>Input</label> <input type="text" name="email" class="form-ip" placeholder="Enter Input Values"> </div> <div class="form-group"> <label>Select</label> <select class="form-ip"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label>Select Multiple</label> <select multiple="" class="form-ip"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label>Checkbox</label> <div class="input-group-check"> <label class="checkbox"><input type="checkbox" name="checkbox-1" checked=""><i></i>文字</label> <label class="checkbox"><input type="checkbox" name="checkbox-2"><i></i>文字</label> </div> </div> <div class="form-group"> <label>Radio</label> <div class="input-group-check"> <label class="radio"><input type="radio" name="radio-1" checked=""><i></i>文字1</label> <label class="radio"><input type="radio" name="radio-1"><i></i>文字2</label> </div> </div> <div class="form-group"> <label>Textarea</label> <textarea class="form-ip form-limit" data-max="255" rows="5"></textarea> <div class="form-limit-text"><span>0</span>/255</div> </div> <div class="form-group"> <label>Input Readonly</label> <input type="text" name="email" disabled="" class="form-ip" placeholder="Enter Input Values"> </div> <button type="submit" class="btn btn-blue">Sign in</button> </form>

横向
　
<form> <div class="form-group row"> <label class="col-2 col-form-label text-right">UserName</label> <div class="col-10"> <input type="text" name="email" class="form-ip" placeholder="Enter UserName"> </div> </div> <div class="form-group row"> <label class="col-2 col-form-label text-right">Password</label> <div class="col-10"> <input type="password" name="password" class="form-ip" placeholder="Enter Password" autocomplete="off"> </div> </div> <div class="form-group row"> <label class="col-2 col-form-label"></label> <div class="col-10"> <label class="checkbox"><input type="checkbox" name="check2" class="form-ip-check" checked=""><i></i>复选框</label> </div> </div> <button type="submit" class="btn btn-red">Sign in</button>　<button type="button" class="btn ui-back">Back</button> </form>

组合
¥ 元
元
发送验证码
<form> <div class="form-group"> <label>Input</label> <div class="input-group"> <span class="before"><span class="ui-icon-user"></span></span> <input type="text" name="email" class="form-ip radius-left-none" placeholder="Enter Input Values"> </div> </div> <div class="form-group"> <label>Input</label> <div class="input-group"> <span class="before">¥</span> <input type="text" name="email" class="form-ip radius-none" placeholder="Enter Input Values"> <span class="after">元</span> </div> </div> <div class="form-group"> <label>Input</label> <div class="input-group"> <input type="text" name="email" class="form-ip radius-right-none" placeholder="Enter Input Values"> <span class="after">元</span> </div> </div> <div class="form-group"> <label>Input</label> <div class="input-group"> <input type="text" name="email" class="form-ip radius-right-none" placeholder="Enter Input Values"> <span class="code"><img src="static/picture/home-user-code.jpg"></span> </div> </div> <div class="form-group"> <label>Input</label> <div class="input-group"> <input type="text" name="email" class="form-ip radius-right-none" placeholder="Enter Input Values"> <a class="after" href="javascript:;">发送验证码</a> </div> </div> <div class="form-group"> <label>Input</label> <div class="input-group"> <input type="text" name="email" class="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="btn btn-blue">Sign in</button> </form>

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

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