【javascript】表单

表单是网页中提供的一种交互式操作手段,它主要分为两部分:一是用HTML源代码描述的表单,可直接通过插入的方式添加到网页中;二是提交后的表单处理,需要调用服务器端编写好的脚本对客户端提交的信息作出回应。在HTML中,只要插入表单标记<form></form>即可把表单插入到网页中。表单标记的部分属性如下:


属性


说明


name


设置表单名称


method


设置表单发送的方法,可以是“post”、“get”


action


设置表单处理程序


enctype


设置表单的编码方式


target


设置表单显示目标

一、信息输入

信息输入是表单操作的主要内容,用户在表单控件中输入必要的信息,发送到服务器请求响应,然后服务器将处理结果返回给用户。<input>是表单中输入信息常用的标记,其基本语法为:

<form action="">
	<input name="" type=""/>
</form>

在<input>标记中,name属性用于显示控件名称,type属性用于设置插入的控件类型。控件类型有如下几种:

1.文本控件

1)文本框——text

<input>标记的type属性值设置为text,即可插入表单中的单行文本框。输入的信息在文本框中单行显示

2)密码框——password

<input>标记的type属性值设置为password,即可插入表单中的密码框。在密码框中输入的内容,将会以小圆点的形式显示

3)文字域——textarea

在表单中插入文字域,只要插入成对的文字域标记<textarea></textarea>即可。文字域可用来输入多行文本,行间可换行

2.按钮

1)复选框——checkbox

<input>标记的type属性值设置为checkbox,即可插入表单中的复选框,其中的id为可选框

2)单选按钮——radio

<input>标记的type属性值设置为radio,即可插入表单中的单选按钮。在选中状态,按钮中心有一个小圆点

3)标准按钮——button

<input>标记的type属性值设置为button,即可插入表单中的标准按钮。按钮中的“value”值为显示在界面上时按钮的名称。

4)提交按钮——submit

<input>标记的type属性值设置为submit,即可插入表单中的提交按钮。当用户填完表单需要提交信息时,使用表单中的提交按钮进行提交

5)重置按钮——reset

<input>标记的type属性值设置为reset,即可插入表单中的重置按钮。当用户填完信息后,对自己填过的信息不满意时,可使用重置按钮,重新输入信息。

3.其它控件

1)文件域——file

<input>标记的type属性值设置为file,即可插入表单中的文件域。在文件域中可以添加整个文件

2)隐藏域——hidden

隐藏域在网页中对用户是不可见的,用户提交表单时,隐藏域中的信息也一起被提交。在<input>标记中将type属性值设为hidden即可插入表单中的隐藏域。

3)下拉菜单<select>和列表框<option>

在表单中插入下拉列表,只要插入成对的<select></select>,其中嵌套<option>即可。基本语法:

<form action="">
	<select name="" size="">
	<option value="">
	<option value="">
	…
	</select>
</form>

二、表单验证

表单验证一般是指利用正则表达式,对控件中的内容进行限制,关于正则表达式的限制,在以前的博客中提到过 ASP.net验证控件,形成的js文件太长,大家可以到这里下载http://pan.baidu.com/s/1jGkr5RK

时间: 2024-08-05 14:05:51

【javascript】表单的相关文章

Javascript表单验证知识

Javascript表单编程: 一.表单元素的查找方式: 1.var oForm=document.getElementById("Form1"); 2.var oForm=document.forms[Form1]//通过name查找: 二.表单字段的共同特点: disabled:该属性用于指示一个表单控件是否可用: form属性:该属性返回包含字段的表单: blur():该方法导致表单字段失去焦点: focus():该方法导致表单字段获得焦点: blur事件:当表单字段失去焦点时,

JavaScript 表单编程

目标:主要是访问用户输入的表单数据,校验用户输入的正确性. 获取表单的引用: //方法一:将表单的ID作为方法的参数 var f1 = document.getElementById("f1"); //方法二:表单集合,得到第一个表单 var f2 = document.forms[0]; //方法三:得到名为fm的表单 var f3 = document.forms["fm"]; //方法四:简写 var f4 = document.fm 访问表单的元素: //获

JavaScript表单处理(上)

为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面.  发文不易,转载请亲注明出处,谢谢! 一.表单介绍 在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,因此它拥有HTML元素具有的默认属性,并且还独有自己的属性和方法: HTMLFormElement属性和方法 属性或方法 说明 acceptCharse

JavaScript表单处理(下)

内容提纲: 1.文本框脚本 2.选择框脚本 发文不易,转载请亲注明链接出处,谢谢!   一.文本框脚本 在HTML中,有两种方式来表现文本框: 一种是单行文本框<input type="text">: 一种是多行文本框<textarea>. 虽然在HTML中<input>有value值,而<textarea>却没有,但在JS中都可以通过value获取他们的值. var textField = fm.elements[0]; var are

JavaScript表单序列化的方法详解

本文介绍下,在javascript中实现表单序列化的方法,通过实例加深理解,有需要的朋友参考下吧. 在JavaScript中,可以利用表单字段的type属性,连同name和value属性一起实现对表单的序列. 首先,我们来了解下在表单提交期间,浏览器是怎样将数据发送给服务器的.对表单字段的名称和值进行URL编码,使用和号(&)分割.不发送禁用的表单字段.只发送勾选的复选框和单选按钮.不发送type为"reset"和"button"的按钮.多选择框中的每个选中

JavaScript表单验证和正则表达式

JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html

JavaScript表单处理

JavaScript表单处理         一.表单介绍         属性或方法         action 服务器能够处理的字符集         length 表单中控件的数量         name 表单的名称         target 用于发送请求和接受响应的窗口名称         reset() 将所有表单重置         submit()  提交表单     获取表单<form>对象的方法有很多种,如下:         document.getElementB

JavaScript表单验证是否为中文

JavaScript表单验证是否为中文,判断一个输入量是否为中文,通过正则表达式实现. // 检查是否为中文 function isChn(str){ var reg = /^[u4E00-u9FA5]+$/; if(!reg.test(str)){m.mlyrx120.com return false; } return true; }

JavaScript表单验证中文大写字母

JavaScript表单验证中文大写字母,判断一个输入量是否为中文或大写的英文字母,通过正则表达式实现. // 检查是否为有效的真实姓名,只能含有中文或大写的英文字母 function isValidTrueName(strName){ var str = Trim(strName); //判断是否为全英文大写或全中文,可以包含空格 var reg = /^[A-Z u4E00-u9FA5]+$/;http://rl.82676666.com if(reg.test(str)){ return

10个强大的Javascript表单验证插件推荐

创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScript表单验证插件,使用它们完全可以节省你的时间!希望你喜欢. 1. validate.js Validate.js是一个非常不错的JavaScript表单验证库,源于CodeIgniter API.该库相当轻巧(不到1KB),不要求任何JavaScript框架,可以在所有主流浏览器中运行(包括IE