深入理解表单脚本系列第二篇——表单字段

关键词：

<form action="#">
    <input type="text" name="a">
    <textarea name="b"></textarea>
    <button name="c"></button>
    <fieldset name="d"></fieldset>
</form>
<script>
    var elements = document.forms[0].elements;
    //[input, textarea, button, fieldset, a: input, b: textarea, c: button, d: fieldset]
    console.log(elements);
    //<input type="text" name="a">
    console.log(elements.a);
    //<textarea name="b"></textarea>
    console.log(elements[1])
    console.log(elements[3] === elements.d)//true
</script>

<form name="form" id="myForm">
  <input type="text" id="a1" name="a" >
</form>
<script>
var myInput1 = myForm.a;
console.log(myInput1.id);//'a1'
</script>

disabled        布尔值，表示当前字段是否被禁用
form            指向当前字段所属表单的指针；只读
name            当前字段的名称
readOnly        布尔值，表示当前字段是否只读
tabIndex        表示当前字段的切换(tab)序号
type            当前字段的类型，如"checkbox"、"radio"等等
value           当前字段将被提交给服务器的值
defaultValue    表示该表单元素的初始值

<form action="#">
    <input value="123">
</form>
<script>
    var input = document.forms[0].elements[0];
    console.log(input.disabled);//false
    console.log(input.form);//<form action="#"></form>
    console.log(input.name);//''
    console.log(input.readOnly);//false
    console.log(input.tabIndex);//0
    console.log(input.type);//text
    console.log(input.value);//123
    console.log(input.defaultValue);//123
</script>

<form action="#">
    <input value="123">
</form>
<button id="btn1">禁用(启用)</button>
<button id="btn2">只读(读写)</button>
<script>
    var input = document.forms[0].elements[0];
    btn1.onclick = function(){
        input.disabled = !input.disabled;
    }
    btn2.onclick = function(){
        input.readOnly = !input.readOnly;
    }
</script>

<input id="test" type="text" value="123">
<button id="btn1">input元素获得焦点</button>
<button id="btn2">input元素失去焦点</button>
<script>
btn1.onclick = function(){test.focus();}
btn2.onclick = function(){test.blur();}
</script>

<input id="test" type="text" value="123">
<script>
    test.onchange = function(){
        this.style.backgroundColor = 'pink';
    }
</script>

<input id="test" type="text" value="123">
<script>
    test.onblur=test.onchange = function(e){
        e = e || event;
        this.value += e.type + ';';
    }
</script>

深入理解表单脚本系列第一篇——表单对象

×目录[1]表单属性[2]表单事件[3]表单方法前面的话　　javascript最初的一个应用就是分担服务器处理表单的责任，打破处处依赖服务器的局面。尽管目前的web和javascript已经有了长足的发展，但web表单的变化并不明显。由于web表... 查看详情

深入理解表单脚本系列第三篇——选择文本

×目录[1]select()[2]select事件[3]setSelectionRange()前面的话　　表单是最早用来与用户交互的工具，具有丰富的控件和属性。基本上，它们通过各种控件和属性就可以解决大部分问题。但还有一些问题还是需要表单脚本来实现的，... 查看详情

深入理解javascript函数进阶系列第二篇——函数柯里化

前面的话　　函数柯里化currying的概念最早由俄国数学家MosesSchönfinkel发明，而后由著名的数理逻辑学家HaskellCurry将其丰富和发展，currying由此得名。本文将详细介绍函数柯里化(curring) 定义　　currying又称部分求值。一个cur... 查看详情

web前端第二篇html基础二（表单div）

一、表单功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互   表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。   表单还可以包含textarea、select、fieldset和label... 查看详情

深入理解dom事件机制系列第二篇——事件处理程序

×目录[1]HTML[2]DOM0级[3]DOM2级[4]IE[5]总结前面的话　　事件处理程序又叫事件侦听器，实际上就是事件的绑定函数。事件发生时会执行函数中相应代码。事件处理程序有HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序... 查看详情

深入理解定时器系列第二篇——被誉为神器的requestanimationframe(代码片段)

前面的话　　与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。这有什么好处呢？为什么requestAnimationFrame被称为神器呢？本文将详细介绍HTML5新增的定时器requestAnimationFrame 引入　　计时器一直是javascript动画的... 查看详情

深入理解form系列--html表单

表单元素从HTML到HTML5,表单相关的元素已经得到了很大的扩充,基本能够满足我们常见的需求。但在实际工作中,因为交互或者浏览器兼容的需要,有时候不得不对原生的表单元素进行扩展或者模拟。但在此之前,清楚的了解并掌握各... 查看详情

深入理解ajax系列第四篇

前面的话　　现代Web应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据提供了便利。本文将先介绍表单编码，然后过渡到表单序列化，... 查看详情

深入理解javascript函数系列第三篇

...至可以用Function()构造函数来创建新的函数对象。本文是深入理解javascript函数系列第三篇——属性和方法 属性【length属性】　　函数系列第二篇中介绍过，arguments对象的length属性表示实参个数，而函数的length属性则表示形参... 查看详情

深入理解view知识系列三-window机制canvas的由来android事件的由来

我们在第一篇和第二篇中都涉及到了Window、WindowManager、PhoneWindow，而他们到底是什么，在第二篇又出现了WindowManagerImpl、WindowManagerGlobal、WindowSession、WindowManagerService，这么一堆的东西又都是干什么？起到什么样的... 查看详情

字体系列不继承到表单输入字段？

】字体系列不继承到表单输入字段？【英文标题】：Font-familyisnotinheritedtotheforminputfields?【发布时间】：2011-09-2503:05:22【问题描述】：html表单输入元素，例如输入文本框或选择框，不会自动继承body的font-family属性吗？例如：bodyfon... 查看详情

c++从青铜到王者第十二篇:深入理解默认成员函数之日期类的实现(代码片段)

系列文章目录文章目录系列文章目录前言一、类的6个默认成员函数二、日期类的实现总结前言一、类的6个默认成员函数二、日期类的实现#define_CRT_SECURE_NO_WARNINGS1#include<iostream>usingnamespacestd;classDatepublic: //获取某年某月的天... 查看详情

在 Django python 表单中，我如何给表单字段一个“第二个名字”？

】在Djangopython表单中，我如何给表单字段一个“第二个名字”？【英文标题】：InDjangopythonforms,howdoIgiveaformfielda\'secondname\'?【发布时间】：2019-06-0411:23:39【问题描述】：我的网站上有一个表格。该表单是使用python循环创建的，它... 查看详情

深入理解脚本化css系列第四篇——脚本化样式表

×目录[1]CSSStyleSheet[2]CSSRule前面的话　　关于脚本化CSS，查询样式时，查询的是计算样式；设置单个样式时，设置的是行间样式；设置多个样式时，设置的是CSS类名。脚本化样式表当然也是一种脚本化CSS的技术，虽然不经常使... 查看详情

深入理解脚本化css系列第一篇——脚本化行内样式

×目录[1]用法[2]属性[3]方法前面的话　　脚本化CSS，通俗点说，就是使用javascript来操作CSS。引入CSS有3种方式：外部样式，内部样式和行间样式。本文将主要介绍脚本化行间样式 基本用法　　行间样式又叫内联样式，使用... 查看详情

向 mysql 插入脚本添加额外的表单发布字段

】向mysql插入脚本添加额外的表单发布字段【英文标题】：Addingadditionalformpostfieldstoamysqlinsertscript【发布时间】：2014-02-0203:37:04【问题描述】：我一直在做一个关于使用Ajax发布到数据库的教程，现在我可以使用1个表单字段，但我... 查看详情

深入理解脚本化css系列第三篇——脚本化css类

前面的话　　在实际工作中，我们使用javascript操作CSS样式时，如果要改变大量样式，会使用脚本化CSS类的技术，本文将详细介绍脚本化CSS类 style　　我们在改变元素的少部分样式时，一般会直接改变其行间样式<divid="test"st... 查看详情

通过一次提交发送双表单，同时将电子邮件字段从第一个表单拉到第二个表单

】通过一次提交发送双表单，同时将电子邮件字段从第一个表单拉到第二个表单【英文标题】：SendingDualFormswithonesubmit,whilepullingtheemailfieldfromfirstFormintothesecond【发布时间】：2011-03-1415:58:22【问题描述】：我有两个表格需要发送-... 查看详情