javascript基础。表单操作

2023-11-09 00:00•javascript•阅读 3733

HTML表单是通过<form/>元素来定义的,它有以下特性

◦ method –表示浏览器发挞GET请求或是发送POST请求

◦ action – 表示表单所要提交到的地址URL

◦ enctype – 当向服务器端发送数据时，数据应该使用的编码方法，默认的是application/x-www-url-encoded,不过，如果上传文件，可以设置成multipart/form-data.

◦ accept – 当上传文件时，列出服务器能正确处理的mime类型

◦ accept-charset – 当提交数据时，列出服务器所能接受的字符编码

表单可以包含任意数目的输入元素

u <input/> --主要的HTML输入元素。通过type特性来判断是哪种输入控件

• text

• radio

• checkbox

• file

• password 密码框

• button 按钮

• submit 提交按钮

• Reset 重置

• Hidden 隐藏域

• image

• <select/> -- 组合框与下拉列表框,里面的值由<option/>元素定义.

• <textarea/> --多行文本框，尺寸由rows和cols来定义

• 二、对form元素进行脚本编程

• 1、如何获取form表单

• var oForm = document.getElementById(“form1”)

• var oForm = document.forms[0]

• var oForm = document.forms[“form1”]

• 2、访问表单字段(利用name属性)

• var oField = oForm.elements[0];

• var oField = oForm.elements[“txtUser”]//通过id访问

• var oField = oForm.txtUser

• var oField = oForm[“txtUser”]

• 注：也可直接用document.getElementById(“txtUserID”);

表单字段的共性

所有表单字段（除hidden字段）,都包含同样的属性方法和事件

u disabled特性:用于获取或设置表单控件是否被禁用

u blur()方法，可以使表单字段失去焦点（将焦点移到他处）

u focus()方法，可以使表单获得焦点

例:

Var oFiled1 = oForm.elements[0];

Var oFiled2 = oForm.elements[1];

oField1.disabled = true; //禁用

oField2.focus();//获取焦点

alert(oField1.form == oForm); //output “true”

应用1:聚焦于第一个字段

注意：让form的第一个元素获取焦点的代码：

document.forms[0].elements[0].focus()

但此时，如果第一个字段是隐藏字段，则会出错

故代码应如下所示：

if (document.forms.length>0)

{

for(var i=0;i<document.forms[0].elements.length;i++)

{

var oField = document.forms[0].elements[i];

if (oField.type!="hidden")

{

oField.focus();

return;}

}

应用2:提交表单

当用户点击一个按钮，无需其他编码，就可以提交表单，如果按回车，默认也认为是提交表单

可以在action中加入警告来检测表单是否提交

利用submit()方法来提交表单,如：

var oForm = document.Forms[0];

oForm.submit();

也可用按钮结合上述代码实现提交表单

} function go()

} {

} if (confirm("你确实要提交吗？"))

} {

} document.forms[0].submit();

} }

以上代码无论是否点击确定都会提交

正确代码：

function go()

{

if (confirm("你确实要提交吗？"))

{return true;

}else

return false;}

} 应用3：重置表单

<input type=“reset” value=“重置”/> onreset事件，表单元素恢复到页面加载的状态

类似于提交按钮，reset也会触发form的onreset事件，可以在此处取消表单的重置.

同时，表单也有reset()方法，可以直接从脚本中重置表单，而无需使用重置按钮

} function resetform()

} {

} if (confirm("你确实要重置表单吗？"))

} {

} return true;

} }else

} return false;

} }

表单的onsubmit事件：表单提交前会触发表单此事件,可以在此处进行表单的验证，并取消表单提交

} function go()

} {

} if (confirm("你确实要提交吗？"))

} {

} document.forms[0].submit();

} }else

} return false;

} }

应用4:仅提交一次

<input type=“button” value=“submit”

onclick=“this.disabled=true;this.form.submit()”/>

或

<form action=“xxx.aspx" name="form1" onsubmit="return go()"

} function go()

} {

} if (confirm("你确实要提交吗？"))

} {

} document.forms[0].mysubmit.disabled = true;

} return true;

} }else

} return false;

} }

三、文本框(text与textarea)

size:允许显示的字符数

maxlength:最多容纳的字符数

如：

<textarea rows=“25” cols=“5”>mytest</textarea>//指定textarea的行数和列数

textarea指定最大字符数无效

获取和更改文本框的值

使用document.getElementById(“mytxt”).value来获取或更改文本框的值,如：

var objtxt = document.getElementById(“mytxt”);

If (objtxt)

{

objtxt.value=“aaa”;

}

使文本获得焦点 objtxt.focus(); 选择文本 objtxt.select();

} 文本框事件

focus事件：文本框得到焦点时发生

blur事件:文本框失去焦点时发生

change事件：更改内容后失去焦点时发生（如通过value对其修改则不会触发）

select事件:当一个或多个字符选中时发生，无论是否通过select()方法。

应用1--自动选择文本

文本框获取焦点后自动选中文本

但如果所有文本都想这样？可通过如下js实现

function setTextFocuse(){

var oInput = document.getElementsByTagName("input");

var oTextArea = document.getElementsByTagName("textarea");

for(var i=0;i<oInput.length;i++) {

if (oInput[i].type=="text" || oInput[i].type=="password"){

oInput[i].onfocus = function(){this.select();}}}

for(var i=0;i<oTextArea.length;i++) {

if (oTextArea[i].type=="text" || oTextArea[i].type=="password"){

oTextArea[i].onfocus = function(){this.select();}

}

应用2 –自动切换到下一个

应用说明：当某个文本框只允许接受指定数量的字符串时，如果能直接切换到下一个字段，岂不很好，当输入社会安全码、身份证号或是产品ID数字时，常会用到这个功能

function AttachKeyUp(){

var oInputs = document.getElementsByTagName("input");

for(var i=0;i<oInputs.length;i++) {

if (oInputs[i].type!=="hidden" && oInputs[i].getAttribute("maxlength")!=2147483647) {

oInputs[i].onkeyup=function(){tabForward(this);};

// tabForward(this)焦点自动跳到下一个可用文本框

}

function tabForward(oTextBox) {

var oForm = oTextBox.form;//获取表单元素

if (oForm.elements[oForm.elements.length-1]!=oTextBox

//当前表单最后元素是不是当前元素

&& oTextBox.value.length == oTextBox.getAttribute("maxlength")){

//当前文本框的字数是不是文本框的最大输入字数

for(var i=0;i<oForm.elements.length;i++){

if (oForm.elements[i]==oTextBox){

for(var j=i+1;j<oForm.elements.length;j++){

oForm.elements[j].focus();//下一个文本框获得焦点

return; }} } } }

=========敲回车进入下一文本框

function AttachKeyDown() {

var oInputs = document.getElementsByTagName("input");

for(var i=0;i<oInputs.length;i++) {

if (oInputs[i].type!=="hidden") {

oInputs[i].onkeydown=function(){

var event = window.event;

if (event.keyCode==13) //按下键的aciLL值

{enterForward(this); } }; } }}

应用3 -- 限制textarea的字符数

虽然<input/>元素可以很容易地限制允许的字符数量，但<textarea/>元素却不能，它没有maxlength属性，解决方法是用javascript来模仿maxlength属性.如：

<td >

<select >}



	function add(oListBox,sName,sValue)
	{
	var oPtion = document.createElement("option");
	oPtion.appendChild(document.createTextNode(sName));
	if (arguments.length == 3)
	{
	oPtion.setAttribute("value",sValue);
	}
	oListBox.appendChild(oPtion);
	}

	function Del(index)
	{
	var oListBox = document.getElementById("selAge");
	//oListBox.options[index]=null;
	oListBox.remove(index);

	}

	function move(oListFrom,oListTo,index)
	{
	var oOption = oListFrom.options[index];
	if (oOption)
	{
	oListTo.appendChild(oOption);
	}
	}

	function goRight()
	{
	var oListFrom = document.getElementById("fromList");
	var oListTo = document.getElementById("toList");

	move(oListFrom,oListTo,oListFrom.selectedIndex);
	}

	function goLeft()
	{
	var oListFrom = document.getElementById("toList");
	var oListTo = document.getElementById("FromList");

	move(oListFrom,oListTo,oListFrom.selectedIndex);
	}

javascript基础。表单操作

相关推荐

JavaScript 入门基础 ，五

Struts2的​HTML非表单标签有哪些？

Struts2的​HTML表单标签有哪些？

PHP文件操作 表单提交数据的两种方式 文件上传

PHP 获取提交表单数据方法

JavaScript表单提交不能消除使用类型为hidde隐藏的input的快速解决办法！！

poi-java基础操作

JavaScript基础之文件上传与下载的实现详解

JavaScript 入门基础，五

Struts2的HTML非表单标签有哪些？

Struts2的HTML表单标签有哪些？

PHP文件操作表单提交数据的两种方式文件上传