为具有非统一 JS/HTML5 支持的客户创建逐步增强的表单提交体验

Question

我是一名 Web 开发人员，需要有关启用 progressive enhancement 的帮助。

背景： 我正在处理一个网络应用程序，其中许多用户来自剥离 JS 的正向代理。

此外，一些用户还使用不支持 HTML5 的浏览器，或者不支持运行 JS 的浏览器（例如 Opera Mini）。

总体而言，HTML5 对于此用户群的覆盖范围比 JS 更大。

当前场景： 目前，此应用程序不使用 JS 或 HTML5。表单提交会导致整页刷新。典型的表格如下所示：

<form action="{% url 'submit_comment' %}" method="POST">
    {% csrf_token %}
    {{ my_form.comment }}
    <button type="submit">OK</button>
</form>

忽略 {{ }} 命名法。这是 Django 语法，仅用于呈现 - 在本例中 - 用户可以在其中写评论的文本字段。

问题：对于可以支持JS或HTML5的客户端，如何逐步提升表单提交体验？

例如，此应用程序有一个部分供用户发表评论供其他人阅读。目前，他们按下 'reply' 按钮并被重定向到一个新页面。这种按钮的代码很简单：

<form action="{% url 'response_page' %}" method="POST">
    {% csrf_token %}
    <input type="hidden" name="comment_id" value="{{ comment_id }}">
    <button type="submit">reply</button>
</form>

现在我需要执行以下操作：

1) 如果客户端支持 JS/HTML5，DOM 会发生变化，并且绑定到 form 的文本字段会出现在按钮的正下方。没有刷新发生。

2) 如果客户端不支持JS/HTML5，用户将像以前一样被重定向到一个新页面。

如何以一种不会对不受支持的用户造成任何破坏并且尽可能轻量级的方式进行编程？每页有很多 'reply' 个按钮堆叠在一起，因此性能也很关键。

我希望有确定的模式来处理这种事情。作为网络开发人员，我不知道这些。最好能得到一个说明性的答案。

注意：我更喜欢在 HTML5 中执行此操作，但也对 JS 解决方案开放 - 我更喜欢普通的 vanilla JS 而不是任何更高级的东西。

Answer 1

这是一个非常基本的答案，它会在 javascript 可用时阻止表单提交，并按照上面的建议添加所需的输入。

window.onload = function(){
  var input = document.createElement("input");
  input.type ='text';
  input.name = "comment";
  input.style.display = 'block';
  document.getElementById('myForm').appendChild(input);
  document.getElementById("submit").addEventListener("click", function(event){
    event.preventDefault();
  });
}

<form action="http://example.com" method="POST" aria-live="polite" id="myForm">
  <input type="hidden" name="comment_id" value="">
  <button id="submit" type="submit">reply</button>
</form>

为具有非统一 JS/HTML5 支持的客户创建逐步增强的表单提交体验

Creating a progressively enhanced form submission experience for clients with non-uniform JS/HTML5 support

javascript

html

progressive-enhancement

opera-mini