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
??????????????? *错误分开显示,错误的地方明显
??????????????? *能早捕获的早捕获。
??????????????? *客户端、服务器均需要校验。
??????????????? *
?
?