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

模板/lib/form.html

<script type="text/javascript" src="{%$rootdir%}js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
    var seccode_empty = "{%$lngpack.seescodeerr%}";
    function {%$form.formcode%}form(seccodetype) {
        {%forlist from=$array key=i%}
            {%if $array[i].isvalidate==1%}
                {%if $array[i].validatetext!=''%}
                    if(document.{%$form.formcode%}.{%$array[i].attrname%}.value.match({%$array[i].validatetext%}ig)==null) {
                {%else%}
                    if(document.{%$form.formcode%}.{%$array[i].attrname%}.value==''){
                {%/if%}
                document.{%$form.formcode%}.{%$array[i].attrname%}.focus();
                alert('{%$array[i].typename%}输入错误，请返回重新输入');
                return false;
            }
            {%/if%}
        {%/forlist%}

        if(seccodetype=='1' && document.{%$form.formcode%}.seccode.value.match(/^[A-Z]{4}$/ig)==null) {
            document.{%$form.formcode%}.seccode.focus();
            alert(seccode_empty);
            return false;
        }
    }
</script>
<form name="{%$form.formcode%}" id="{%$form.formcode%}" method="post" action="{%$form.action%}"  onSubmit="return {%$form.formcode%}form('{%$form.isseccode%}')">
<input type="hidden" name="linkurl" value="add"/>
<input type="hidden" name="fgid" id="fgid" value="{%$form.fgid%}"/>
<input type="hidden" name="formcode" id="formcode" value="{%$form.formcode%}"/>
<input type="hidden" name="did" id="did" value="{%$did%}"/>
<input type="hidden" name="tokenkey" value="{%$tokenkey.token_key%}"/>
<div>
    <div class="content">
        {%forlist from=$array key=i%}
        <div class="form_group">
            <label for="username" class="control_label">{%if $array[i].isvalidate==1%}* {%/if%}{%$array[i].typename%}</label>
            <div class="control_required">
                {%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%}
                {%if $array[i].inputtype=='datetime'%}
                     <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"/>
                {%/if%}
                {%if $array[i].inputtype=='selectinput'%}
                <input type="text" name="{%$array[i].attrname%}" size="{%$array[i].attrsize%}" id="{%$array[i].attrname%}" value="" maxlength="{%$array[i].attrlenther%}" class="infoInput"/>
                <select size="1" name="{%$array[i].attrname%}selectinputvalue" onchange="javascript:$('#{%$array[i].attrname%}').val(this.value)">
                    <option value="">{%$array[i].typename%}</option>
                    {%forlist from=$array[i].selectinputvalue key=ii%}
                    <option value="{%$array[i].selectinputvalue[ii].name%}">{%$array[i].selectinputvalue[ii].name%}</option>
                    {%/forlist%}
                </select>
                {%/if%}
                {%if $array[i].inputtype=='img'%}
                    <input type="text" name="{%$array[i].attrname%}" size="{%$array[i].attrsize%}" value="{%$array[i].attrvalue%}" class="infoInput"/>
                {%/if%}
                {%if $array[i].inputtype=='addon'%}
                    <input type="text" name="{%$array[i].attrname%}" size="{%$array[i].attrsize%}" value="{%$array[i].attrvalue%}" class="infoInput"/>
                {%/if%}
                {%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%}
                {%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%}
                {%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%}
                {%if $array[i].inputtype=='select'%}
                    <select size="1" name="{%$array[i].attrname%}">
                    {%forlist from=$array[i].attrvalue key=ii%}
                        <option {%if $array[i].attrvalue[ii].selected=='selected'%}selected="selected" {%/if%}value="{%$array[i].attrvalue[ii].name%}">{%$array[i].attrvalue[ii].name%}</option>
                    {%/forlist%}
                    </select>
                {%/if%}
                {%if $array[i].inputtype=='radio'%}
                    {%forlist from=$array[i].attrvalue key=ii%}
                        <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%}
                    {%/forlist%}
                {%/if%}
                {%if $array[i].inputtype=='checkbox'%}
                    {%forlist from=$array[i].attrvalue key=ii%}
                        <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%}
                    {%/forlist%}
                {%/if%}
            </div>
        </div>
        {%/forlist%}
        {%if $form.isseccode==1%}
        <div class="form_group">
            <label for="username" class="control_label">验证码</label>
            <div class="control_required">
                <input type="text" id="seccode" name="seccode" class=" infoInput" maxlength="4" size="5" style="text-transform: uppercase;"/>
                <img title="点击更换验证码" id="{%$form.formcode%}seccodesrc" onclick="sessionimg('{%$form.formcode%}seccodesrc','{%$rootdir%}')" src="{%$seccodelink%}" style="cursor: pointer;height:28px;margin-left:5px;" align="absmiddle"/>
            </div>
        </div>
        {%/if%}
        <div class="form_group">
            <label class="control_label"> </label>
            <div class="control_required"><input type="submit" id="{%$form.formcode%}botton" class="button blue2" value="提交申请"> </div>
        </div>

    </div>
    <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
</form>

模板/public/callmessage.html

{%link file="cn/public/head_msg.html"%}

<div class="msg-wrap">
    <div class="title mb20"><div class="messageicon2"></div><div class="messtitle">信息提醒</div></div>
    <div class="form_group">{%$calltitle%}</div>
    <div class="form_group">您可以选择以下操作按钮，网站将在<span class="em" id="spanSeconds">{%$tiptime%}</span>秒钟后返回默认地址！</div>

    <div class="form_group">
        {%if $backid > 0%}
        <input class="button blue2" onclick="javascript:location.href = '{%$backlinkURL%}';" name="submit" type="submit" value="{%$backBotton%}" />
        {%/if%}
        <input class="button blue2" onclick="javascript:location.href = '{%$linkURL%}';" name="submit" type="submit" value="{%$bottonName%}" />
    </div>
</div>

<script type="text/javascript">
    var seconds = {%$tiptime%};
    var defaultUrl = "{%$linkURL%}";
    onload = function() {
        if (defaultUrl == 'javascript:history.go(-1)' && window.history.length == 0) {
            document.getElementById('redirectionMsg').innerHTML = '';
            return;
        }
        window.setInterval(redirection, 1000);
    }
    function redirection() {
        if (seconds <= 0) {
            window.clearInterval();
            return;
        }
        seconds--;
        document.getElementById('spanSeconds').innerHTML = seconds;
        if (seconds == 0) {
            window.clearInterval();
            location.href = defaultUrl;
        }
    }
</script>
{%link file="cn/public/footer.html"%}

模板/article/search.html

{%link file="cn/public/head_msg.html"%}


<div class="sch-wrap">
    <div class="sch-title">内容搜索结果{%if $keyword%}：{%$keyword%}{%/if%}</div>
    <div class="sch-line"></div>

    {%if count($array) > 0%}
    <ul class="sch-list">
        {%forlist from=$array key=i%}
        <li>
            <dl>
                <dd class="tl"><a title="{%$array[i].title%}" target="_blank" href="{%$array[i].link%}">{%$array[i].ctitle%}</a></dd>
                <dd class="dr">{%$array[i].addtime|timeformat(3)%}</dd>
            </dl>
        </li>
        {%/forlist%}
    </ul>

    <div class="sch-line"></div>
    <div class="sch-page-botton">
        <div id="pagelist">{%$pagetext%}</div>
    </div>
    <div class="page_botton">
        <div id="pagination" class="pagination">
            {%$pagebotton%}
        </div>
    </div>
    {%else%}
    <div class="page_botton">
        <div id="pagination">暂未搜索到相关内容</div>
    </div>
    {%/if%}
</div>

{%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;
}

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