首页 > web前端 > js教程 > jQuery实现的漂亮表单效果代码_jquery

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
发布: 2016-05-16 15:44:39
原创
1429 人浏览过

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

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

运行效果如下图所示:

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-table-input-style-codes/

具体代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

<!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程序设计有所帮助。

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
引入jQuery 文件
来自于 1970-01-01 08:00:00
0
0
0
jquery笔记哪里有下?
来自于 1970-01-01 08:00:00
0
0
0
javascript - vue+webpack怎么引入jquery
来自于 1970-01-01 08:00:00
0
0
0
php+jquery的问题
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板