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代码
$('.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 ⽂件上传
jquery框架搭建input file 是另⼀个奇葩组件，⼀直以来都是前端开发的噩梦，原⽣的基本⽆法通过CSS美化。基于原⽣的做法：把⽂件选择域设为透明，通过绝对定位覆盖在长的好看的按钮上⾯。优点：完全源⽣。兼容性好，统⼀浏览器显⽰效果。
原⽣效果
⼿动在⽂本框上加 来控制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表单验证插件归原作者所有，本站只做技术研究和学习，如果⼤家感觉好⽅便，请联系移步validform.rjboy/联系原作者购买授权。如有冒犯还请⽴即通知我们，我们会⽴即撤下相关资源。如果您和本⼈有共同的志向，可以合作。
需引⼊Validform_v5.3.2.js
带验证表单
邮箱：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。