HTMX - 增强

HTMX 增强是一种通过使用 hx-boost 属性来增强 HTML 锚点 和 表单 的方法。增强将所有锚点标签和表单转换为 AJAX 请求，并以页面主体为目标。

HTMX 增强示例

在此示例中，锚点标签将触发对 /content 的 AJAX GET 请求，并将其交换到主体标签中。

<div hx-boost="true">
   <a href="/content">Content</a>
</div>

增强渐进式增强

在渐进式增强中，即使未启用 JavaScript，所有链接和表单仍会继续工作，而无需使用 Ajax 请求。它还允许更多受众使用您网站的功能。其他 htmx 模式也可以进行调整以实现渐进式增强。

在此代码中，它不会优雅地降级。如果用户保持 JavaScript 禁用，搜索功能将不起作用。如果您可以将 htmx-enhanced 输入包装在表单元素中。如果未启用 JavaScript，用户仍然可以搜索。您可以添加搜索按钮并使用镜像 action 属性的 hx-post 更新表单，或者您可以使用 hx-boost 属性。

<form action="/search" method="POST">
   <input class="form-control" type="search"
 name="search" placeholder="Search your course.."
 hx-post="/search"
 hx-trigger="keyup changed delay:500ms, search"
 hx-target="#search-results"
 hx-indicator=".htmx-indicator">
</form>

可访问性

通过 hx-boost 属性使用渐进式增强功能将使您的应用程序更易于广泛用户访问。基于 htmx 的应用程序更简单，因为 htmx 是面向 HTML 的。

可访问性建议

• 通过更好的排版最大限度地提高应用程序的可读性。
• 尽可能多地使用 HTML 语义元素。
• 在所有表单输入字段上使用文本标签。
• 确保焦点状态可见。