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