H5表单

2022-05-03 本文已影响0人心存美好

H5表单

1. HTML4 form表单复习

input 表单type属性值

text 单行文本输入框
password 密码框(maxlength = ''")
radio 单项选择(checked="checked")
checkbox 多项选择
button 按钮
submit 提交
file 文件上传
reset 重置

<body>
  <form action="/" method='post'>
    <!-- action="/"表单提交的地址  method = 'post' 为提交方式-->
    <div>用户名：<input type="text" name="username"><!--  name作用：form表单像后台发送数据时，form表单是必须传的 -->
    </div>
    <div>密码：<input type="password" name="pwd" id="" maxlength="5"></div>
    <!--maxlength最大值属性 -->
    <div>性别：<input type="radio" name="sex" id="" value="0" checked>男 <input type="radio" name="sex" id="" value="1">女
    </div>
    <!-- value值是传给后台 。原生js上只要加了checked属性不管值是什么都是true，默认属性值是它本身，没加checked属性值才是false。但在vue中:checked = "false",因为checked属性前加了：所以此时false就不是普通字符串了，变成布尔值false-->
    <div>爱好：<input type="checkbox" name="hobby" id="" value="youyong">游泳 <input type="checkbox" name="hobby" id=""
        value="youyong">读书</div>
    <div>文件：<input type="file" name="file" id=""></div>
    <div>
      <input type="button" value="按钮"> <!-- 没有默认事件，普通按钮 -->
      <input type="submit" value="提交"> <!-- 有默认事件，一旦点击会触发form表单，向默认路径发送请求 -->
      <input type="reset" value="重置">
      <!--有默认事件内容全部清空 -->
      <!-- 点按钮--》在控制台中查看->Network--》127.0.0.1--》点Header下拉就可以看到提交的数据字段名 字段值 -->
    </div>
  </form>
</body>

2. HTML5表单

input表单type属性值新增

2.1 emil

限制用户输入的必须是Email类型

<input type="email" name="" id="">

2.2 url

限制用户输入必须为URL

<input type="url" name="" id="">

2.3 date

限制用户输入必须为日期对象

<input type="date" name="" id="">

2.4 datetime-local

显示完整日期

<input type="datetime-local" name="local" />

2.5 time

限制用户输入必须为日期类型

<input type="time" name="time" />

2.6 month

限制用户输入必须为月份类型

<input type="month" name="month" />

2.7 week

限制用户输入必须为周类型

<input type="week" name="week" />

2.8 number

限制用户输入必须为数字类型

注意：不支持 "number" 类型的浏览器会改用标准的 "text" 输入框。

<input type="number" name="number" />

2.9 range

生成一个滑动条(值为偶数)

<input type="range" name="range" value="5" min="0" max="20" step="2" />

2.10 search

具有搜索意义的表单,

<input type="search" name="search" />

2.11 color

生成一个颜色选择表单

<input type="color" name="color" />

2.12 tel

显示电话号码

注意: 不会自动验证电话号码格式, 原因在与世界各地电话号码格式差异很大

<input type="tel" name="tel" />

<body>
  <form action="/" method='post'>
    <div>email控件：<input type="email" name="" id=""></div>
    <!--有规则校验，不符合规则有提示 -->
    <div>网站控件：<input type="url" name="" id=""></div>
    <div>日期控件：<input type="date" name="" id=""></div>
    <div>完整日期控件：<input type="datetime-local" name="" id=""></div>
    <div>时间控件：<input type="time" name="" id=""></div>
    <div>月份控件：<input type="month" name="" id=""></div>
    <div>周控件：<input type="week" name="" id=""></div>
    <div>数字控件：<input type="number" name="" id=""></div>
    <div>滑动条控件：<input type="range" name="" id="" step="2" value="4"></div>
    <div>搜索控件：<input type="search" name="" id=""></div>
    <div>颜色控件：<input type="color" name="" id=""></div>
    <div>手机号码：<input type="tel" name="" id=""></div>
    <div>
      <input type="button" value="按钮">
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </div>
  </form>
</body

2. 表单验证

<body>
  <form action="">
    <input type="text" id="ipt">
  </form>
  <script>
    ipt.oninput = function () {    //input的oninput事件，只要输入内容就触发
      console.log(11)
    }
    ipt.onchange = function () {  //onchange事件，输入完了按回车或其他特殊的键最后才触发
      console.log(222)
    }
  // 百度搜素时，联想关键字是oninput事件，最后的搜索结果是onchange事件
  </script>
</body>

<body>
  <form action="www.baidu.com">
    <input type="image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""><!-- 图片按钮 -->
    <input type="button" value="提交">
    <input type="submit" value="提交">
    <input type="submit" value="提交给超春" formaction="www.chnradintor.com">
    <!--同一个form中，formaction可以将数据提交到不同的网址去 -->
  </form>
</body>

<body>
  <form action="aa" method="post">
 <input type="text" name="username" id="" required>    <!--一定要写name值，否则控制台Form Date中看不到。required表示必填，不写不能提交 -->
    <input type="submit" value="提交">
  </form>
</body>

表单方法Methods---select()

<body>
  <form action="aa" method="post">
    <input type="text" name="username" id="ff" required>
    <input type="submit" value="提交">
  </form>
  <div id="bb">点击</div>
  <script>
    bb.onclick = function () {
      ff.select() // 表单方法Methods---select()，当bb被点击时，form表单选中内容
      let val = ff.value;
      console.log(val);
    }
  </script>
</body>

  <style>
    /* input:enabled的css属性只要可以使用的input表单都采用 */
    input:enabled {
      color: red;
    }
  </style>
</head>

<body>
  <form action="aa" method="post">
    <input type="text" name="username" id="ff" required>
    <input type="email" name="" id="">
    <input type="submit" value="提交">
  </form>
  <div id="bb">点击</div>
</body>

  <style>
    input:disabled{/* 表单被禁用采用的样式 */
      border-color:red;
    }
    input:required{ /* 表单必传采用的样式 */
      border-color:blue;
    }
  </style>
</head>

<body>
  <form action="aa" method="post">
    <input type="text" name="username" disabled id="ff"><!-- 禁用 -->
   <input type="email" name="" required id=""> <!-- 必传 -->
    <input type="submit" value="提交">
  </form>
  <div id="bb">点击</div>
</body>

  <style>
    #add:checked~#aa {
      /* input不显示只是页面上看不到，还能使用checked伪类选择器，进而作用到紧邻的兄弟选择器*/
      background-color: pink;
    }
    #reduce:checked~#bb {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <!-- 利用单选按钮的伪类选择器:checked模拟轮播的点击按钮思路-->
  <input type="radio" name="btn" id="add" style="display:none"> <!-- 此input不显示只是页面上看不到，还能使用checked -->
  <label for="add">增加</label>
  <div id="aa">aaaaa</div>
  <input type="radio" name="btn" id="reduce" style="display: none;">
  <label for="reduce">减少</label>
  <div id="bb">bbbbb</div>
</body>

2.1 invalid事件

validity对象(valid查看验证是否通过)

input.addEventListener("invalid", function(){
    console.log(this.validity)
}, false);

2.2 阻止默认验证

ev.preventDefault()

<body>
  <form action="aa" method="post">
    <input type="text" name="username" id="text" required>
    <input type="submit" value="提交">
  </form>
  <script>
    text.addEventListener('invalid', function (ev) {   //不输入内容直接提交会触发
      ev = ev || window.event;
      console.log(ev)//事件对象
      ev.preventDefault()//阻止默认事件，加上不再弹出"请输入内容"对话框
      console.log(this.validity)//validity是验证对象
      console.log(this.validity.valid)//没有输入内容，不符合验证必传，验证不通过值为false
      if (!this.validity.valid) {   //自定义的验证
        alert('未输入内容,验证不通过')
      }
    }, false)
  </script>
</body>

2.3 表单验证属性

valueMissing : 输入值为空时为true

<body>
  <form action="aa" method="post">
    <input type="text" name="username" id="text" required>
    <input type="submit" value="提交">
  </form>
  <script>
    text.addEventListener('invalid', function (ev) {   //不输入内容直接提交会触发
      ev = ev || window.event;
      console.log(this.validity.valueMissing)   
    }, false)
  </script>
</body>

typeMismatch : 控件值与预期类型不匹配为true

  <form action="aa" method="post">
    <input type="email" name="username" id="text" required>
    <input type="submit" value="提交">
  </form>
  <script>
    text.addEventListener('invalid', function (ev) {  
      ev = ev || window.event;
      console.log(this.validity.typeMismatch)   //输入的格式不符合就为true
    }, false)
  </script>

3.patternMismatch : 输入值不满足pattern正则为true

<body>
  <form action="aa" method="post">
    手机号码：<input type="text" id="text" pattern='/^1\d{10}$/'>
    <input type="submit" value="提交">
  </form>
  <script>
    text.addEventListener('invalid', function (ev) {
      ev = ev || window.event;
      console.log(this.validity.patternMismatch)   //输入的格式不符合就为true
    }, false)
  </script>
</body>

4.customError 不符合自定义验证

<body>
  <form>
    <input type="text" name="username" id="text" placeholder="请输入用户名">
    <input type="submit" value="提交">
  </form>
  <script>
    text.oninput = function () {//输入内容触发这个事件
      if (this.value == '张三') {//成功了添加自定义验证器
        this.setCustomValidity('该用户已注册')
      } else {
        this.setCustomValidity('')
      }
    }
    text.addEventListener('invalid', function (ev) {//监听invalid,触发事件处理函数，是张三就执行这里
      ev = ev || window.event;
      alert(this.validity.customError)
    }, false)
  </script>
</body>

5.setCustomValidity(); 自定义验证(是否输入了某些值)

H5表单

H5表单

1. HTML4 form表单复习

2. HTML5表单

2.1 emil

2.2 url

2.3 date

2.4 datetime-local

2.5 time

2.6 month

2.7 week

2.8 number

2.9 range

2.10 search

2.11 color

2.12 tel

2. 表单验证

表单方法Methods---select()

2.1 invalid事件

2.3 表单验证属性

猜你喜欢

热点阅读