0
点赞
收藏
分享

微信扫一扫

Html5 使用SUI制作留言信息

Sikj_6590 2023-03-06 阅读 79
html5suiico验证码cssPython后端开发


如图：

Html5 使用SUI制作留言信息_验证码

<!DOCTYPE html >

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>在线留言</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">    
<style type="text/css">
.code{width: 80px; height: 30px; border-radius:0.25rem; margin-right: 1rem; background-color:white; border: 1px #2212e3;  } 
</style>


<script type='text/javascript' src='js/jquery-1.8.3.js' charset='utf-8'></script> 
<script type="text/javascript">  
var code ; //在全局 定义验证码   
function createCode() {     
  code = "";   
  var codeLength = 6;//验证码的长度   
  var checkCode = $("#checkCode");   
  /* var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的    */
  var selectChar = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');     
  for(var i=0;i<codeLength;i++) { 
      var charIndex = Math.floor(Math.random()*26);     
      code +=selectChar[charIndex]; 
  }   

  checkCode.val(code);  
  code = code.toLowerCase();
}   

function validate () {   
      var inputCode = $("#vcode").val();  
      if(inputCode.length <=0)   {   
          alert("请输入验证码！");   
      }else if(inputCode != code )      {   
         alert("验证码输入错误！");   
         createCode();//刷新验证码    
      }
  }   

function clearForm(){ 
    $('#last_name').val("");
    $('#company').val("");
    $('#phone').val("");
    $('#00N280000099fUf').val(""); 
    $('#00N280000099fUg').val(""); 
    $('#00N2800000C9lVZ').val(""); 
    $('#email').val("");
    $('#00N280000099fUV').val(""); 
}

</script>
</head>
<body onload="createCode()" >

<div class="page-group">
      <div class="page">
          <header class="bar bar-nav">
              <h1 class="title">大族粤铭在线留言</h1>
          </header>
          <div class="content">
                <form id="leaveForm" method='post'  action='https://192.168.0.11/servlet/servlet.WebToLead?encoding=UTF-8' >
                <div class="form-group">
                <input type="hidden"      name="debug"            value=1> 
                <input type="hidden"      name="debugEmail"       value="136137465@qq.com"> 
                <input type="hidden"      name="oid"              value="00D280000016am6"> 
                <input type="hidden"      name="leadsource1__c"   value="中文官网"> 
                <input type="hidden"      name="retURL"           value="http://www.333.com/">
                <input type="hidden"      name="00N2800000BrrtM"  value="1"   id="00N2800000BrrtM" />
                  <div class="list-block">
                    <ul>
                      <li>
                        <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-name"></i></div>
                          <div class="item-inner">
                            <div class="item-title label">*姓名</div>
                            <div class="item-input">
                              <input name="last_name" type="text" id="last_name"  placeholder="Your name" required class="form-control">
                            </div>
                          </div>
                        </div> 
                      </li>
                      <li>
                        <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-password"></i></div>
                          <div class="item-inner">
                            <div class="item-title label">*公司</div>
                            <div class="item-input">
                              <input name="company" type="text" id="company" placeholder="Company" required class="form-control">
                            </div>
                          </div> 
                        </div>
                      </li>

                      <li>
                        <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-password"></i></div>
                          <div class="item-inner">
                            <div class="item-title label">*联系电话</div>
                            <div class="item-input">
                              <input name="phone" type="number" id="phone" placeholder="Phone number" required class="form-control">
                            </div>
                          </div>   
                        </div>
                      </li>
                      <li>
                        <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-password"></i></div>
                          <div class="item-inner">
                            <div class="item-title label">*手机号码</div>
                            <div class="item-input">
                              <input name="00N280000099fUf" type="number" id="00N280000099fUf" placeholder="Mobile" required class="form-control" data-rule-required='true' data-rule-minlength="6" data-rule-maxlength='12'>
                            </div>
                          </div> 
                        </div>
                      </li>
                      <li>
                        <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-password"></i></div>
                          <div class="item-inner">
                            <div class="item-title label">联系地址</div>
                            <div class="item-input">
                              <input name="00N280000099fUg" type="text" id="00N280000099fUg" placeholder="Address" class="form-control">
                              <input name="00N2800000C9lVZ" type="hidden" id="00N2800000C9lVZ" >
                            </div>
                          </div> 
                        </div>
                      </li> 
                      <li> 
                        <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-email"></i></div>
                          <div class="item-inner">
                            <div class="item-title label">邮箱</div>
                            <div class="item-input">
                              <input name="email" id="email"  type="email" placeholder="E-mail" data-rule-email='true' data-rule-required='true' class="form-control">
                            </div>
                          </div>
                        </div>
                      </li>
                      <li> 
                        <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-email"></i></div>
                          <div class="item-inner">
                            <div class="item-title label">*验证码</div>
                            <div class="item-input">
                              <input name="vcode" id="vcode"  type="text" >
                            </div>     
                          </div> 
                           <div style="width:4rem; margin-right: 1rem ">   <input type="button"  onclick="createCode()" id="checkCode" class="button button-round button-fill ">  </div>   
                        </div>    
                      </li>
                      <li class="align-top">    
                        <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-comment"></i></div>   
                          <div class="item-inner">
                            <div class="item-title label">留言信息</div> 
                            <div class="item-input">
                              <textarea name="00N280000099fUV" id="00N280000099fUV" placeholder="Please enter comments"></textarea>
                            </div>
                          </div>
                        </div> 
                      </li>  
                    </ul>
                  </div>
                  <div class="content-block">    
                    <div class="row">
                      <div class="col-50"><a href="#" onclick="clearForm();" class="button button-big button-fill button-danger">重置</a></div> 
                      <div class="col-50"><input type="submit" name="submit"  value="提交" class="button button-big button-fill button-success"  onclick="validate();"></div>
                    </div>
                  </div>
                  </div>
                </form>
          </div>
      </div>
  </div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script>
    $.init();
    $("#leaveForm").validate();
   /*  $("form").validate({
        //$.validator.messages.required = '别忘记填了'; //这里填你自定义的错误消息
    }); */   


</script>  
</body>
</html>

———————————————————————

(java 架构师全套教程，共760G, 让你从零到架构师，每月轻松拿3万）
01.高级架构师四十二个阶段高
02.Java高级系统培训架构课程148课时
03.Java高级互联网架构师课程
04.Java互联网架构Netty、Nio、Mina等-视频教程
05.Java高级架构设计2016整理-视频教程
06.架构师基础、高级片
07.Java架构师必修linux运维系列课程
08.Java高级系统培训架构课程116课时
（送：hadoop系列教程，java设计模式与数据结构， Spring Cloud微服务， SpringBoot入门）
——————————————————————–


举报

相关推荐

HTML5 Maker – 在线轻松制作 HTML5 动画效果

html5javascript跨浏览器

html5制作表单网页

html5html前端

HTML5使用＜details＞标签：展开/收缩信息

人工智能数据挖掘

html5制作个人简历

HTMLCSSHTML5移动开发

使用HTML5/CSS3制作便签贴

剪贴板csshtml

用HTML5制作精美战机游戏

安全前端服务器

【HTML5】弹性盒子实现导航栏和留言框

html5css3前端

如何制作HTML5 SVG描边文字

javascriptViewUISVGCSShtml代码人生

【HTML5】html5开篇基础（3）

golang数据结构开发语言

html5游戏制作入门系列教程（六）

HTML5MathcssHarmonyOS后端开发
0 条评论