最终实现效果如下：
直接上html的程序，相关的js路径都弄好了，直接复制粘贴就可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body, h1, form, fieldset, legend, ol ,li{
padding:0;
margin:0;
}
ol{
list-style:none;
}
body{
background:#fff;
color:#111;
padding:20px;
}
form#payment{
background:#9cbc2c;
-webkit-border-radius:5px;
border-radius:5px;
padding:20px;
width:400px;
}
form#payment fieldset{
border:none;
margin-bottom:10px;
}
form#payment fieldset:last-of-type{ margin-bottom:0; }
form#payment legend{
color:#384313;
font-size:16px;
font-weight:bold;
padding-bottom:10px;
text-shadow:0px 1px 1px #c0d576;
}
form#payment > fieldset>legend:before{
content:"Step" counter(fieldset)":";
counter-increment:fieldsets;
}
form#payment fieldset fieldset legend{
color:#111;
font-size:13px;
font-weight:normal;
padding-bottom:0;
}
form#payment ol li{
background:#b9cf6a;
background:rgba(255, 255, 255, 0.3);
border:#e3ebc3;
border-color:rgba(255, 255, 255, 0.6);
border-style:solid;
border-width:2px;
-webkit-border-radius:5px;
line-height:30px;
padding:5px 10px;
margin-bottom:2px;
}
form#payment ol ol li{
bakcground:none;
border:none;
float:left;
}
form#payment label{
float:left;
font-size:13px;
width:110px;
}
form#payment fieldset fieldset label{
background:none no-repeat left 50%;
line-height:20px;
padding:0 0 0 30px;
width:auto;
}
form#payment fieldset fieldset label:hover{cursor:pointer;}
form#payment input:not([type=radio]), form#payment textarea{
background:#fff;
border:#fc3 solid 1px;
-webkit-border-radius:3px;
outline:none;
padding:5px;
}
button
{
border:solid 10px #4d4e53;
border-radius:10px 40px 40px 10px;
}
</style>
</head>
<body>
<div id="app">
<div>
<form id="payment">
<fieldset>
<legend align="center">用户资料</legend>
<ol>
<li>
<label for="name">用户名称：</label>
<input type="text" id="name" name="name" placeholder="请输入用户名" required autofocus>
</li>
<li>
<label for="email">邮件地址：</label>
<input type="text" name="email" id="email" placeholder="[email protected]" required>
</li>
<li>
<label for="phone">联系电话：</label>
<input type="tel" placeholder="010-12345678" id="phone" name="phone">
</li>
</ol>
</fieldset>
<fieldset>
<button type="submit" onclick="oncli()" >提交</button>
</fieldset>
</form>
</div>
</div>
<script type="text/javascript">
function oncli() {
var jQuery = $("#payment").serializeJSON();
var stringify = JSON.stringify(jQuery);
alert("整体字符串为：\n"+stringify +"\n 姓名："+jQuery.name+"\n 邮件地址："+jQuery.email+"\n 联系电话："+jQuery.phone);
}
</script>
</body>
</html>