• js高级程序设计 笔记 --- 表单


    一,基础知识

      在html中,表单是form元素,而在js中,表单对应的是HTMLFormElement类型,继承自HTMLElement,其独特的属性和方法有(常见):

        action:接收请求的URL,

        elements: 表单中所有控件的集合

        length: 表单中控件的数量

        method: 发送的http请求的类型。

        name: 表单的名称。

        reset() : 重置所有表单域。

        submit() : 提交表单。

      1,提交表单

        input type=submit       button type=submit    input type=image    可以使用回车键来提交表单。

        也可以使用:  form.submit() 来以编程式来提交表单。

      2,重置表单

        使用type= reset的input或者button都可以创建重置按钮。也可以通过js来重置 form.reset()

      3,表单字段

        可以使用原生的DOM方法来访问表单元素。此外,每个表单都有elements属性。可以使用name特性来访问它们。

        表单字段共有的属性(除了fieldset元素)

          disabled form  name readOnly  tabIndex  type  value

        共有的表单字段方法:

          focus() 和 blur():

          可以使用autofocus属性来在页面打开时自动的聚焦如此。

      4,文本框脚本

        input type=text  和 textarea:  输入的内容都保存在value内。

        select事件:在选择了文本框中的文本时,就会触发select事件。

        

      5,自动切换焦点

    h5约束验证API

      1,required

      2,输入类型: url  email  等

      3,数值范围 : min和max   可以使用setUp()和setDown()来修改。

      4,pattern:正则校验

      5,禁用验证 :  设置novalidate属性,可以告诉表单不进行校验

      

    选择框脚本

      select和option,有以下的属性和方法

        add: 向控件中插入新的option元素

        multiple: 布尔值,表示是否允许多选

        options:控件所有option元素的HTMLCollection

        remove(index):移除给定位置的选项

        selectIndex:基于0的选中项的索引,如果没有选中项则为-1,多选的话只保存第一个

        size:选择框中可见的行数

      添加新选项:1,创建option, select appendChild

            2,使用option构造函数

            3,使用select的add方法添加

      移除选项:    1,removeChild() 

            2,也可以使用remove(索引)

            3,将对应的选项置为null

    表单序列化:

      

          

             

        

      

        

  • 相关阅读:
    转:页面刷新方法
    CSS 浏览器兼容与解析
    转XML格式与DataTable、DataSet、DataView格式的转换
    好文共欣赏--发布收藏
    利用HttpWebRequest自动抓取51la统计数据
    Asp.net中多语言的实现
    转 启用IIS的Gzip压缩
    在asp.net web 程序中使用Sqlite数据库
    cte+xml
    trace (转)
  • 原文地址:https://www.cnblogs.com/wjyz/p/10284315.html
Copyright © 2020-2023  润新知