jqTransform,是DFC Engineering写的一个jQuery的样式插件,用于美化表单元素,使用方便简单,能美化所有表单元素包括input,radio,textarea,select,checkbox。

使用方法:

1、添加javascript引用和css文件的引用

<link rel="stylesheet" type="text/css" href="jqtransform.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jqtransform.js"></script> 

2、编写HTML表单结构

<form class="jqtransform" action="#" method="post"> 
    <p><label>用户名:</label><input type="text" /></p> 
    <p><label>密码:</label><input type="password" /></p> 
    <p><label>性别:</label><input type="radio" name="sex" /> <label style="width:auto">男</label> 
 <input type="radio" name="sex" /> <label style="width:auto">女</label> </p> 
    <p><label>学历:</label> 
     <select> 
        <option value="1">博士</option> 
        <option value="2">硕士</option> 
        <option value="3">大学本科</option> 
        <option value="4">大专</option> 
        <option value="5">中技</option> 
     </select> 
    </p> 
    <p><label>短信订阅:</label><input type="checkbox" />  <label>开通短信订阅功能</label></p> 
    <p><label>备注:</label> 
    <textarea name="note" rows="6" cols="40"></textarea> 
    </p> 
    <p><label> </label><input type="submit" value="提交" /> <input type="reset" value="重置" /></p> 
</form> 

3、调用插件

$('.jqtransform').jqTransform(); 

一个漂亮的表单就出来了,不过有点瑕疵,jqTransform对IE下中文表单按钮的支持不够理想,如:button的value为英文时显示正常,但是多个英文单词如value为Sure,I submit!则会掉行,如果value为中文那就更杯具了,”提交“两个字竖着排,这当然不是我想要的效果。解决办法是从CSS样式下手,找到jqtransform.css文件的button.jqTransformButton,大概在14行。加入:

width:auto; 
white-space: nowrap; 

即将按钮的宽度设置为自动,单行显示。当然你也可以设置一个固定的宽度,您还可以修改CSS文件自定义表单样式。

jqTransform:呈现更美的表单的更多相关文章

  1. WTF Forms – 使用 CSS 实现用户体验更好的表单

    WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...

  2. 在AngularJS中实现自定义表单验证

    除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属 ...

  3. 【ASP.NET 基础】表单和控件

    1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...

  4. #WEB安全基础 : HTML/CSS | 0x10.1更多表单

    来认识更多的表单吧,增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 <!DOCTYPE html> <html> <head> <m ...

  5. 使用Angular提交表单

    使用Angular提交表单 我们准备在之前使用的<script>标签中设置我们的Angular应用.所以删除里面的内容,我们就可以开始了. 设置一个Angular应用 步骤为: 1. 加载 ...

  6. 基于Extjs的web表单设计器 第一节

    前面一节介绍了表单设计器的背景和最终的大概样式,本节主要介绍表单设计器的需求及功能设计. 在讲需求之前先明确几个常用的概念: 主表或者卡片表——具有多行多列的一个区域的控件块,如下图所示. 明细表—— ...

  7. 基于表单布局:分析过时的table结构与当下的div结构

    一些话在前面 最近做了百度前端学院一个小任务,其中涉及到表单布局的问题, 它要处理的布局问题:左边的标签要右对齐,右边的输入框.单选按钮等要实现左对齐. 从开始入门就被告知table布局已经过时了,当 ...

  8. Vue数据驱动表单渲染,轻松搞定form表单

    form-create 具有动态渲染.数据收集.校验和提交功能的表单生成器,支持双向数据绑定.事件扩展以及自定义组件,可快速生成包含有省市区三级联动.时间选择.日期选择等17种功能组件. Github ...

  9. IT兄弟连 HTML5教程 HTML5表单 HTML表单中的get和post方法

    指引 表单在网页应用中十分重要,基本上任何一个网站都必须使用到表单元素,所以表单的美观和易于交互对于网站设计就变得十分重要.HTML5对目前Web表单进行了全面提升,使得我们使用表单更加智能.它在保持 ...

随机推荐

  1. 1. Tomcat之startup.sh

    #判断操作系统os400=falsecase "`uname`" inOS400*) os400=true;;esac # 取脚本名称PRG="$0" # 判断 ...

  2. 【Python】使用POST方式抓取有道翻译结果

    1.安装requests库 2.打开有道翻译,按下F12,进入开发者模式,输入我爱青青,点击Network,再点击XHR 3.撰写爬虫 import requestsimport json # 使用有 ...

  3. 深入Resource实现多语言支持的应用详解

    首先为假设有一个应用程序CAStudy,接着右键添加一个资源文件Resource1.resx. Resource1.resx里面如下: Main函数如下:static void Main(){    ...

  4. Flutter实战(四)---LoadingDialog

    原文链接:https://blog.csdn.net/johnWcheung/article/details/89634582

  5. 【ROC+AUC】

    http://m.elecfans.com/article/736801.html https://blog.csdn.net/xyz1584172808/article/details/818392 ...

  6. Swift4.0复习类型定义、类型投射等操作

    1.类型定义: /// 这里将MyInt定义为Int32类型 typealias MyInt = Int32   /// 这里将MyArrayInt定义为[MyInt]数组类型 typealias M ...

  7. springboot整合mybatis的时候报错Caused by: java.lang.IllegalArgumentException: Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required

    今天闲来无事,学习springboot整合mybatis,在bilibili看视频学的,视频中在dao层的interface上面加上org.apache.ibatis.annotations.Mapp ...

  8. 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计

    前言 近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核 ...

  9. H310C,B365,M.2 NVME SSD,USB3.0,安装 WIN7 64 位

    华擎H310CM ITX NVME SSD 上安装WIN7 64位 核心关键点:xHCI USB3.0驱动,nvme驱动,nvme win7补丁. 硬件配置:I5 9400F, 华擎H310CM IT ...

  10. Docker快速安装

    目前装Docker得最简单方式就是脚本安装了,方法如下: curl -fsSL https://get.docker.com -o get-docker.sh sh get-docker.sh 安装后 ...