移动端form表单html页面，jquery，ajax，对齐，必填项提示

最新推荐文章于 2022-04-25 10:23:39 发布

凡人繁星

最新推荐文章于 2022-04-25 10:23:39 发布

阅读量572

点赞数

分类专栏：前端移动端

本文链接：https://blog.csdn.net/qq_38916157/article/details/108275306

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

移动端

6 篇文章 0 订阅

订阅专栏

移动端form表单html页面，jquery，ajax，对齐，必填项提示
第一次写移动端代码以及用jquery和ajax，记录一下。（欢迎指出不足）
以下是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport"        
        content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no" />    
    <script src="./js/jquery.js"></script>   
    <title>移动端页面</title>    
    <style>    
        * {           
       padding: 0px;            
        margin: 0px;        
       }    
       form {            
       width: 100%;           
        height: 100%;            
       margin: 0px auto;    
   overflow-y: scroll        
   }        
     form>fieldset {            
     padding: 10px;       
      }        
     form>fieldset>div>input {            
     width: 50%;            
     height: 30px;           
      line-height: 30px;           
       margin: 10px 0;            
      border: none;            
      border: 1px solid #ccc;            
      border-radius: 4px;            
      box-sizing: border-box;           
       font-style: 16px; 
      }      
      .editor-label {            
      margin: 0px 0 0 0;           
       height: 30px;           
       display: inline-block;            
       width: 300px;            
       min-width: 300px;            
       position: relative;        
       }    
     .editor-label label {            
     width: 120px;           
      font-size: 14px;            
     line-height: 20px;            
     display: inline-block;       
     text-align: left;           
      position: relative;       
       }     
      .editor-label input[type='radio'] {    
         width: 20px;           
       height: 13px;     
      margin-top: -10px;            
      margin-bottom: 0px;        }       
       .short {          
        width: 60px !important;        
        }      
    .media {            
    width: 120px !important;        
    }     
       .s {            
       background: #F49447;            
       padding: 10px 20px;           
        font-weight: bold;            
        border-radius: 9px;            
        cursor: pointer;            
        margin-top: 20px;            
        margin-left: 130px;            
        width: 160px;           
         margin-bottom: 26px;            
         height: 40px;          
           border: none;        }      
    span {            font-size: 10px;        }       
    .required {            color: red;        }     
       .margin_top {            margin-top: 10px;        }    
       </style>
       </head>
      <body> 
    <form id="form" method="POST" onsubmit="return false">   
         <fieldset>        
             <img style="width: 10%;" src="./img/pic.png" />      
  <br>          
   <div class="editor-label">        
           <span class="required">*</span>       
                    <label for="name">姓名：</label>       
            <input type="text" id="name" required>  
   </div>          
   <div class="editor-label">           
        <span class="required">*</span>       
     <label for="age">年龄</label>      
      <input type="text" id="age" required>      
    </div>       
   <div class="editor-label">         
         <span class="required">&ensp;</span>         
        <label for="money">学费</label>       
        <input type="text" class="short" id="money">          
        <span>元</span>     
   </div>       
   <div class="editor-label">       
    <span class="required">*</span>    
     <label for="course">课程</label>          
 <input type="text" class="short" id="course" required>            
         <span>节</span>       
</div>           
 <div class="editor-label">           
    <span class="required">*</span>         
       <label for="num">寝室号</label>     
 <input type="text" class="media" id="num" required> 
           <span>室</span>      
 </div>      
 <div class="editor-label">          
                  <span class="required">&ensp;</span>            
   <label for="classId">班级：</label>       
            <input type="text" class="media" id="classId">             
      <span>班</span>      
</div>        
 <div class="editor-label margin_top">      
                          <span class="required">*</span>           
<label>性别</label>        
<input type="radio" name="sex" value="1" required="required">
<span>男</span>                
<input type="radio" name="sex" value="2" required="required">
 <span>女</span>    
</div>           
 <div class="editor-label margin_top">          
               <span class="required">*</span>        
      <label>团员</label>
<input type="radio" name="member" value="1" required="required">
      <span>是</span> 
<input type="radio" name="member" value="2" required="required">
         <span>否</span>  
</div>  
         <br>   
     <p>
<input class="s" type="submit" value="提交" onclick="aa()">
     </p>       
      </fieldset>   
       </form>   
      <script>      
        (function (win, doc) {      
              // 设备宽度            
              var clientWidth = win.innerWidth 
              || doc.documentElement.clientWidth 
              || doc.body.clientWidth;        
              })(window, document);       
               function aa() {        
      var name = $("#name").val();     
      var age = $("#age").val();     
     var money = $("#money").val();     
      var course = $("#course").val();      
         var num = $("#num").val();       
          var classId = $("#classId").val();            
         var sex = $('input[name="sex"]:checked').val();           
        var member = $('input[name="member"]:checked').val();                
         // var formData = $('form[id="form"]').serialize();          
      var url = "http://website.tinmx.com/merchant_enter";
      //后台数据库接口                 
      $.ajax({                    
      type: "post",                   
       url: url,                  
        data: {
         name: name, 
         age: age,
          money: money,
          course: course,
           num: num, 
            classId:classId,    
             sex: sex,   
              member: member, }, 
dataType: "JSON", 
// 成功调用ajax请求   
success: function (result) {
// console.log(result);//打印服务端返回的数据     
// 提交成功，返回200状态码  
if (
result.code == 200) {
 alert("提交成功");  
 }else{
   // 提交失败，弹出失败原因    
  alert(result.msg) },  

 }
   // 调用ajax请求失败     
   error: function () { console.log('调用ajax失败')  } }); }    
   </script></body></html>

以下是效果图：
在这里插入图片描述

凡人繁星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端form表单html页面，jquery，ajax，对齐，必填项提示

移动端form表单html页面，jquery，ajax，对齐，必填项提示第一次写移动端代码以及用jquery和ajax，记录一下。（欢迎指出不足）以下是完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
复制链接

扫一扫