thymeleaf中input跳转传值

在Thymeleaf模板引擎中，当一个`<input>`元素需要触发页面跳转并且传递值时，通常会配合JavaScript或者Thymeleaf的内置功能如`th:field`和`form`标签一起使用。

例如，假设有一个表单，你想让用户输入用户名并提交到另一个页面：

<form th:action="@{/submit}" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"
           th:field="*{username}"/>
    <button type="submit">提交</button>
</form>

在这个例子中，`th:field`属性会自动绑定表单字段到模型对象（在这里假设是`User`类的一个属性`username`）。当用户点击提交按钮，表单数据会被发送到`/submit`地址，并附带POST请求。

如果你想在JavaScript中手动处理，可以这样设置：

document.getElementById('submit-button').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认提交行为
    const username = document.getElementById('username').value;
    // 使用Ajax或其他方式将username传递给服务器
    window.location.href = '/submit?username=' + encodeURIComponent(username);
});

这里的`encodeURIComponent()`用于确保用户名作为查询字符串参数安全地传输。