SMUI + SvelteKit表单提交时Textfield值始终为null的问题

刚上手SMUI和SvelteKit，在登录表单里使用Textfield组件时，提交后无法获取输入值。

原始表单代码：

<form method="post">
    <Textfield variant="outlined" bind:value={username} label="Username"></Textfield>    
    <Textfield type="password" variant="outlined" bind:value={password} label="Password">
    <Button type="submit">Login</Button>
</form>

对应的页面处理代码：

export const actions = {
    default: async ({ cookies, request }) => {
        const data = await request.formData()
        const username = data.get('username')
        const password = data.get('password')
    }
}

提交后username和password均为null。添加隐藏字段可正常获取值，但没必要；尝试给Textfield添加name属性仍无效，请问哪里操作有误？

• SMUI的Textfield组件不会自动将内部原生input与表单绑定，直接在Textfield上添加name属性不生效，需通过input$name语法将属性传递给组件内部的input元素：

  <Textfield variant="outlined" bind:value={username} label="Username" input$name="username"></Textfield>    
  <Textfield type="password" variant="outlined" bind:value={password} label="Password" input$name="password"></Textfield>
  

• 原理是SMUI组件通过$语法传递属性给内部原生元素，input$name会把name属性绑定到Textfield内部的input标签上，这样表单提交时就能正确收集对应字段的值，无需额外添加隐藏字段。

内容的提问来源于stack exchange，提问作者user20232084