JavaScript/HTML—FORM用户输入/提交数据的图形界面

1.表单

<form action="http://127.0.0.1:3344/"  method="get">
  用户帐号：  <input type="text" name="account"  value="abc"/>
  日    期：  从<input type="text" name="start" value="2010-1-1"/>  
             到 <input type="text" name="end" value="2010-12-1"/>
  <input type="submit">
 </form>

action=协议+ip(服务器)+端口

http协议就表示将form中控件的name和vaue值组成键值传递。HTTP协议底层使用的是Socket

 

 

method 

get：  显示   内容与ip绑定       应用：超链接、

post：保密   内容与ip分离       应用：保密、数据量大、登录、修改数据库；

调查报告get、post均可。

 

 2.JavaScript中如何获得表单

     2.1.document.getElementById("formId")；——DOM

     2.2.document.forms[formId/formName];——DOM/BOM

     2.3.document.formName;

 

     2.4.获得表单元素——form.elements[elementId/elementName]

 

 3.表单元素

      3.1:通用的属性、方法、事件

                *属性——disabled、form【得到字段所在表单】

                *方法——blur()、focus()

                *事件——blur、focus【例：blur()方法—>事件blur—>onblur】

 表单字段需要名称。所以所有的表单元素中都需要增加名称属性name

 <input  type="text(文本)|password(密码)|radio(单选)|checkbox(复选)checked、name|button(按钮)|image(图标按钮)value=submit|reset|submit(提交表单)|reset(重置)|file(文件上传enctype=“form/multipart”)|hidden（隐藏字段)" 

      3.2:text/<textarea>

               3.2.1：属性——value(length)、

               3.2.2:选择文本——focus（）+select（）

               3.2.3：事件——blur、focus、change【非value属性方法改变文本+失去焦点】、select。

<textarea  rows="" cols=""  ></textarea> 

      3.3:password

      3.4:select

              3.4.1：属性——selectedIndex(无选中为-1)、multiple、selected、

              3.4.2：选择选项——options(text/value/index/length)；getAttribute("value")——值；

              3.4.3：选项的更替——删除【BOM:option[i]=null—DOM:remove(i)】、增加、水平移动、垂直移动

 <select><option value=""> 显示文字<option>

          .multiple——设置多选

          .

          .

        <option value="" selected="selected"> 显示文字<option>

</select> 

 

      3.5：radio(单选)|checkbox(复选)checked、name

              3.5.1：属性、方法——checked、defaultChecked、click()，

              3.5.2：

              3.5.3：事件

      3.

      3.表单提交——button(按钮)|image(图标按钮)|submit(提交表单)|reset(重置)

               3. .1：submit

               3. .2：image

               3. .3：按钮调用submit()

               3. .

 

 

 

 

 

4.表单事件

 

5.表单验证——在表单内容提交前进行验证；可以降低服务器压力，用户等待时间。

     5.1：错误发生前keypress

     5.2：错误发生时change

     5.3：错误发生后submit

     5.4：表单校验标准

                *以对用户有帮助的方式与用户交互

                *尽量少用JavaScript

                *错误分开显示，错误的地方明显

                *能早捕获的早捕获。

                *客户端、服务器均需要校验。

                *