html中关于form与表单提交操作的资料集合

快乐美好 · 发表于 2024-4-20 10:31:01

这里我们介绍一下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)
{
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事件。
参考：
form元素与表单提交

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

执笔画浮尘 · 发表于 2024-4-21 22:31:26

我完全同意你的观点

IT之家 · 发表于 2024-4-22 15:36:14

确实牛逼

豹子头零充 · 发表于 2024-5-1 20:03:34

感谢分享，受益匪浅！

小明1987 · 发表于 2024-5-12 23:11:06

保持尊重和礼貌对待其他成员是必要的。

键盘侠 · 发表于 2024-5-16 09:23:40

保持尊重和礼貌对待其他成员是必要的。

小鸣电脑 · 发表于 2024-5-16 20:41:45

我不确定这个信息的准确性，请再确认一下

小鸣电脑 · 发表于 2024-5-17 00:44:05

6666666666

BULE-SKY · 发表于 2024-5-23 15:56:28

让我们一起努力

邓桑旦 · 发表于 2024-6-11 18:38:45

同意你的观点，我们有共鸣。

		自动登录	找回密码
密码			立即注册

html中关于form与表单提交操作的资料集合

本帖子中包含更多资源