美文网首页
表单脚本

表单脚本

作者: astak3 | 来源:发表于2018-11-14 23:15 被阅读0次

form 表单

如果form表单内没有submit按钮,只有button元素,那么这个button可以升级为submit按钮。

form 表单用来向服务器提交信息,常用属性

  • action:提交表单的地址
  • name:页面中可能不止一个表单,用name来区分,PS:id 也可以
  • method:提交表单的方法,postget
  • target:在何处打开action
  • enctype
  • postget安全性高,post通过request body传递数据,get把参数包含在 URL 中
  • post一般用于向服务器传送数据,get一般用于向服务器获取数据
  • get请求页面可以被收藏,post不可以
  • get只能进行 URL 编码,而 post支持多种编码方式
  • get在 URL 中传递参数有长度限制,而 post没有

input

input 标签用来接收用户填写的信息,配合label使用,它的for属性可以选中form表单内的id属性或者用labelinput包裹起来就不需要用for
常用属性

  1. type:常用的值
  • password:输入的内容自动自动变成小圆点
  • checkbox:多选,靠name属性分组,提交到后端的时候被选中的
    value是以 "," 分割的一个字符串,通过name属性获得
  • radio:单选,靠name分组
  • hidden:暂存一些信息
  • file:文件上传
    • accept设置上传文件格式
    • multiple文件多选
  • submit/button/resetsubmit可以提交表单,button不能提交表单,reset清空表单
  1. placeholder:提示性文字,一旦输入内容就消失
  2. disabled:该input被禁用
  3. require:该input必须被填写

select

select用来设置下拉菜单,属性multiple可设置多选

  • option标签,属性selected:默认选择

textarea:多行文本输入,rows,cols设置默认行列

表单脚本

<form id="myColor" method="post">
    <input type="radio" name="color" value="red">Red
    <input type="radio" name="color" value="green">Green
    <input type="radio" name="color" value="blue">Blue
</form>
<form id="myText" method="post">
    <input type="text" value="hello">
    <input type="text" value="world">
    <input type="text" value="JS" autofocus>
    <input type="submit" value="提交">
</form>
<script>
    var myColor = document.getElementById('myColor')
    var myText = document.getElementById('myText')
    
    //取得表单中第一个字段
    myColor.elements[0]
    
    //取得表单中`name`为`color1`的字段
    myColor.elements[color1]
    
    //取得表单中字段的数量
    myColor.elements.length
    
    //当前字段禁用
    myColor.elements[0].disabled = true
    
    //点击input 选中默认展示的value
    myText.elements[1].addEventListener('blur',function(e){
        e.target.select()
    })
</script>
  1. 可以通过document.forms[0]获得表单
  2. myColor.elements[0]可获得到表单中的第一个字段,多选框name不同,也可以用name的值查找,如myColor.elements[color1]
  3. myColor.elements.length取得表单中字段的数量.
  4. myColor.elements[0].disabled = true禁用表单当前字段,true为禁用,false为恢复使用,可以应用在表单提交之后,防止用户反复提交表单
myText.addEventListener('click',function(){
    if(this.elements[3].type === 'submit'){
        this.elements[3].disabled = true
    }
})
  1. autofocus在表单字段中设置,当浏览器加载时自动把焦点移到该字段
  2. focus()change()blur()分别是获得焦点时触发,失去焦点并改变value才触发,失去焦点时触发,其中change()blur()先后顺序并没有严格规定。
    输入框选中高亮,输入非数字,改变颜色
  myText.elements[0].addEventListener('focus',function(e){
      if(e.target.style.borderColor !== 'red'){
          e.target.style.borderColor = 'yellow'
      }
  })
  myText.elements[0].addEventListener('blur',function(e){
      console.log(e.target.value)
      if(/[^\d]/.test(e.target.value)){
          e.target.style.borderColor = 'red'
      }else{
          e.target.style.borderColor = ''
      }
  })
  myText.elements[0].addEventListener('change',function(e){
      if(/[^\d]/.test(e.target.value)){
          e.target.style.borderColor = 'blue'
      }else{
          e.target.style.borderColor = ''
      }
  })
  1. input可设置sizemaxlength,不能设置rowscols;而textarea则可以,但不能设置最大字符数。

相关文章

  • 四周搞定《JavaScript 高级程序设计》 - 读书笔记(D

    第14章 表单脚本 14.1 表单的基础知识 14.1.1 提交表单 14.1.2 重置表单 14.3 选择框脚本...

  • JavaScript高级程序设计(第三版) 第14章 表单For

    1### Menu 第14章 表单脚本 14.1 表单的基础知识 14.1.1 提交表单 14.1.2 重置表单 ...

  • 表单脚本基础知识

    本文介绍了JS表单脚本的基础知识,希望大家对表单脚本有初步的理解,后续还会详细整理各类表单的知识 HTML元素 <...

  • JavaScript 高级程序设计(第14章 表单脚本)

    第14章 表单脚本 1. 表单的基础指示 在 JavaScript 中,表单对应的则是 HTMLFormEleme...

  • 十四章 表单脚本

    第十四章 表单脚本 表单的基础知识 基础知识 在javascript中,表单对应的是 HTMLForm-Eleme...

  • 26.javascript 表单处理

    学习要点: 1.表单介绍2.文本框脚本3.选择框脚本 为了分担服务器处理表单的压力,JavaScript 提供了一...

  • 表单脚本

    form 表单 如果form表单内没有submit按钮,只有button元素,那么这个button可以升级为sub...

  • 表单脚本

    在HTML中,表单时 元素来表示的,在JavaScript中,表单对应的是HTMLFormElement类型。 H...

  • 表单脚本

    本章主要介绍:表单、文本框验证与交互、使用其他表单控制。这一章会继续沿用上一章 封装的 EventUtil 对象(...

  • 14|表单脚本

    其中在前文提到了表单的基础知识,如下所示: 提交表单 重置表单 表单字段 01|文本框脚本 选择文本可以使用inp...

网友评论

      本文标题:表单脚本

      本文链接:https://www.haomeiwen.com/subject/teasfqtx.html