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 相关文章推荐
JQUERY操作JSON实例代码
Feb 09 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 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 daodb插入、更新与删除数据
2009/03/19 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
pandas中的series数据类型详解
2019/07/06 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
培训主管的岗位职责
2013/11/23 职场文书
商场中秋节活动方案
2014/02/07 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
基于JavaScript实现省市联动效果
2021/06/22 Javascript