form表单元素介绍

CreateTime--2016年9月22日10:25:54

Author:Marydon

<form> 表单元素。

表单中的元素:

<input>表单控件元素

<select>选择列表元素

<option>选择列表条目元素

<textarea>文本区域元素

<label>表单标记元素

window.onload = function() {
//获取input标签
//方式一
var inputRadioTags = document.all.course;
//document.all.name值,如果页面中只有一个唯一的name值"course",则//inputRadioTags代表的是该单选框对象;如果有多个name="course",则//inputRadioTags代表的是数组
console.log(inputRadioTags[0].value);//获取的是第一个单选框的value属性
console.log(inputRadioTags[0].type);//获取的是第一个单选框的type属性
console.log(typeof inputRadioTags[0]);//获取的是第一个单选框的数据类型
console.log(inputRadioTags[0].name);//获取的是第一个单选框的name属性
//方式二(通过操纵form标签获取)
console.log(document.forms[0].course[1].value);
console.log(registForm.course[1].value);
//方式三:document.getElementsByName("course")[0]
//方式四:document.getElementsByTagName("input")[0]
//方式五:document.getElementById("id值");
}
<form action="#" name="registForm" method="post" onsubmit="return verfication()">
<input type="radio" name="course" value="语文"/>语文
<input type="radio" name="course" value="数学"/>数学
</form>

获取form对象
  //方法一
  document.forms[0]
  //方法二:根据name获取
  registForm

form表单元素的自定义属性的取值

<script type="text/javascript">
var name = "lisi";
function test1 () {
var name = "zhang";
function test2 () {
console.log(this.name);
}
alert(name);
//return test2;
}
window.onload = function () {
/**
* 获取下面这个input标签
*/
//方法一:根据name获取--这种获取方式,如果存在多个input标签的name="userName"的,返回就是
//一个数组;如果只有,返回的就是该标签对象(只获取form表单定义的name)
var inputUnameTag = document.all.userName;
/**
* 方法二:也是根据name获取
* var inputUnameTag = document.getElementsByName("userName")[0];
*/
/**
* 方法三:根据input标签获取
* var inputUnameTag = document.getElementsByTagName("input")[0];
*/
//获取该标签的自定义onSuccess属性
/**
* 自定义属性的值的获取方式
* 错误方式:
* var aa = inputUnameTag.onSuccess; 自定义属性无法通过这种方式获取
* 正确的方式为:使用getAttribute()方法
*/
var errorMsg = inputUnameTag.getAttribute("onError");//errorMsg的值为:错误
/**
* 运行自定义属性调用的方法
* 错误方式:
* var ee = inputUnameTag.getAttribute("onSuccess");//这样获取的是字符串"test1()"
* 正确方式:eval()
*/
var result = eval(inputUnameTag.getAttribute("onSuccess"));
//会将test1()当作方法来执行,如果有返回值用变量接收
console.log(cc); //如果没有定义返回值,则会显示undefined
}
</script>
<input onSuccess="test1()" onError="错误" name="userName" value="zhang"/>

相关推荐:

 

js 取值&赋值-form表单的更多相关文章

  1. 取值:form表单取值、input框绑定取值

    1. form表单取值1.1 方式一,通过<form bindsubmit="formSubmit">与<button formType="submit ...

  2. JS JSON序列化 Ajax form表单

    # JS序列化 a = {"k1":"v1"} #序列化为字符串 类似python json.dumps(a) b = JSON.stringify(a) &q ...

  3. Flask基础之返回值与form表单提交

    目录 1.Python 现阶段三大主流Web框架 Django Tornado Flask 对比 2.Flask的安装 3.Flask的第一个简单应用 4.Flask中的render_template ...

  4. JS解决在提交form表单时某个值不存在 alter弹窗点确定不刷新界面

    <form action="" method="post" onsubmit="return checkname()"> < ...

  5. JS 无限长form表单提交

    1 简介 开发时候,总会遇到根据后台传的变量{组件数}来动态渲染组件的情况,比如后台传命令要绑定10个父子关系,则前台展开十个input组件,后台决定绑定5个福字关系,则前台展开5个input组件.再 ...

  6. JS将文件以form表单一样提交到后台

    这是很简单.. HTML <div> <input type="file" id="myfile"> <input type=&q ...

  7. JS将文件像form表单一样提交到后台

    这是很简单.. HTML <div> <input type="file" id="myfile"> <input type=&q ...

  8. js中大数据量form表单卡顿问题解决

    转载大神: http://www.mamicode.com/info-detail-1773696.html

  9. 微信小程序:input输入框和form表单几种传值和取值方式

    1.传值:index下标传值.页面navigator传值 1.index下标 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.data ...

随机推荐

  1. java 实现输出姓和名

    package xiaojie; import java.util.Scanner; public class baiJiaXing { public static void main(String[ ...

  2. java程序的运行方式

    1.JAR File JAR 文件用于压缩和发布,而且还用于部署和封装库.组件和插件程序,并可被像编译器和 JVM 这样的工具直接使用 有点类似于net中的dll 2.Runnable JAR Fil ...

  3. Android之MVC——Model通知View去更新(实用)

    下面两段标红加深的代码是重点: import android.app.Activity; import android.os.Bundle; import android.view.View; imp ...

  4. 使用navicat工具创建MySQL存储过程

    使用Navicat for MySQL工具创建存储过程步骤: 1. 新建函数(选择函数标签 -> 点击新建函数): 2.输入函数的参数个数.参数名.参数类型等: 3.编写存储过程:  代码如下: ...

  5. [leetcode]Binary Tree Level Order Traversal II @ Python

    原题地址:http://oj.leetcode.com/problems/binary-tree-level-order-traversal-ii/ 题意: Given a binary tree, ...

  6. pytorch 学习问题

    https://pytorch.org/tutorials/beginner/blitz/neural_networks_tutorial.html#sphx-glr-beginner-blitz-n ...

  7. Insertion Sort List Leetcode java

    题目: Sort a linked list using insertion sort. 题解: Insertion Sort就是把一个一个元素往已排好序的list中插入的过程. 初始时,sorted ...

  8. layer和3D仿射变换

    1.视图的显示基于图层,通过控制图层同样能控制显示效果,获取当前的视图的layer,并为其增加圆角边框. //设置layer边框的宽度为2 view.layer.borderWidth=; //如果需 ...

  9. Golang 中使用多维 map

    http://tnt.wicast.tk/2015/11/02/golang-multiple-dimension-map/ Golang 的 XML/JSON 解析库乍看使用起来很方便,只要构造一样 ...

  10. Android -- onWindowFocusChanged

    Android中获取手机屏幕的高度和宽度,我们知道在onCreate方法中获取到的值都是为0的,有人说可以在onClick方法中获取值,这个也是个方法 ,但在onWindowFocusChanged方 ...