Layui实现input输入和选择的方法

1. Layui简介

Layui是一款开源的前端UI框架，由一套完善、易用的组件、插件和模板构成，帮助开发者快速搭建出整洁美观、交互动感的网页界面。Layui自身非常轻量，整个框架压缩后仅有100KB左右，可大幅度降低页面的加载时间和流量消耗。

2. 使用Layui实现input输入

input是前端常用的一个组件，可以用来实现各种输入框，例如文字输入、数字输入、日期选择等等。在Layui中，可以使用<input>标签以及Layui特有的class名来实现各种自定义的输入框。

2.1 实现普通的文字输入框

使用Layui的文本框组件，可以实现一个简单的文字输入框。在HTML中，我们可以这样写：

<div class="layui-form-item">

  <label class="layui-form-label">用户名</label>
  <div class="layui-input-inline">
    <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
  </div>
</div>

其中class="layui-form-item"是用来定义表单元素的，class="layui-form-label"是用来定义标签的，class="layui-input-inline"是用来定义输入框的位置的，class="layui-input"是用来定义输入框的样式的。

在这个例子中，我们定义了一个输入框，用来输入用户名，输入框的placeholder属性是用来设置一个默认提示文字的。同时，我们还使用了Layui的验证功能，用lay-verify属性来定义该输入框需要进行验证，required表示该输入框不能为空。

2.2 实现数字输入框

数字输入框也是前端开发中常见的一种输入框类型，它可以限制用户只能输入数字。在Layui中，我们可以使用input标签的type="number"属性来实现数字输入框。下面是一个简单的数字输入框示例：

<div class="layui-form-item">

  <label class="layui-form-label">年龄</label>
  <div class="layui-input-inline">
    <input type="number" name="age" min="0" max="100" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
  </div>
</div>

在这个例子中，我们定义了一个数字输入框，用来输入年龄，同时设置了数字的最小值和最大值，这样用户就不能输入不合法的数字了。

3. 使用Layui实现选择框

除了输入框，选择框也是前端开发中非常常见的一种组件，例如单选框、复选框、下拉框等。在Layui中，我们可以使用不同的组件和class名来实现各种自定义的选择框。

3.1 实现单选框

Layui提供了一种特殊的单选框组件，可以通过设置form的lay-filter属性来实现单选框的样式和功能。下面是一个示例代码：

<div class="layui-form-item">

  <label class="layui-form-label">性别</label>
  <div class="layui-input-block">
    <input type="radio" name="sex" value="男" title="男" checked>
    <input type="radio" name="sex" value="女" title="女">
  </div>
</div>

在这个例子中，我们定义了一个用于选择性别的单选框，它包含了两个选项：“男”和“女”。默认情况下，“男”选项是被选中的，这是因为我们添加了checked属性。如果我们想让“女”选项默认被选中，只需要把checked属性设置为“女”即可。

3.2 实现下拉框

下拉框是前端开发中非常常见的一种选择框，它可以让用户在一个固定的列表中进行选择。在Layui中，我们可以使用<select>标签和Layui特有的class名来实现下拉框。下面是一个示例代码：

<div class="layui-form-item">

  <label class="layui-form-label">城市</label>
  <div class="layui-input-inline">
    <select name="city" lay-verify="required">
      <option value="">请选择城市</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
    </select>
  </div>
</div>

在这个例子中，我们定义了一个下拉框，用户可以选择自己所在的城市。在下拉框中，我们定义了几个选项，其中第一个选项是用来提示用户请选择城市的，如果用户没有选择任何城市，那么提交表单时会给出提示。

总结

使用Layui可以非常方便地实现各种自定义的输入框和选择框，从而满足不同的页面需求。在使用Layui时，需要尽量遵循Layui的命名规范和使用方式，这样才能发挥出Layui的优势。