首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 平面设计 > 图形图像 >

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

2012-07-31 
JavaScript/HTML—FORM用户输入/提交数据的图形界面1.表单form actionhttp://127.0.0.1:3344/? method

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

??????????????? *错误分开显示,错误的地方明显

??????????????? *能早捕获的早捕获。

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

??????????????? *

?

?

热点排行