<label class="layui-icon layui-icon-username" for="userName"></label> <input type="text" name="userName" lay-verify="required|account" placeholder="用户名" autocomplete="off" class="layui-input" value=""> </div>
时间: 2023-07-19 13:53:21 浏览: 82
layui使用label标签的方法
这是一个表单中的一个输入框和一个标签元素,它们的组合可以用于接收用户输入的用户名。
- `<label>` 元素用于创建一个标签,它通常与表单控件相关联,用于标识表单控件的用途或说明。在上面的代码中,`<label>` 元素的 `class` 属性指定了两个样式类 `layui-icon layui-icon-username`,这是 layui 框架提供的样式类,用于显示一个带有用户名图标的标签。`for` 属性指定了该标签所关联的表单控件的 `id` 属性,这里是 `userName`,这意味着当用户点击标签时,表单控件会自动获取焦点。
- `<input>` 元素是一个表单输入控件,它的 `type` 属性设置为 `text`,表示这是一个文本输入框。`name` 属性指定了表单控件的名称,这里是 `userName`,用于在表单数据中标识该字段。`lay-verify` 属性指定了该表单控件要进行的校验规则,这里是 `required|account`,表示该表单控件必须填写,并且只能输入字母、数字、下划线和减号。`placeholder` 属性指定了在文本框为空时,要显示的提示文本。`autocomplete` 属性指定了是否启用自动完成功能,这里设置为 `off`,表示不启用。`class` 属性指定了样式类 `layui-input`,这是 layui 框架提供的样式类,用于美化文本输入框。`value` 属性指定了文本框的默认值,这里为空。
阅读全文