espcms简约版的表单，提示页，搜索列表页

模板/lib/form.html

 1 <script type="text/javascript" src="{%$rootdir%}js/My97DatePicker/WdatePicker.js">script>
 2 <script type="text/javascript">
 3     var seccode_empty = "{%$lngpack.seescodeerr%}";
 4     function {%$form.formcode%}form(seccodetype) {
 5         {%forlist from=$array key=i%}
 6             {%if $array[i].isvalidate==1%}
 7                 {%if $array[i].validatetext!=''%}
 8                     if(document.{%$form.formcode%}.{%$array[i].attrname%}.value.match({%$array[i].validatetext%}ig)==null) {
 9                 {%else%}
10                     if(document.{%$form.formcode%}.{%$array[i].attrname%}.value==''){
11                 {%/if%}
12                 document.{%$form.formcode%}.{%$array[i].attrname%}.focus();
13                 alert('{%$array[i].typename%}输入错误，请返回重新输入');
14                 return false;
15             }
16             {%/if%}
17         {%/forlist%}
18 
19         if(seccodetype=='1' && document.{%$form.formcode%}.seccode.value.match(/^[A-Z]{4}$/ig)==null) {
20             document.{%$form.formcode%}.seccode.focus();
21             alert(seccode_empty);
22             return false;
23         }
24     }
25 script>
26 <form name="{%$form.formcode%}" id="{%$form.formcode%}" method="post" action="{%$form.action%}"  onSubmit="return {%$form.formcode%}form('{%$form.isseccode%}')">
27 <input type="hidden" name="linkurl" value="add"/>
28 <input type="hidden" name="fgid" id="fgid" value="{%$form.fgid%}"/>
29 <input type="hidden" name="formcode" id="formcode" value="{%$form.formcode%}"/>
30 <input type="hidden" name="did" id="did" value="{%$did%}"/>
31 <input type="hidden" name="tokenkey" value="{%$tokenkey.token_key%}"/>
32 <div>
33     <div class="content">
34         {%forlist from=$array key=i%}
35         <div class="form_group">
36             <label for="username" class="control_label">{%if $array[i].isvalidate==1%}* {%/if%}{%$array[i].typename%}label>
37             <div class="control_required">
38                 {%if $array[i].inputtype=='string' || $array[i].inputtype=='int' || $array[i].inputtype=='float' || $array[i].inputtype=='decimal'%}<input type="text" name="{%$array[i].attrname%}" size="{%$array[i].attrsize%}" maxlength="{%$array[i].attrlenther%}" value="{%$array[i].attrvalue%}" class="infoInput infoInput_{%key=>i%}" placeholder="{%$array[i].typeremark%}" onfocus="this.placeholder='';"/>{%/if%}
39                 {%if $array[i].inputtype=='datetime'%}
40                      <input type="text" name="{%$array[i].attrname%}" size="{%$array[i].attrsize%}" id="{%$array[i].attrname%}" onclick="WdatePicker({el:'{%$array[i].attrname%}',readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})" maxlength="{%$array[i].attrlenther%}" class="infoInput"/>
41                 {%/if%}
42                 {%if $array[i].inputtype=='selectinput'%}
43                 <input type="text" name="{%$array[i].attrname%}" size="{%$array[i].attrsize%}" id="{%$array[i].attrname%}" value="" maxlength="{%$array[i].attrlenther%}" class="infoInput"/>
44                 <select size="1" name="{%$array[i].attrname%}selectinputvalue" onchange="javascript:$('#{%$array[i].attrname%}').val(this.value)">
45                     <option value="">{%$array[i].typename%}option>
46                     {%forlist from=$array[i].selectinputvalue key=ii%}
47                     <option value="{%$array[i].selectinputvalue[ii].name%}">{%$array[i].selectinputvalue[ii].name%}option>
48                     {%/forlist%}
49                 select>
50                 {%/if%}
51                 {%if $array[i].inputtype=='img'%}
52                     <input type="text" name="{%$array[i].attrname%}" size="{%$array[i].attrsize%}" value="{%$array[i].attrvalue%}" class="infoInput"/>
53                 {%/if%}
54                 {%if $array[i].inputtype=='addon'%}
55                     <input type="text" name="{%$array[i].attrname%}" size="{%$array[i].attrsize%}" value="{%$array[i].attrvalue%}" class="infoInput"/>
56                 {%/if%}
57                 {%if $array[i].inputtype=='text'%}<textarea name="{%$array[i].attrname%}" cols="{%$array[i].attrsize%}" rows="{%$array[i].attrrow%}"  class="col11 infoInput"  placeholder="{%$array[i].typeremark%}" onfocus="this.placeholder='';">{%$array[i].attrvalue%}textarea>{%/if%}
58                 {%if $array[i].inputtype=='htmltext'%}<textarea name="{%$array[i].attrname%}" cols="{%$array[i].attrsize%}" rows="{%$array[i].attrrow%}"  class="col11 infoInput">{%$array[i].attrvalue%}textarea>{%/if%}
59                 {%if $array[i].inputtype=='editor'%}<textarea name="{%$array[i].attrname%}" cols="{%$array[i].attrsize%}" rows="{%$array[i].attrrow%}"  class="col11 infoInput">{%$array[i].attrvalue%}textarea>{%/if%}
60                 {%if $array[i].inputtype=='select'%}
61                     <select size="1" name="{%$array[i].attrname%}">
62                     {%forlist from=$array[i].attrvalue key=ii%}
63                         <option {%if $array[i].attrvalue[ii].selected=='selected'%}selected="selected" {%/if%}value="{%$array[i].attrvalue[ii].name%}">{%$array[i].attrvalue[ii].name%}option>
64                     {%/forlist%}
65                     select>
66                 {%/if%}
67                 {%if $array[i].inputtype=='radio'%}
68                     {%forlist from=$array[i].attrvalue key=ii%}
69                         <input {%if $array[i].attrvalue[ii].selected=='selected'%}checked="checked" {%/if%}name="{%$array[i].attrname%}" type="radio" value="{%$array[i].attrvalue[ii].name%}" /> {%$array[i].attrvalue[ii].name%}
70                     {%/forlist%}
71                 {%/if%}
72                 {%if $array[i].inputtype=='checkbox'%}
73                     {%forlist from=$array[i].attrvalue key=ii%}
74                         <input {%if $array[i].attrvalue[ii].selected=='selected'%}checked="checked" {%/if%}name="{%$array[i].attrname%}[]" type="checkbox" value="{%$array[i].attrvalue[ii].name%}" /> {%$array[i].attrvalue[ii].name%}
75                     {%/forlist%}
76                 {%/if%}
77             div>
78         div>
79         {%/forlist%}
80         {%if $form.isseccode==1%}
81         <div class="form_group">
82             <label for="username" class="control_label">验证码label>
83             <div class="control_required">
84                 <input type="text" id="seccode" name="seccode" class=" infoInput" maxlength="4" size="5" style="text-transform: uppercase;"/>
85                 <img title="点击更换验证码" id="{%$form.formcode%}seccodesrc" onclick="sessionimg('{%$form.formcode%}seccodesrc','{%$rootdir%}')" src="{%$seccodelink%}" style="cursor: pointer;height:28px;margin-left:5px;" align="absmiddle"/>
86             div>
87         div>
88         {%/if%}
89         <div class="form_group">
90             <label class="control_label"> label>
91             <div class="control_required"><input type="submit" id="{%$form.formcode%}botton" class="button blue2" value="提交申请"> div>
92         div>
93 
94     div>
95     <b class="b5">b><b class="b6">b><b class="b7">b><b class="b8">b>
96 div>
97 form>

 

模板/public/callmessage.html

 1 {%link file="cn/public/head_msg.html"%}
 2 
 3 <div class="msg-wrap">
 4     <div class="title mb20"><div class="messageicon2">div><div class="messtitle">信息提醒div>div>
 5     <div class="form_group">{%$calltitle%}div>
 6     <div class="form_group">您可以选择以下操作按钮，网站将在<span class="em" id="spanSeconds">{%$tiptime%}span>秒钟后返回默认地址！div>
 7 
 8     <div class="form_group">
 9         {%if $backid > 0%}
10         <input class="button blue2" onclick="javascript:location.href = '{%$backlinkURL%}';" name="submit" type="submit" value="{%$backBotton%}" />
11         {%/if%}
12         <input class="button blue2" onclick="javascript:location.href = '{%$linkURL%}';" name="submit" type="submit" value="{%$bottonName%}" />
13     div>
14 div>
15 
16 <script type="text/javascript">
17     var seconds = {%$tiptime%};
18     var defaultUrl = "{%$linkURL%}";
19     onload = function() {
20         if (defaultUrl == 'javascript:history.go(-1)' && window.history.length == 0) {
21             document.getElementById('redirectionMsg').innerHTML = '';
22             return;
23         }
24         window.setInterval(redirection, 1000);
25     }
26     function redirection() {
27         if (seconds <= 0) {
28             window.clearInterval();
29             return;
30         }
31         seconds--;
32         document.getElementById('spanSeconds').innerHTML = seconds;
33         if (seconds == 0) {
34             window.clearInterval();
35             location.href = defaultUrl;
36         }
37     }
38 script>
39 {%link file="cn/public/footer.html"%}

 

模板/article/search.html

 1 {%link file="cn/public/head_msg.html"%}
 2 
 3 
 4 <div class="sch-wrap">
 5     <div class="sch-title">内容搜索结果{%if $keyword%}：{%$keyword%}{%/if%}div>
 6     <div class="sch-line">div>
 7 
 8     {%if count($array) > 0%}
 9     <ul class="sch-list">
10         {%forlist from=$array key=i%}
11         <li>
12             <dl>
13                 <dd class="tl"><a title="{%$array[i].title%}" target="_blank" href="{%$array[i].link%}">{%$array[i].ctitle%}a>dd>
14                 <dd class="dr">{%$array[i].addtime|timeformat(3)%}dd>
15             dl>
16         li>
17         {%/forlist%}
18     ul>
19 
20     <div class="sch-line">div>
21     <div class="sch-page-botton">
22         <div id="pagelist">{%$pagetext%}div>
23     div>
24     <div class="page_botton">
25         <div id="pagination" class="pagination">
26             {%$pagebotton%}
27         div>
28     div>
29     {%else%}
30     <div class="page_botton">
31         <div id="pagination">暂未搜索到相关内容div>
32     div>
33     {%/if%}
34 div>
35 
36 {%link file="cn/public/footer.html"%}

 

 

css:

/*表单*/
.feedback {
    color: #999999;
    width: 631px;
}
.feedback label {
    display: none;
}
.feedback input {
    height: 57px;
    width: 631px;
    padding: 14px 20px;
    color: #999;
    background: none;
    border: 1px solid #e4e1e1;
    font-size: 14px;
    line-height: 28px;
}
.feedback input[type="text"] {
    float: left;
    margin-bottom: 14px;

}
.feedback textarea {
    height: 207px;
    width: 631px;
    padding: 14px 20px;
    color: #999;
    background: none;
    border: 1px solid #e4e1e1;
    font-size: 14px;
    line-height: 28px;
}
.feedback input.button {
    width: 196px;
    height: 42px;
    line-height: 42px;
    color: #fff;
    font-size: 16px;
    padding: 0;
    text-align: center;
    border: 0;
    background: #615135;
    transition: all .2s;
    margin: 45px auto;
    
    display: block;
}
.feedback input.button:hover {
    background: #937C53;
}
.feedback input.infoInput_1 {
    width: 308px;
    margin-right: 15px;
}
.feedback input.infoInput_2 {
    width: 308px;
    margin-right: 0;
}

/*提示页*/
.msg-wrap {
    width: 800px;
    margin: 120px auto 180px;
    text-align: center;
    border: 1px solid #ccc;
    padding: 50px;
}
.msg-wrap .title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
}
.msg-wrap .button {
    margin-top: 30px;
}
/*搜索结果页*/
.sch-wrap {
    width: 1000px;
    overflow: hidden;
    margin: 60px auto 40px;
}
.sch-title{
    float: left;
    width: 800px;
    padding: 10px 0px 7px 5px;
    color: #937c53;
    font-size: 16px;
}
.sch-line {
    width: 1000px;
    border-bottom: 1px solid #e6e6e6;
    height: 1px;
    overflow: hidden;
}
.sch-list {
    padding: 10px 10px;
}
.sch-list li {
    width: 100%;
    border-bottom: 1px dotted #ccc;
    padding: 10px 0px 0px 10px;
}
.sch-list li dd.tl {
    float: left;
}
.sch-list li dd.dr {
    float: right;
    color: #a5a5a5;
}
.sch-page-botton {
    text-align: center;
    overflow: hidden;
    margin-top: 30px;
    margin-bottom: 30px;
}

 

 

演示效果：（根据实际情况可再作调整）