form

## placeholder/title

输入框的规范的提示属性，没有提供 placeholder 的情况下需要传入 title

如果输入框 input#id 有对应的 label[for=id]，则只需要至少其中之一传入 title 

input(title='username')

input#uname
label(for='uname' title='username') 用户名

另外 没有内容文字的按钮和超链接也需要添加 title

## :focus-visible 

outline 2px solid transparent // 覆盖暗黑模式情况下白色优先
&:focus-visible
    outline-color: rgb(var(--black))

使用键盘获取焦点时应该实现这个样式。默认是黑白。

使用全局css变量 --outline-color-*:focus 可以覆盖这个颜色RGB值

input[data-primary] 等元件预设了 --outline-color-*:focus 主题色覆盖黑白。

## wrapper

把 input 放在 .na-input-wrapper 这个容器中可以用来显示前缀后缀

该容器启用 .na-input-wrapper[data-primary] 也会覆盖全局css变量 --outline-color-*:focus 和继承某些样式

直接使用局部变量 --color-input*-wrapper 也可以设置主题以及焦点时颜色RGB值，优先级低于 --color-input。 其中的星号 * 意味着这是一个广义的 input，也能作用于 select、textarea 

label.na-form-item
    span(style="white-space:nowrap") 单号
    .na-input-wrapper(data-primary)
        input.na-input(title='单号' value='114514')
label.na-form-item
    span(style="white-space:nowrap") 流水号
    .na-input-wrapper
        input.na-input(title='流水号' value='1919810' style={
            '--color-input': 'var(--yellow-5)'
        })

注意，使用 * 可能需要转义：

## form-item

卡号必填
类型
卡类型必填 
form#formitems-kanban(onsubmit=function(){console.log(this.elements);return false})
    .na-form-item
        label(for="keywords") 卡号
        .na-input-wrapper(data-validate)
            input#keywords.na-input(
                name="keywords"
                type="search"
                class="na-input"
                placeholder="请输入卡号"
                required
            )
            span.na-form-item-message(data-primary="danger") 卡号必填
    .na-form-item
        span 类型
        .na-input-wrapper(data-validate)
            each item in [
                { label: "银联", value: "UnionPay" },
                { label: "万事达", value: "MasterCard" },
                { label: "美国运通", value: "AmericanExpress" },
            ]
                span.na-radio
                    input.na-input(
                        id=item.value
                        type="radio"
                        name="type"
                        title=item.label
                        value=item.value
                        required
                    )
                    label.na-radio-label(for=item.value)= item.label
            span.na-form-item-message(data-primary="danger") 类型必填
    input.na-button(type="reset" value="重置")
    input.na-button(type="submit" value="查找" data-primary)

[data-validate] 使用 :invalid 來自定义校验样式，你也可以使用如 vue 等响应式库来控制