layui输入框带按钮
时间: 2023-09-11 10:09:01 浏览: 114
layui2.1.6.7z
你可以使用 layui 的 form 模块来实现带按钮的输入框。以下是一个简单的示例代码:
```html
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" name="input" placeholder="请输入内容" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<button type="button" class="layui-btn">搜索</button>
</div>
</div>
```
解释一下这段代码:
- `layui-form-item` 是一个 form 表单项的类名,表示这个元素是一个表单项。
- `layui-input-inline` 表示这个元素是一个行内元素,用于和其它行内元素放在同一行。
- `<input>` 元素是一个输入框,`type="text"` 表示这是一个文本输入框,`name="input"` 表示这个输入框的名称为 "input",`placeholder="请输入内容"` 表示在输入框中没有输入时显示的提示文本,`autocomplete="off"` 表示关闭自动完成功能,`class="layui-input"` 表示这个输入框使用 layui 的样式。
- `<button>` 元素是一个按钮,`type="button"` 表示这是一个普通按钮,`class="layui-btn"` 表示这个按钮使用 layui 的样式。
你可以根据自己的需要修改这段代码,比如更改按钮的样式、修改输入框的名称等。
阅读全文