表单脚本

wangtdgoodluck 发布于2019-08-22 18:42 / 604人阅读

摘要：表单如果表单内没有按钮，只有元素，那么这个可以升级为按钮。输入框选中高亮，输入非数字，改变颜色可设置，不能设置而则可以，但不能设置最大字符数。

form 表单

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

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

action：提交表单的地址

name：页面中可能不止一个表单，用name来区分，PS：id 也可以

method：提交表单的方法，post或get

target：在何处打开action

enctype：

application/x-www-form-urlencoded：在发送前编码所有字符(默认)

text/plain：空格转换为 "+" ，但不对特殊字符编码

multipart/form-data：使用包含文件上传控件的表单时，必须使用该值

注：post请求和get请求区别：参考文章：99% 的人都理解错了 HTTP 中 GET 与 POST 的区别

post比get安全性高，post通过request body传递数据，get把参数包含在 URL 中

post一般用于向服务器传送数据，get一般用于向服务器获取数据

get请求页面可以被收藏，post不可以

get只能进行 URL 编码，而 post支持多种编码方式

get在 URL 中传递参数有长度限制，而 post没有

input

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

type：常用的值

password：输入的内容自动自动变成小圆点

checkbox：多选，靠name属性分组，提交到后端的时候被选中的
value是以 "," 分割的一个字符串，通过name属性获得

radio：单选，靠name分组

hidden：暂存一些信息

file：文件上传

accept设置上传文件格式

multiple文件多选

submit/button/reset：submit可以提交表单，button不能提交表单，reset清空表单

placeholder：提示性文字，一旦输入内容就消失

disabled：该input被禁用

require：该input必须被填写

select

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

option标签，属性selected：默认选择

textarea：多行文本输入，rows，cols设置默认行列 表单脚本


    Red
    Green
    Blue

可以通过document.forms[0]获得表单

myColor.elements[0]可获得到表单中的第一个字段，多选框name不同，也可以用name的值查找，如myColor.elements[color1]。

myColor.elements.length取得表单中字段的数量.

myColor.elements[0].disabled = true禁用表单当前字段，true为禁用，false为恢复使用，可以应用在表单提交之后，防止用户反复提交表单

myText.addEventListener("click",function(){
    if(this.elements[3].type === "submit"){
        this.elements[3].disabled = true
    }
})

autofocus在表单字段中设置，当浏览器加载时自动把焦点移到该字段

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 = ""
      }
  })

input可设置size、maxlength，不能设置rows、cols；而textarea则可以，但不能设置最大字符数。

GPU云服务器云服务器 html脚本运行脚本面板脚本脚本安全配置脚本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96105.html

表单脚本

摘要：文本框脚本有两种方式表现文本框的单行文本框和的多行文本框。对于单行文本框，通过特性可以指定文本框能够显示的字符数，通过特性访问其内容，而则用于指定其可以接受的最大字符数。 title: 表单脚本 date: 2016-12-19 15:17 tags: JavaScript 0x00 表单基础在 HTML 中，表单由元素来表示，但是在 JavaScript 中，表单对应...

stormgens 2019-08-21 11:19 评论0 收藏0
JavaScript 表单脚本——“表单的基础知识”的注意要点

摘要：处理表格和提交等等重置表单重置表单应该使用或当用户单击重置按钮重置表单时，会触发事件，可以在必要的时候取消重置操作另外也可以通过脚本调用方法重置表单，在调用方法重置表单时会触发事件。在中，表单中新增加了属性，自动把焦点移动到相应字段。 HTMLFormElement继承了HTMLElement，它自己独有的属性和方法有： acceptCharset:服务器能够处理的字符集，等价于HT...

chnmagnus 2019-08-19 17:26 评论0 收藏0
JavaScript 表单脚本

摘要：文本框获得焦点时，选中其中所有的文本思路利用焦点事件事件，在文本框获得焦点时，利用其方法选中所有文本。自动切换焦点思路利用事件检测用户输入新字符后，文本框内的字符串是否已经达到最大长度，若达到最大长度，则将焦点切换至下一个文本框。 JavaScript 表单脚本通过 document.forms 可以获得一个包含当前页面中所有表单的集合 HTMLFormElement 接口下面是这...

PrototypeZ 2019-08-20 11:26 评论0 收藏0
JavaScript 表单脚本——“表单序列化”的注意要点

摘要：浏览器如何将数据发送给服务器对表单字段的名称和值进行编码，使用和号分隔不发送禁用的表单字段只发送勾选的复选框和单选按钮不发送为和的按钮多选框中每个选中的值单独一个条目在单击提交按钮提交表单的情况下，也会发送提交按钮。否则不发送提交按钮。浏览器如何将数据发送给服务器：对表单字段的名称和值进行URL编码，使用和号（&）分隔不发送禁用的表单字段只发送勾选的复选框和单选按钮不发送t...

BlackHole1 2019-08-19 17:29 评论0 收藏0