form表单

1. 提交标签button也行（在form里面）
   

   <button type="submit">我是提交</button>
   <button type="reset">我是重置</button>

    

2. 获取表单的四种方式

   <form action="" id="a" name="form1">
       <input type="text"  value="123465">
   </form>
   <script>
       
       let forms=document.forms;
       console.log(document.querySelector('form'));
       console.log(forms[0]);
       console.log(forms['a']);
       console.log(forms['form1']);
   </script>

    

3. 获取表单元素

   <form id="from1" name="a" action="">
       <input type="text" size="5"   maxlength="10">
       <input type="radio" name="danxuan">
       <input type="radio" disabled name="danxuan">
       <input type="radio" name="danxuan">
       <input type="submit">
   </form>

   console.log(document.forms[0].elements[2])//获取一个dom
   console.log(document.forms[0].elements.danxuan)//获取单选dom集合

    

   
   
   
4. 文本输入框input type=text ;teaxtarea
   

   forms[0].elements[0].select();文本选择 (只能在同一时刻选择一处文本)

   获取选择的文本内容
   forms[0].elements[1].select();
       let ele=forms[0].elements[1];
       console.log( ele.selectionStart);//开始选择位置
       console.log( ele.selectionEnd);//结束选择位置
       console.log(ele.value.slice(ele.selectionStart,ele.selectionEnd))

   forms[0].elements[1].focus();
   forms[0].elements[1].setSelectionRange(1,6);//设置选择的位置（但是没有选中的状态）这句之前必须先表单选中

    

5. 输入过滤与复制相关事件

   let inp=document.querySelector('input');
       inp.onkeypress=function (e) {
           /*
           可扩展成只能输入数字
           * */
           // e.preventDefault();//阻止用户输入
           console.log(1)
       }
       /*
       *文本框复制粘贴相关
       *
       * */
       inp.onselect=function(){
         console.log('选择时')
       };
       inp.onbeforecopy=function () {
           console.log('复制之前');
       };
       inp.oncopy=function () {
           console.log('复制时');
       }
       inp.onbeforecut=function () {
           console.log('剪切前');
       }
       inp.oncut=function () {
           console.log('剪切后');
       }
       inp.onbeforepaste=function () {
           console.log('粘贴前');
       }
       inp.onpaste=function () {
           console.log('粘贴时');
       }

    

    

6. H5表单验证
   

   <input type="text" maxlength="3" required> //必填
    <input type="text" maxlength="4" pattern="add"> //pattern=正则验证规则