html中关于form与表单提交操作的资料集合
这⾥我们介绍⼀下form元素与表单提交⽅⾯的知识。
form元素
form元素的DOM接⼝是HTMLFormElement,继承⾃HTMLElement,因⽽它与其他的HTML元素拥有相同的默认属性,不过它⾃⾝还有⼏个独有的属性和⽅法:
属性值说明
accept-
charset服务器能够处理的字符集,多个字符集⽤空格分割
action接受请求的URL,该值可以被form元素中的input或button元素的formaction属性覆盖
elements表单中所有控件集合(HTMLCollection)
enctype请求的编码类型,该值可以被form元素中的input或button元素的formenctype属性覆盖
length表单中控件的数量
method要发送的HTTP请求类型,通常是“get”或“post”,该值可以被form元素中的input或button元素的formmethod属性覆盖
name表单的名称
reset()将所有表单域重置为默认值
submit()提交表单
target⽤于发送请求和接收响应的窗⼝名称,该值可以被form元素中的input或button元素的formtarget属性覆盖autocomplete是否⾃动补全表单元素
input元素
input元素是应⽤⾮常⼴泛的表单元素,根据type属性值的不同,有以下⼏种常⽤⽤法:
⽂本输⼊ <input type="text" name="">
提交输⼊ <input type="submit">
单选钮输⼊ <input type="radio" name="必须有相同的名字" value="填的值最好对应">
复选框输⼊ <input type="checkbox" name="相同的名字" value="不同的对应值">
数字输⼊ <input type="number" min="" max=""> 输⼊框只能输⼊数字,可设置最⼤值,最⼩值。
范围输⼊ <input type="range" min="" max="">类似number,但它会显⽰⼀个滑动条,⽽不是输⼊框。
颜⾊输⼊<input type="color">会弹出⼀个颜⾊选择器。
⽇期输⼊<input type="date"> 会弹出⼀个⽇期选择器。
email输⼊ <input type="email">显⽰为⼀个⽂本输⼊框,并会弹出⼀个定制键盘。
tel输⼊<input type="tel"> 跟email输⼊类似
url输⼊ <input type="url"> 跟email输⼊类似,也会弹出⼀个定制键盘。
textarea元素可以创建⼀个多⾏的⽂本区。
<textarea name="" id="" cols="30" rows="10"></textarea>
其中cols和row的属性值分别表⽰⽂本区宽度和⾼度的字符。
select元素和option元素结合使⽤可创建⼀个下拉菜单。
<select name="" id=""> <option value=""></option> <option value=""></option> <option value=""></option> </select> radio
如何分组? 设置不同的 name属性即可
例:
<input type="radio" name="favourite" value="玩游戏">玩游戏
<input type="radio" name="favourite" value="写代码">写代码
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">⼥、
这就是两组radio
placeholder
提供可描述输⼊字段预期值的提⽰信息(hint)。
该提⽰会在输⼊字段为空时显⽰,并会在字段获得焦点时消失。
type=hidden
定义隐藏的input。隐藏字段对于⽤户是不可见的。隐藏字段通常会存储⼀个默认值,它们的值也可以由 JavaScript 进⾏修改。
⽐如⽤于安全⽅⾯,给后台传输⽤户不可见的name 和value值,让后台做校验,防伪造页⾯。
提交按钮
在form中加⼊⼀个提交按钮,便可使⽤户得以提交表单。
下列三种按钮皆可在点击时触发表单的submit事件:
<input type="submit" />
<button type="submit"></button>
<input type="image" />
规范中button元素的type默认值是submit,但是在IE678下默认值是button,所以从兼容性考虑有必要为button元素⼿动加上type="submit"属性。
submit事件
初⼼者可能会认为表单提交是提交按钮的click事件触发,其实不然,按钮元素的click事件与表单的submit事件在不同的浏览器中执⾏顺序不⼀,所以为了能准确控制表单提交事件,我们会选择在表单的submit事件中执⾏验证等操作。
form.addEventListener('submit', function (e) {
if (valid()) {
...
}
e.preventDefault()
})
当form元素中没有上述的三个按钮中任何⼀个的时候,⽤户将⽆法提交表单(回车键也⽆效),此时可以利⽤form元素特有
的submit()⽅法执⾏提交表单,需要注意的是调⽤submit()⽅法并不会触发form元素的submit事件,表单的验证等操作应该在调⽤submit()⽅法之前。
if (valid()) {
form.submit()
}
表单提交与⽤户体验
基于现在流⾏的ajax+跨域POST(CORS)技术,我们很可能不使⽤form元素直接向服务器提交数据。这虽然可⾏,但在⼤多数情况下存在着体验劣化现象。
JavaScript 表单验证
JavaScript 可⽤来在数据被送往服务器前对 HTML 表单中的这些输⼊数据进⾏验证。
被 JavaScript 验证的这些典型的表单数据有:
⽤户是否已填写表单中的必填项⽬?
⽤户输⼊的邮件地址是否合法?
⽤户是否已输⼊合法的⽇期?
⽤户是否在数据域 (numeric field) 中输⼊了⽂本?
必填(或必选)项⽬
下⾯的函数⽤来检查⽤户是否已填写表单中的必填(或必选)项⽬。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):
function validate_required(field,alerttxt)
{
html中提交表单用什么属性with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
下⾯是连同 HTML 表单的代码:
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
E-mail 验证
下⾯的函数检查输⼊的数据是否符合电⼦邮件地址的基本语法。
意思就是说,输⼊的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的⾸字符,并且 @ 之后需有⾄少⼀个点号:
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
下⾯是连同 HTML 表单的完整代码:
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
快捷键提交
在没有form元素包裹的情况下,即使当前页⾯的焦点在表单元素上,按回车键也不会触发表单提交,对于⽤户⽽⾔,需要从键盘控制切换到⿏标/⼿势控制,破坏了原有的流畅度。解决⽅法最简单的就是在外层⽤⼀个form元素包裹,并且确定form元素中起码有⼀个提交按钮。此时当表单中的输⼊域得到焦点时,⽤户按回车键便会触发提交。
浏览器记住账号密码
在提交表单时,⾼级浏览器包括移动端浏览器,会询问⽤户是否需要记住⽤户账号密码,对于⼀般⽤户⽽⾔,这是⼀个⼗分有⽤的特性,特别是在移动端,可以为⽤户节省很多时间。在没有form元素的情况下,浏览器不会弹出该询问窗⼝。
总结
我们在开发⼀个表单应⽤的时候,不应该尝试去除form元素直接进⾏提交,在form元素中应该包含⼀个提交按钮,如果是button元素,应该⼿动加上type="submit"属性。提交事件的处理在form元素的submit事件中,⽽⾮提交按钮的click事件。
参考:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论