jQuery实现的漂亮表单效果代码


Posted in Javascript onAugust 18, 2015

本文实例讲述了jQuery实现的漂亮表单效果代码。分享给大家供大家参考。具体如下:

这是一款基于jQuery的漂亮的表单效果,将表单的输入框换成了横线,加入了背景,引入了jQuery插件,样式上特别漂亮,是一个值得借鉴的jQuery表单美化实例,而且本表单在布局上完全是基于纯CSS标签来实现,使用了CSS中的fieldset来制作表单,兼容性好。

运行效果如下图所示:

jQuery实现的漂亮表单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>noteform</title>
<script src="jquery-1.6.2.min.js"></script>
<script>
$(function(){
 $("div").click(function(){
$(this).addClass("select");  
 });
})
</script>
<style>
<!--
body{
 background-image:url(wood-bg2.jpg);
}
.exlist{
 background-color:#F9EE70;
 margin:30px auto;
 padding:5px;
 width:680px;
 min-height:200px;
 height:auto;
 font-family:"微软雅黑";
 -webkit-box-shadow:4px 4px 5px #333;/*webkit*/ 
 -moz-box-shadow:4px 4px 5px #333;/*firefox*/  
 box-shadow:4px 4px 5px #333;/*opera或ie9*/ 
}
#title{
 width:200px;
 margin:20px auto;
}
#title legend{
 font-size:26px;
}
div.exlist_title{
 background-color:#F9EE70;
 width:680px;
 height:20px;
}
div.exlist_title img{
 float:right;
 margin:-15px 10px;
}
/*-----------form-----------*/
fieldset{
 width:90%;
 border:1px dashed #666;
 margin:40px auto;
}
legend{
 background-color:#F9EE70;
 height:120px;
 height:30px;
 color:#630;
 font-weight:bolder;
 font-size:20px;
 line-height:30px;
 margin:-20px 10px 10px;
 padding:0 10px;
}
div.row{
 margin:10px;
 padding:5px;
}
div.row label{
 height:20px;
 font-size:16px;
 line-height:20px;
 margin:0 10px;
}
input.txt{
 background-color:#F9EE70;
 color:#333;
 width:150px;
 height:20px;
 margin:0 10px;
 font-size:16px;
 line-height:20px;
 border:none;
 border-bottom:1px solid #565656;
}
input.txt:focus{
 color:#333;
 background-color: #FF0;
 border-bottom:1px solid #F00;
}
select{
 width:100px;
}
option{
 text-align:center;
}
input.btn{
 width:50px;
 height:20px;
 color:#000008B;
 background-color: transparent;
 border:0;
 padding:0;
}
-->
</style>
</head>
<body>
<div class="exlist">
 <div class="exlist_title"></div>
  <div id="title"><legend>快递运单信息</legend></div>
  <form method="post" action="">
   <fieldset>
   <legend>收件信息</legend>
     <div class="row">
     <label>1. 收货人:</label>
     <input style="width:100px" class="txt" type="text" />
     <label>2. 目的地:</label>
     <select>
     <option>北京</option>
     <option>上海</option>
     <option>武汉</option>
     <option>乌鲁木齐</option>
     </select>
     </div>
     <div class="row">
     <label>3. 联系电话:</label><input class="txt" type="text" />
     </div>
     <div class="row">
     <label>4. 详细地址:</label><input class="txt" style="width:400px" type="text" />
     </div>
   </fieldset>
   <fieldset>
   <legend>发件信息</legend>
     <div class="row">
     <label>1. 发货人:</label>
     <input style="width:100px" class="txt" type="text" />
     <label>2. 始发地:</label>
     <select>
     <option>北京</option>
     <option>上海</option>
     <option>武汉</option>
     <option>乌鲁木齐</option>
     </select>
     </div>
     <div class="row">
     <label>3. 联系电话:</label><input class="txt" type="text" />
     </div>
     <div class="row">
     <label>4. 详细地址:</label><input class="txt" style="width:400px" type="text" />
     </div>
   </fieldset>
   <fieldset>
   <legend>货物信息</legend>
     <div class="row">
     <label>1. 数量:</label><input class="txt" style="width:30px" maxlength="2" type="text" />
     <label>(1-99件)</label>
     <label>2. 体积:</label><input class="txt" style="width:30px" maxlength="3" type="text" />
     <label>3. 重量:</label><input class="txt" style="width:30px" maxlength="3" type="text" />
     <label>(Kg)</label>
     </div>
     <div class="row">
     <label>4. 运输方式:</label>
     <select>
     <option>航运</option>
     <option>火车</option>
     <option>汽车</option>
     <option>轮船</option>
     </select>
     </div>
    <div class="row">
    <label>5. 付款方式:</label>
     <p>
      <label><input type="radio" name="pay" value="单选"/>现金付款</label>
      <label><input type="radio" name="pay" value="单选"/>收件人付款</label>
      <label><input type="radio" name="pay" value="单选"/>第三方付款</label>
     </p>
    </div>
   </fieldset>
  </form>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
js中top的作用深入剖析
Mar 04 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
微信小程序使用npm包的方法步骤
Aug 13 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 #Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 #Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 #Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 #Javascript
js实现Select头像选择实时预览代码
Aug 17 #Javascript
基于jquery实现放大镜效果
Aug 17 #Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 #Javascript
You might like
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
django_orm查询性能优化方法
2018/08/20 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python调用C语言程序方法解析
2020/07/07 Python
python中return不返回值的问题解析
2020/07/22 Python
Python调用C/C++的方法解析
2020/08/05 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
入团者的自我评价分享
2013/12/02 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
企业安全标语
2014/06/07 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
综合测评自我评价
2015/03/06 职场文书
环保建议书作文300字
2015/09/14 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python