测试之路，与你同行！

发布新日志

  • 使用javaScript进行表单验证-学习笔记二

    2012-02-25 12:39:59

    一、表单的定义
    FORM表单可以从客户端向服务器端发送数据，在服务器端，可以使用asp、jsp、servlet等程序将传递过来的数据读取出来进行处理。FORM定义基本格式是：
    <FORM. ACTION="" METHOD="" NAME="" ENCTYPE="">
    ...
    </FROM>
    ACTION指定表单提交的目标URL。如果为空，则提交给此表单自身的URL
    METHOD指定提交表单数据的方式。有两种：GET和POST
    如果为空，则使用GET方式提交数据。
    GET和POST的不同：
    1、GET数据是URL的一部分，所以它会将表单数据附在URL后面发送。也就是说，浏览器的地址栏将会显示表单中的数据，并且通常情况下浏览器会将这个附加数据后的URL保存起来，可以通过浏览器历史记录来得到。所以这种方式不适合发送需要保密的数据的表单，如密码等。而POST不是URL的一部分，它不会将表单数据附在URL后面，所以不会有上述问题。
    2、浏览器通常会限制URL长度，所以使用GET方式无法传送大量的数据，而POST方式不会有这种问题。所以，最好使用POST方式来传送表单数据。
    二、使用JavaScript进行表单验证
    使用javaScript可以在客户端对表单进行验证。假设有个登录表单，有用户名和密码。要求用户名和密码必须填写，否则不能登录。如果在服务器端来验证，实现上当然行得通，但是这种方式有一个弊端，如果用户没有输入用户名或密码，那他只有在提交到服务器端进行处理以后才可用得到错误信息，这无形中加重了服务的负担，也浪费了带宽。所以通常情况下，我们会将一部分不涉及到数据库的验证放到客户端来完成。
      <body>
        <form. name="test" method="post" action="login.jsp">
        用户名：<input type="text" name="UserName"/>
        <br/>
       密码：<input type="password" name="Pwd"/>
       <br/>
       <input type="button" value="提交" nClick="JavaScript.:checkForm();">
      
       
        </form>

     

    <Script. language="javaScript">
    function checkForm()
    {
       //定义一个变量，应用表单对象
       var theForm. = document.TEST;
       if(theForm.UserName.value=="")
       {
       alert("请输入用户名！");
       theForm.UserName.focus();
       }
     else if(theForm.Pwd.value=="")
     {
     alert("请输入密码！");
     theForm.Pwd.focus();
     }
     else
     {
     theForm.submit();
     }
     }
    </Script>
    </body>
    </html>

    查看(702) 评论(0) 收藏 分享 管理

  • html和javascript

    2012-02-25 12:06:25

    一、先说下html，html有一系列标签，它展示的页面是静态页面。
    如：
    <title>
    ...
    </title>
     <body bgcolor="pink">
        <form. >
        <tr>用户名</tr> <input type="text" name="username"  size="5"/>
        <br/>
        <tr>密      码</tr><input type="password" name="passwd" size="5"/>
        <br/>
        <input type="button" name="login" value="登录">
       <a href="MyHtml.html">此处看美女</a>
       
        </form>
        <input type="file" name="浏览" size="5"/> 
      </body>
    展示的样式如下：


    二、JavaScript
    javaScript是一种脚本语言 它可以嵌入到html中。
    java是一种面向对象的语言，而javaScript是基于对象（以及事件）的。JavaScript主要作用是用在浏览器端，用于产生一些动态效果或者用于对Html表单进行客户端的验证等。
    <script>和</script>之间为javaScript脚本。
    除了变量、流程控制、循环、函数定义外，还有内置对象。
    如window对象、document对象，form对象，
    window对象有三个重要的方法，alert用于显示警告信息，confirm用于显示确认信息，prompt用于询问，

    confirm用于显示确认信息
    查看(929) 评论(0) 收藏 分享 管理

  • HTML总结

    2010-01-29 17:34:58

    标签 描述 DTD
    <!--...--> 定义注释。 STF
    <!DOCTYPE>  定义文档类型。 STF
    <a> 定义锚。 STF
    <abbr> 定义缩写。 STF
    <acronym> 定义只取首字母的缩写。 STF
    <address> 定义文档作者或拥有者的联系信息。 STF
    <applet> 不赞成使用。定义嵌入的 applet。 TF
    <area> 定义图像映射内部的区域。 STF
    <b> 定义粗体字。 STF
    <base> 定义页面中所有链接的默认地址或默认目标。 STF
    <basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 TF
    <bdo> 定义文字方向。 STF
    <big> 定义大号文本。 STF
    <blockquote> 定义长的引用。 STF
    <body> 定义文档的主体。 STF
    <br> 定义简单的折行。 STF
    <button> 定义按钮 (push button)。 STF
    <caption> 定义表格标题。 STF
    <center> 不赞成使用。定义居中文本。 TF
    <cite> 定义引用(citation)。 STF
    <code> 定义计算机代码文本。 STF
    <col> 定义表格中一个或多个列的属性值。 STF
    <colgroup> 定义表格中供格式化的列组。 STF
    <dd> 定义定义列表中项目的描述。 STF
    <del> 定义被删除文本。 STF
    <dir> 不赞成使用。定义目录列表。 TF
    <div> 定义文档中的节。 STF
    <dfn> 定义定义项目。 STF
    <dl> 定义定义列表。 STF
    <dt> 定义定义列表中的项目。 STF
    <em> 定义强调文本。 STF
    <fieldset> 定义围绕表单中元素的边框。 STF
    <font> 不赞成使用。定义文字的字体、尺寸和颜色。 TF
    <form> 定义供用户输入的 HTML 表单。 STF
    <frame> 定义框架集的窗口或框架。 F
    <frameset> 定义框架集。 F
    <h1> to <h6> 定义 HTML 标题。 STF
    <head> 定义关于文档的信息。 STF
    <hr> 定义水平线。 STF
    <html> 定义 HTML 文档。 STF
    <i> 定义斜体字。 STF
    <iframe> 定义内联框架。 TF
    <img> 定义图像。 STF
    <input> 定义输入控件。 STF
    <ins> 定义被插入文本。 STF
    <isindex> 不赞成使用。定义与文档相关的可搜索索引。 TF
    <kbd> 定义键盘文本。 STF
    <label> 定义 input 元素的标注。 STF
    <legend> 定义 fieldset 元素的标题。 STF
    <li> 定义列表的项目。 STF
    <link> 定义文档与外部资源的关系。 STF
    <map> 定义图像映射。 STF
    <menu> 不赞成使用。定义菜单列表。 TF
    <meta> 定义关于 HTML 文档的元信息。 STF
    <noframes> 定义针对不支持框架的用户的替代内容。 TF
    <noscript> 定义针对不支持客户端脚本的用户的替代内容。 STF
    <object> 定义内嵌对象。 STF
    <ol> 定义有序列表。 STF
    <optgroup> 定义选择列表中相关选项的组合。 STF
    <option> 定义选择列表中的选项。 STF
    <p> 定义段落。 STF
    <param> 定义对象的参数。 STF
    <pre> 定义预格式文本。 STF
    <q> 定义短的引用。 STF
    <s> 不赞成使用。定义加删除线的文本。 TF
    <samp> 定义计算机代码样本。 STF
    <script> 定义客户端脚本。 STF
    <select> 定义选择列表（下拉列表）。 STF
    <small> 定义小号文本。 STF
    <span> 定义文档中的节。 STF
    <strike> 不赞成使用。定义加删除线文本。 TF
    <strong> 定义强调文本。 STF
    <style> 定义文档的样式信息。 STF
    <sub> 定义下标文本。 STF
    <sup> 定义上标文本。 STF
    <table> 定义表格。 STF
    <tbody> 定义表格中的主体内容。 STF
    <td> 定义表格中的单元。 STF
    <textarea> 定义多行的文本输入控件。 STF
    <tfoot> 定义表格中的表注内容（脚注）。 STF
    <th> 定义表格中的表头单元格。 STF
    <thead> 定义表格中的表头内容。 STF
    <title> 定义文档的标题。 STF
    <tr> 定义表格中的行。 STF
    <tt> 定义打字机文本。 STF
    <u> 不赞成使用。定义下划线文本。 TF
    <ul> 定义无序列表。 STF
    <var> 定义文本的变量部分。 STF
    <xmp> 不赞成使用。定义预格式文本。  

    查看(323) 评论(0) 收藏 分享 管理

  • HTML学习

    2010-01-29 14:05:03

    p  段落 paragraph[pærəɡrɑ:f]

    div 层

    a 链接标签

    ul 列表

    li 列表内容

    tr 表格行

    td 表格列

    table 表格

    <br>换行            <!--This is a comment-->注释

    基本的 HTML 标签

    标签 描述
    <html> 定义 HTML 文档。
    <body> 定义文档的主体。
    <h1> to <h6> 定义标题 1 至标题 6。
    <p> 定义段落。
    <br> 插入折行。
    <hr> 定义水平线。
    <!--> 定义注释。

    如何查看 HTML 源码

    您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？

    你有没有看过一些网页，并且想知道它是如何做出来的呢？

    要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的 HTML 代码。

    文本格式化标签

    标签 描述
    <b> 定义粗体文本。
    <big> 定义大号字。
    <em> 定义着重文字。
    <i> 定义斜体字。
    <small> 定义小号字。
    <strong> 定义加重语气。
    <sub> 定义下标字。
    <sup> 定义上标字。
    <ins> 定义插入字。
    <del> 定义删除字。
    <s> 不赞成使用。使用 <del> 代替。
    <strike> 不赞成使用。使用 <del> 代替。
    <u> 不赞成使用。使用样式（style）代替。

    “计算机输出”标签

    标签 描述
    <code> 定义计算机代码。
    <kbd> 定义键盘码。
    <samp> 定义计算机代码样本。
    <tt> 定义打字机代码。
    <var> 定义变量。
    <pre> 定义预格式文本。
    <listing> 不赞成使用。使用 <pre> 代替。
    <plaintext> 不赞成使用。使用 <pre> 代替。
    <xmp> 不赞成使用。使用 <pre> 代替。

    引用、引用和术语定义

    标签 描述
    <abbr> 定义缩写。
    <acronym> 定义首字母缩写。
    <address> 定义地址。
    <bdo> 定义文字方向。
    <blockquote> 定义长的引用。
    <q> 定义短的引用语。
    <cite> 定义引用、引证。
    <dfn> 定义一个定义项目。

    通常情况下，HTML 会裁掉文档中的空格。假如你在文档中连续输入 10 个空格，那么 HTML 会去掉其中的9个。如果使用 &nbsp;，就可以在文档中增加空格。

    最常用的字符实体

    显示结果 描述 实体名称 实体编号
      空格 &nbsp; &#160;
    < 小于号 &lt; &#60;
    > 大于号 &gt; &#62;
    & 和号 &amp; &#38;
    " 引号 &quot; &#34;
    ' 撇号  &apos; (IE不支持) &#39;

    其他一些常用的字符实体

    显示结果 描述 实体名称 实体编号
    ￠ 分 &cent; &#162;
    £ 镑 &pound; &#163;
    ¥ 日圆 &yen; &#165;
    § 节 &sect; &#167;
    © 版权 &copy; &#169;
    ® 注册商标 &reg; &#174;
    × 乘号 &times; &#215;
    ÷ 除号 &divide; &#247;

    锚标签和 Href 属性

    HTML 使用 <a> （锚）标签来创建连接另一个文档的链接。

    锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。

    创建锚的语法：

    <a href="url">Text to be displayed</a>

    <a> 用来创建锚。href 属性用于定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。

    这个锚定义了指向 w3school 的链接：

    <a href="http://www.w3school.com.cn/">Visit W3School!</a>

    上面的这行在浏览器中显示为这样：Visit W3School!

    Target 属性

    使用 Target 属性，你可以定义被链接的文档在何处显示。

    下面的这行会在新窗口打开文档：

    <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

    锚标签和 Name 属性

    Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。

    以下是命名锚的语法：

    <a name="label">Text to be displayed</a>

    name 属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。

    下面这行定义了命名锚：

    <a name="tips">Useful Tips Section</a>

    你会注意到，命名锚会以特殊的方式来显示。

    将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节，就像这样：

    <a href="http://www.w3school.com.cn/html/html_links.asp#tips">
Jump to the Useful Tips Section
</a>
    框架
    通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
    使用框架的坏处：
    • 开发人员必须同时跟踪更多的HTML文档 
    • 很难打印整张页面 
    框架结构标签（<frameset>） 
    • 框架结构标签（<frameset>）定义如何将窗口分割为框架 
    • 每个 frameset 定义了一系列行或列 
    • rows/columns 的值规定了每行或每列占据屏幕的面积 
    编者注：frameset 标签也被某些文章和书籍译为框架集。
    框架标签（Frame）
    Frame. 标签定义了放置在每个框架中的 HTML 文档。
    在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：
    <frameset cols="25%,75%">
   <frame. src="frame_a.htm">
   <frame. src="frame_b.htm">
</frameset>
    基本的注意事项 - 有用的提示：
    假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
    为不支持框架的浏览器添加 <noframes> 标签。
    重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

    查看(1062) 评论(0) 收藏 分享 管理

Open Toolbar