html中form表单的作用 html中form表单的提交方式

说白了，HTML表单就是网页上数据的检索。
用户填写信息后，将直接发送到服务器。

我们先来说说最重要的事情。
表单的核心由两个主要控件组成：输入框和按钮。
我们去年做的电商项目中，单是检查电话号码格式就占了表单中用户填写收货地址逻辑的一半。
还有一点就是表单的action和method属性要结合起来，比如/api/user加POST，直接告诉服务器需要创建一个新用户。
还有另一个关键细节。
必须包含名称属性。
去年，一个新人写了一些代码，直接使用$_GET['nickname']来获取用户输入的昵称。
结果用户输入“admin”OR“1 ”=“1 ”，直接导致数据库崩溃。
用行话来说，这称为雪崩效应。
事实上，前面的一个小小的延迟导致后面的一切都倒塌了。

一开始我以为表格里只有两个表格，后来发现错了。
GET 和 POST 的内存使用量有很大不同。
例如，对于3 000级搜索查询，GET将参数直接插入到URL中，服务器必须先解析它，然后再执行逻辑。
POST将数据包分成几块并分组，服务器更容易读取和处理它们。

等等，还有一件事，不要忘记提交表单后的服务器端验证。
有一个客户端项目，用户使用特殊字符作为密码，但前端没有检查它。
结果SQL直接崩溃了。
说实话，这很令人沮丧。

每次编写表单时，最好问自己：数据是否敏感？数量重要吗？后端界面需要什么姿势？

html5表单域是什么意思

说实话，刚开始做前端的时候，HTML5 表单域确实让我头疼了一段时间。
别告诉我，光看定义还算清楚，但是到了手写代码的时候，不同的属性和控件就让人眼花缭乱了。

我们以action属性为例。
给我印象最深的是当我写一个注册表时，最初把action写成action="/register"。
结果，用户提交数据后，页面直接跳转到注册成功页面，后台根本没有收到数据。
后来才知道，action是提交数据的URL，而不是访问页面的URL。
这件事让我认识到，写表格的时候一定要遵循流程，否则很容易出问题。
method 属性
更有趣。
起初我总是在 get 和 post 之间左右为难，认为 get 比 post 慢，但事实并非如此。
有一次我写了一个搜索框，使用了get方法，我发现用户每次输入的时候，都会看到URL上的参数，看起来很复杂。
后来我转向出版业，它变得更加令我满意。
但请注意，对于密码等敏感信息，宜使用post。

我用过一次form属性，非常方便。
当时我做了一个很长的页面，表单在底部，提交按钮在顶部。
如果表单属性未关联，则用户在单击“提交”时将必须返回。
后来我添加了form="myForm"，问题立即解决。
这给我的感觉是，HTML5 的设计确实非常周到，不需要编写JavaScript就可以实现这种交互。

我对formernctype印象不是很深刻，但我经常使用list属性。
以前写搜索字段的时候，一直想有一个自动补全的功能，后来发现datalist结合list属性就完美了。
用户只需输入几个单词，后端就会为他们提供匹配选项，直接将体验提升到一个新的水平。

在表单控件类型方面，我特别记得密码和文件的区别。
密码直接用星号显示输入内容，文件必须专门写type="file"才能弹出下载窗口。
就像不同的武术流派，各有不同的用法。

总的来说，表单域虽然看似简单，但其中蕴含的技巧却不少。
关键是要理解每个属性的真正作用，而不是仅仅从字面上理解。
就像动作不是跳转URL一样，方法也不是简单的速度问题，表单也不是物理包装控件。
一旦了解了这些细节，你就不会急于写表格了。