学习日记

http://bbs.chinajavaworld.com，尤其是他们的banner，很喜欢。

转自：http://www.dvbbs.net/tech/js/2006041949627.asp

 JavaScript精简学习4：表单

作者： 来源：

阅读 156 人次 , 2006-4-19 16:47:00

43 表单构成

1: <form method=”post” action=”target.html” name=”thisForm”>

2: <input type=”text” name=”myText”>

3: <select name=”mySelect”>

4: <option value=”1”>First Choice</option>

5: <option value=”2”>Second Choice</option>

6: </select>

7: <br>

8: <input type=”submit” value=”Submit Me”>

9: </form>

44 访问表单中的文本框内容

1: <form name=”myForm”>

2: <input type=”text” name=”myText”>

3: </form>

4: <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>

45 动态复制文本框内容

1: <form name=”myForm”>

2: Enter some Text: <input type=”text” name=”myText”><br>

3: Copy Text: <input type=”text” name=”copyText”>

4: </form>

5: <a href=”#” onClick=”document.myForm.copyText.value =

6: document.myForm.myText.value;”>Copy Text Field</a>

46 侦测文本框的变化

1: <form name=”myForm”>

2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>

3: </form>

47 访问选中的Select

1: <form name=”myForm”>

2: <select name=”mySelect”>

3: <option value=”First Choice”>1</option>

4: <option value=”Second Choice”>2</option>

5: <option value=”Third Choice”>3</option>

6: </select>

7: </form>

8: <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>

48 动态增加Select项

1: <form name=”myForm”>

2: <select name=”mySelect”>

3: <option value=”First Choice”>1</option>

4: <option value=”Second Choice”>2</option>

5: </select>

6: </form>

7: <script language=”JavaScript”>

8: document.myForm.mySelect.length++;

9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;

10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;

11: </script>

49 验证表单字段

1: <script language=”JavaScript”>

2: function checkField(field) {

3: if (field.value == “”) {

4: window.alert(“You must enter a value in the field”);

5: field.focus();

6: }

7: }

8: </script>

9: <form name=”myForm” action=”target.html”>

10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>

11: <br><input type=”submit”>

12: </form>

50 验证Select项

1: function checkList(selection) {

2: if (selection.length == 0) {

3: window.alert(“You must make a selection from the list.”);

4: return false;

5: }

6: return true;

7: }

51 动态改变表单的action

1: <form name=”myForm” action=”login.html”>

2: Username: <input type=”text” name=”username”><br>

3: Password: <input type=”password” name=”password”><br>

4: <input type=”button” value=”Login” onClick=”this.form.submit();”>

5: <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>

6: <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>

7: </form>

52 使用图像按钮

1: <form name=”myForm” action=”login.html”>

2: Username: <input type=”text” name=”username”><br>

3: Password: <input type=”password”name=”password”><br>

4: <input type=”image” src=”login.gif” value=”Login”>

5: </form>

6:

53 表单数据的加密

1: <SCRIPT LANGUAGE='JavaScript'>

2: <!--

3: function encrypt(item) {

4: var newItem = '';

5: for (i=0; i < item.length; i++) {

6: newItem += item.charCodeAt(i) + '.';

7: }

8: return newItem;

9: }

10: function encryptForm(myForm) {

11: for (i=0; i < myForm.elements.length; i++) {

12: myForm.elements.value = encrypt(myForm.elements.value);

13: }

14: }

15:

16: //-->

17: </SCRIPT>

18: <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>

19: Enter Some Text: <input type=text name=myField><input type=submit>

20: </form>

上面的encryptForm方法把表单中的数据转换为编码，在提交表单之前完成了简单的表单数据加密～

有两个主题：

一是接收数据：The JavaScript prompt - Getting user input；

二是验证数据：Create JavaScript Input Text Validation Fields

以"javascript""input"为关健字在google中搜索到这个方法如下：

http://www.webdevelopersnotes.com/tutorials/javascript/javascript_prompt_visitor_inputs.php3

如这是测试页面：

在javascript进行数据有效性的验证：

http://www.codeave.com/javascript/code.asp?u_log=100

示例代码：

转自：http://www.blogjava.net/weidy/archive/2006/06/01/49766.html，标题有改变。

  用了四五年的Table排版，没觉得有什么不好，这一段时间迷上了Dojo,才发现如今已经到了不用DIV不行的年代。还是赶紧跟上潮流，把Table换成DIV吧! 改了几个页面，发现比想象的简单，更是尝到了用div的甜头。share自己一点浅浅的经验：

1. 先上网搜一下找点前人经验。推荐两篇好文：

  http://www.glish.com/css/                         "CSS Layout Techniques: for Fun and Profit"

  http://www.alistapart.com/articles/practicalcss   "Practical CSS Layout Tips, Tricks, & Techniques"   

2. 随便找几个用DIV+CSS实现，结构又比较简单的网站，研究一下它的页面结构和CSS。比如我就是主要看了下面几个网站：

      CSS禅花园          http://csszengarden.com/      

      Eclipse.org        http://www.eclipse.org/

      mozilla.com        http://www.mozilla.com/

作为世界上CSS高手比武的擂台，CSS禅花园的模板实在多的恐怖，以前都只站在欣赏的角度不觉得，自己研究起来，也就只能是挑了一两个看看，再感慨了一番作者真是好创意好美工。有趣的是Eclipse.org的首页居然基本用的都是mozilla.com的CSS，对比着这两个网站看更能看出端倪。

3.  自己上手干吧，让你的页面内容和显示样式彻底分离，其实并不难。