html表单ui,form表单 - H-ui前端框架官方网站

表单

3.4.1 input,textarea 文本域 文本区域

文本框样式 .input-text，文本域样式 .textarea，追加 .radius 就会显示css3圆角效果。

默认效果

class=""

圆角效果

class=""

input-text

input-text radius

input-text

input-text radius

textarea

textarea radius

不支持圆角和背景渐变浏览器，如IE低版本，会显示扁平纯色直角效果。

文本框尺寸

定义了五种规格尺寸

文本框

class=""

input-text radius size-MINI

input-text radius size-S

input-text radius size-M

input-text radius size-L

input-text radius size-XL

HTML代码

CSS代码

/*默认状态*/

.input-text,.textarea{box-sizing:border-box;border:solid 1px #ddd;width:100%;

-webkit-transition:all 0.2s linear 0s;

-moz-transition:all 0.2s linear 0s;

-o-transition:all 0.2s linear 0s;

transition:all 0.2s linear 0s}

.textarea{ height:auto; font-size:14px; padding:4px}

.input-text:hover,.textarea:hover{border: solid 1px #3bb4f2}

/*得到焦点后*/

.input-text.focus,textarea.focus{border:solid 1px #0f9ae0 \9;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)}

/*不可点击*/

.input-text.disabled,.textarea.disabled,.input-text.disabled.focus,.textarea.disabled.focus{background-color:#ededed; cursor:default;border-color: #ddd;

-webkit-box-shadow:inset 0 2px 2px #e8e7e7;

-moz-box-shadow:inset 0 2px 2px #e8e7e7;

box-shadow:inset 0 2px 2px #e8e7e7}

/*只读状态*/

.input-text.disabled,.textarea.disabled{background-color:#e6e6e6; cursor:default}

/*阴影*/

.input-text.box-shadow,.textarea.box-shadow{-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}

3.4.2 radio,checkbox 单选 多选

使用icheck插件进行美化。

H-ui.js 中已封装，无需单独下载。单独下载地址 打包下载

复选框

复选框 checked状态

Disabled

Disabled & checked

单选按钮

单选按钮 checked状态

Disabled

Disabled & checked

HTML代码

复选框

复选框 checked状态

Disabled

Disabled & checked

单选按钮

单选按钮 checked状态

Disabled

Disabled & checked

JS代码

$(function(){

$('.skin-minimal input').iCheck({

checkboxClass: 'icheckbox-blue',

radioClass: 'iradio-blue',

increaseArea: '20%'

})});

Switch 效果

H-ui.js 中已封装，无需单独下载。单独下载地址 打包下载

3.4.3 select 下拉框

select是个奇葩的表单组件，是表单元素中通过css最难美化的一个，各个浏览器显示都存在很大差异。

原生效果

原生select

菜单一

菜单二

菜单三

原生美化方式：

1、为select外层嵌套个 标签，设置边框，圆角，隐藏掉select本身的表框。

默认select

菜单一

菜单二

菜单三 圆角select效果

菜单一

菜单二

菜单三

HTML代码

默认select

菜单一

菜单二

菜单三

CSS代码

/*方法一、修改源生*/

.select-box{border:solid 1px #ddd;box-sizing:border-box;vertical-align:middle; width:100%; display:inline-block}

.select{border:solid 1px #ddd;box-sizing:border-box;cursor: pointer;line-height:normal;font-weight: normal;width:100%; white-space:nowrap}

.select-box .select{ border:none}

.select-box.inline,.select-box.inline .select{ width:auto}

.select-box,.select-box.size-M{padding:4px 5px}

.select,.size-M .select{font-size: 14px}

.select-box.size-MINI{padding:0px 5px}

.size-MINI .select{font-size: 12px}

.select-box.size-S{padding:3px 5px}

.size-S .select{font-size: 12px}

.select-box.size-L{padding:8px 5px}

.size-L .select{font-size: 16px}

.select-box.size-XL{padding:10px 5px}

.size-XL .select{font-size: 18px}

@media (max-width: 767px) {

.responsive .select-box{ border:none}

.responsive .select-box .select,

.responsive .select{border:solid 1px #ddd; padding:10px;font-size:16px}

.responsive .select-box,

.responsive .select-box.size-M,

.responsive .select-box.size-MINI,

.responsive .select-box.size-S,

.responsive .select-box.size-L,

.responsive .select-box.size-XL{ height:auto; padding:0}

}

是

3.4.4 input-file 文件上传

input file 是另一个奇葩组件，一直以来都是前端开发的噩梦，原生的基本无法通过CSS美化。基于原生的做法：把文件选择域设为透明,通过绝对定位覆盖在长的好看的按钮上面。优点：完全源生。兼容性好，统一浏览器显示效果。

原生效果

手动在文本框上加style="width: " 来控制input框的宽度。

HTML代码

//上传按钮

 浏览文件

//带文本框

󰀠 浏览文件

CSS代码

.btn-upload{position: relative; display:inline-block;height:36px; *display:inline;overflow:hidden;vertical-align:middle;cursor:pointer}

.upload-url{cursor: pointer}

.input-file{position:absolute; right:0; top:0; cursor: pointer; z-index:1; font-size:30em; *font-size:30px;opacity:0;filter: alpha(opacity=0)}

.btn-upload .input-text{ width:auto}

.form-group .upload-btn{ margin-left:-1px}

3.4.5 表单布局

表单布局

文本框：

密码框：

单选框：

男

女

复选框：

复选框

复选框 checked状态

下拉框：

默认select

菜单一

菜单二

菜单三

文本域：

3.4.6 表单验证

两种验证插件：jQuery.Validate.js和Validform.js

jQuery.ValidateValidform

从H-ui_v2.1.6版开始，表单验证将引入jQuery Validate插件，相信很多人都用过，而且非常熟悉。jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。更重要的是他是由jQuery 团队、 jQuery UI 团队的主要开发人员Jörn Zaefferer 编写和维护的。具体我们可以访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。

本站郑重声明：H-ui框架直接使用了Validform.js作为表单验证。

本人研究了很多表单验证插件，最后发现Validform.js比较方便、简单，相对灵活性比较高，在这我代表H-ui由衷的像作者Validform致敬。

Validform.js表单验证插件归原作者所有，本站只做技术研究和学习，如果大家感觉好方便，请联系移步http://validform.rjboy.cn/联系原作者购买授权。如有冒犯还请立即通知我们，我们会立即撤下相关资源。如果您和本人有共同的志向，可以合作。

需引入Validform_v5.3.2.js

带验证表单

邮箱：

用户名：

账户：

密码：

密码验证：

单选框：

男

女

保密

爱好：

上网

摄影

所在城市：

请选择城市

北京

上海

广州

网址：

备注：

0/500