`
mars李
  • 浏览: 50239 次
  • 性别: Icon_minigender_1
  • 来自: 柳州
社区版块
存档分类
最新评论

JS窗体中的基本元素

阅读更多
要实现动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。

二、窗体中的基本元素
窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素,必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:
formName.elements[].methadName (窗体名.元素名或数组.方法)
formName.elemaent[].propertyName(窗体名.元素名或数组.属性)
 
下面分别介绍:
 
1、Text单行单列输入元素
 功能:对Text标识中的元素实施有效的控制。
 基本属性:
Name:设定提交信息时的信息名称。对应于HTML文档中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
defaultvalue:包括Text元素的默认值
 基本方法:
blur():将当前焦点移到后台。
select():加亮文字。
 主要事件:
onFocus:当Text获得焦点时,产生该事件。
OnBlur:从元素失去焦点时,产生该事件。
Onselect:当文字被加亮显示后,产生该文件。
onchange:当Text元素值改变时,产生该文件。
例:...
<Form name="test">
<input type="text" name="test" value="this is a javascript" >
</form>
...
<script language ="Javascirpt">
document.mytest.value="that is a Javascript";
document.mytest.select();
document.mytest.blur();
</script>
 

2、textarea多行多列输入元素
 功能:实施对Textarea中的元素进行控制。
 基本属性
name:设定提交信息时的信息名称,对应HTML文档Textarea的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
Default value:元素的默认值。
 方法:
blur():将输入焦点失去
select():将文字加亮后
 事件:
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件
Onchange:当文字值改变时,产生该事件
Onselect:当文字加亮后,产生该文件
 
3、Select选择元素
 功能:实施对滚动选择元素的控制。
 属性:
name:设定提交信息时的信息名称,对应文档select中的name。
Length:对应文档select中的length
options:组成多个选项的数组
selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性:
Text:选项对应的文字
selected:指明当前选项是否被选中
Index:指明当前选项的位置
defaultselected:默认选项
 
 事件:
OnBlur:当select选项失去焦点时,产生该文件。
onFocas:当select获得焦点时,产生该文件。
Onchange:选项状态改变后,产生该事件。
 
4、Button按钮
 功能:实施对Button按钮的控制。
 属性:
Name:设定提交信息时的信息名称,对应文档中button的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
 方法:
click()该方法类似于一个按下的按钮。
 事件:
onclick当单击button按钮时,产生该事件。
例 :
<Form name="test">
<input type="button" name="testcall" onclick=tmyest()>
</form>
...
<script language="javascirpt">
document.elements[0].value="mytest"; //通过元素访问

document.testcallvalue="mytest"; // 通过名字访问
</script>
.....

 
5、checkbox检查框
 功能:实施对一个具有复选框中元素的控制。
 属性:
name:设定提交信息时的信息名称。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
Checked:该属性指明框的状态true/false.
defauitchecked:默认状态
 方法:
click()该方法使得框的某一个项被选中。
 事件:
onclick:当框的选被选中时,产生该事件。  

6、radio无线按钮
 功能:实施对一个具单选功能的无线按钮控制。
 属性:
name:设定提交信息时的信息名称,对应HTML文档中的radio的name相同
value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中的radio的name。
length:单选按钮中的按钮数目。
defalechecked:默认按钮。
checked:指明选中还是没有选中。
index:选中的按钮的位置。
 方法:
chick():选定一个按钮。
 事件:
onclick:单击按钮时,产生该事件。
 
7、hidden:隐藏
 功能:实施对一个具有不显示文字并能输入字符的区域元素的控制。
 属性:
name:设定提交信息时的信息名称,对应HTML文档的hidden中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档hidden中的value。
defaleitvalue:默认值
 
8、Password口令
 功能:实施对具有口令输入的元素的控制。
 属性:
Name:设定提交信息时的信息名称,对应HTML文档中password中的name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中password中的Value。
defaultvalu:默认值
 方法
select():加亮输入口令域。
blur():使这丢失passward输入焦点。
focus():获得password输入焦点。
 
9、submit提交元素
 功能:实施对一个具有提交功能按钮的控制。
 属性:
name:设定提交信息时的信息名称,对应HTML文档中submit。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中value。
 方法
click()相当于按下submit按钮。
 事件:
onclick()当按下该按钮时,产生该事件。

分享到:
评论
1 楼 corvteet 2007-12-13  
我是初学者,这东西很管用,谢谢!!

相关推荐

    一套漂亮的js div alert弹出窗体

    标题中的“一套漂亮的js div alert弹出窗体”指的是使用JavaScript和HTML5的div元素创建的自定义对话框,这种对话框通常用于替代浏览器原生的alert、confirm和prompt等函数,提供更丰富的视觉效果和交互体验。...

    javascript窗体模式

    JavaScript窗体模式是一种在网页应用中创建和管理窗口的方式,特别是在多页面交互或者单页应用程序(SPA)中,用于提供更好的用户体验和数据传递。在这个模式下,JavaScript被用来控制窗体的显示、隐藏、以及在不同...

    javascript 滚动窗体 弹出窗体 自动隐藏窗体 可拖动窗体

    在JavaScript编程中,滚动窗体、弹出窗体、自动隐藏窗体以及可拖动窗体是四个重要的交互设计概念,这些功能可以显著提升用户体验。本文将深入探讨这些知识点,并结合实际代码示例来帮助理解。 一、滚动窗体 滚动...

    用JavaScript实现网页里的Window7半透明窗体

    以上代码实现了一个基本的JavaScript半透明窗体,用户可以拖动窗口并使用滑块调整透明度。然而,为了达到Windows 7的效果,可能还需要考虑边框样式、阴影、动画和其他细节,这可能涉及到更复杂的CSS和JavaScript逻辑...

    Javascript + Css 实现弹出窗体效果

    在网页设计中,弹出窗体是一种常见的交互元素,它能够提供额外的信息或者与用户进行交互,例如登录、注册、确认操作等。本教程将基于`Javascript`和`Css`来探讨如何实现这样的效果。 首先,`CSS`(Cascading Style ...

    跨进程窗体引用

    总的来说,跨进程窗体引用是一项高级的开发技巧,它结合了进程通信和用户界面设计,为用户提供了一种独特的方式来整合多个进程中的界面元素。掌握这一技术,可以帮助开发者构建更加复杂和灵活的应用程序。在实践中,...

    利用javaScript实现点击输入框弹出窗体选择信息

    在本文中,我们主要介绍如何使用JavaScript技术实现一个功能,即当用户点击输入框时,会弹出一个窗体供用户选择信息。这个过程涉及到了JavaScript的基本语法、DOM操作、事件处理以及简单的样式应用等知识点。 首先...

    html 模态窗口子窗体调用父窗体的任何函数

    在HTML中,模态窗口往往被包含在一个`&lt;div&gt;`元素中,通过CSS设置为不可见,并在需要时通过JavaScript显示。例如,Bootstrap中模态窗口的基本结构如下: ```html &lt;!-- 子窗口内容 --&gt; ``` 为了实现子...

    jquery 弹出模态窗体

    在上述代码中,`$("#openModal")`是触发模态窗体显示的元素,可以是一个链接或按钮,而`$(".close")`则是用于关闭模态窗体的元素。`$(document).ready()`确保在页面加载完成后执行这些操作。 此外,jQuery还有一种...

    js弹出窗体讲解及示例源码

    弹出窗体是JavaScript中常见的一种交互方式,它能够提供额外的信息、确认用户操作或接收用户输入。在网页设计中,弹出窗体的应用无处不在,如警告对话框、提示信息、登录框、模态窗口等。 标题“js弹出窗体讲解及...

    Jsp中生成模式窗体代码详解

    本文将详细介绍如何在JSP(JavaServer Pages)环境中实现模式窗体的功能,并通过具体的JavaScript代码示例来解释其实现过程。 #### 模式窗体的基本概念 模式窗体是一种遮罩层与子窗体组合而成的设计模式,常用于...

    jquery弹出窗体

    在网页设计中,弹出窗体是一种常见的交互元素,用于提示信息、获取用户输入或显示警告。jQuery提供了多种方法来实现弹出窗体功能,这通常被称为“模式窗体”或“模态对话框”。让我们深入了解一下如何使用jQuery创建...

    javascript 子窗体父窗体相互传值方法

    在JavaScript编程中,子窗体与父窗体之间的数据传递是前端开发中常见的需求。当通过JavaScript的window.open函数打开一个新的浏览器窗口时,这个新窗口被称为子窗体(子窗口),而打开这个新窗口的页面则被称为父...

    遮罩窗体实现

    首先,我们来看看遮罩窗体的基本结构。一个遮罩窗体通常由两部分组成:主窗体和遮罩窗体。主窗体是用户交互的主要界面,而遮罩窗体则覆盖在主窗体之上,起到视觉隔离的效果。遮罩窗体的透明度可以根据需求调整,常见...

    C# WInForm窗体嵌入外部EXE程序.zip

    在C# WinForm应用开发中,有时我们需要将外部的EXE程序集成到我们的窗体(Form)中,以便用户可以在一个统一的界面下操作多个应用程序。这个过程涉及到进程管理、控件创建以及交互技术。本篇文章将深入探讨如何在...

    js弹出窗体,js,chart

    通过以上内容,我们可以理解JavaScript在弹出窗体方面的基本应用,包括基本对话框和自定义模态窗口的创建,以及如何利用Chart.js展示图表。这些技能对于网页和前端开发至关重要,能有效提升用户体验和网页的交互性。

    子窗体传值给父窗体的select

    综上所述,实现"子窗体传值给父窗体的select"的关键在于理解窗口间的通信机制,以及如何在JavaScript中操作DOM元素,特别是`select`和`checkbox`。在实际开发中,需要根据具体的业务需求和所使用的前端框架(如React...

    jquery弹出窗体效果

    这些方法可以改变元素的可见性,实现基本的显示和隐藏效果。例如,你可能有一个隐藏的div元素,当用户点击某个按钮时,通过jQuery选择该元素并调用`show()`方法使其可见,形成弹出效果。同时,使用`fadeOut()`和`...

    juqery Ui弹出窗体

    这个元素可以是任何你需要在弹出窗体中展示的内容,如表单、文本或图片。 ```html 基本对话框"&gt; 这是对话框的内容。 ``` 3. 初始化 Dialog:使用 jQuery 的 `.dialog()` 方法来创建和初始化对话框。可以设置各种...

    悬浮DIV弹出窗体实现登录

    在网页设计中,"悬浮DIV弹出窗体实现登录"是一种常见的交互设计手法,它能够为用户提供更加便捷和美观的登录体验。这种设计通常将登录表单以浮动窗口的形式展示,用户无需离开当前页面就可以完成登录操作,提升了...

Global site tag (gtag.js) - Google Analytics