好久没用原生写项目，拿到一个小页面有点懵

需求：手机App自适应，web端固定宽度，显示的中间

要适应手机屏幕和web端，但是页面布局没有变化。所以不要用到栅格，只要使用媒体查询配套编写不同css。这里我以479px为节点
要适应多种大小手机屏幕，页面大多使用百分比定义大小

视口

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no，user-scalable=no">

width=device-width：使布局视口的大小变成理想视口的大小，即设备屏幕的宽度
initial-scale初始缩放比例，当设置width=device-width时，initial-scale默认为1.0
minimum-scale=1,maximum-scale=1，最大缩放比例和最小缩缩放比例都是1，避免因为手机操作导致页面放到缩小，例如苹果的日期选择默认出现在页面下方，导致页面放大。

shrink-to-fit=no 苹果专属属性，值显示你要指定的，而不会缩小把宽度100%之外的也显示。
user-scalable=no不法缩放

修改placeholder样式

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color:    #B4B4B4;
 }
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
         color:    #B4B4B4;
 }
 input::-moz-placeholder { /* Mozilla Firefox 19+ */
         color:    #B4B4B4;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
         color:    #B4B4B4
  }

同样文本框的只要换成textArea就好了

原生表单

下拉选择框

 <select name='society' id='society'>
        <option value="0">- 请进行选择 -</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
 </select>

问题：下拉框的样式太丑，搞了半天没找到下拉框的样式怎么改的。网上的appearance为none，设置option的样式，都没有生效。如果想要一个好看的的下拉框，还是要自己写，用div+ul。这个项目没有那么高的要求，所有我就没写。
同样还有H5 的日期，弹框是根据浏览器来的，改不了。要求高的，可以自己写。网上还有许多写好的插件，可以用。

取值

       let society=document.getElementById('society').value

单选

 <label ><span class='required'>*</span> 运动1</label><br>
   <div class='sports'>
          <input type='radio' name='sports1' value='0' checked/>羽毛球
          <input type='radio' name='sports1'  value='1'/>篮球
           <input type='radio' name='sports1'  value='2'/>乒乓球<br>
    </div>

取值

 let radio=Array.from(document.getElementsByName('sports1')).filter(item=>item.checked)[0].value

多选

             <div class='sports'>
                <input type='checkbox' name='sports2' value='0' checked/>羽毛球
                <input type='checkbox' name='sports2'  value='1'/>篮球
                <input type='checkbox' name='sports2'  value='2'/>乒乓球
            </div>

取值

  let checkbox=[];
   Array.from(document.getElementsByName('sports2')).map(item=>{
             if(item.checked)
                    checkbox.push(item.value)
     })
    let date=document.getElementById('date').value

屏蔽表单的默认提交

 <form action=""  method='post'  onsubmit="return false">
         <button class='submit' onClick='checkForm()'  >
                   提交报名信息
           </button>
</form>

表单验证

if(checkbox.length==0){
      modal.innerHTML='请选择运动2!'
  }else{
      modal.innerHTML='提交成功！'
      mask.onclick=()=>{
           location.reload()
       }
  }

必填项提示，弹框，下面说。
如果是提交成功点击页面重新加载�

提示弹框+遮罩层

 <div class='mask' onclick='closeMask()' >
         <div class='modal'> </div>
 </div>

css

  #activity .mask{
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.6);
     position: fixed;
      top: 0;
      left: 0;
      z-index: 998;
      display: none;
   }
  #activity .mask .modal{
      background: rgba(0, 0, 0, 0.6);
       width:280px;
       height:150px;
       line-height: 150px;
       position: absolute;
       top:20%;
       left:50%;
       transform: translate(-50%);
       border-radius: 5px;
       color:#fff;
       text-align: center;
       font-size:16px;
 }

点击提交信息

  function checkForm(){
       mask.style.display='block';//显示遮罩层
}

报错时点击页面

 function closeMask(){
       let mask=document.getElementsByClassName('mask')[0];
       mask.style.display='none';//隐藏遮罩层
  }

效果图如下

image.png

2018-11-07html原生表单