js form表单 输入框 键盘上下左右_Niushop开源商城系统表单搭建

原标题：Niushop开源商城系统表单搭建

表单搭建，是商城系统触发按钮的重要模块之一，有工整详细的表单，不仅能让页面更加美观大气，还可以让后台代码更加规整与规范，方便及时查漏或者商家再次二开！

表单label宽度

layui-form-label 155px

layui-form-label sm 100px

input宽度

input框 最短(100px): ns-len-small

input框 短(160px): ns-len-short

input框 中(250px): ns-len-mid

input框 长(500px): ns-len-long

输入框

效果图：

代码如下：

<div>

<label>输入框</label>

<div>

<input type="text" name="" placeholder="请输入内容" autocomplete="off" class="layui-input ns-len-mid">

</div>

</div>

类型：

1、文字输入框 type="text"

2、数字输入框 type="number"

3、密码输入框 type="password"

注意：

required：注册浏览器所规定的必填字段

lay-verify：注册form模块需要验证的类型

class="layui-input"：提供的input样式

添加必输项标识

效果图：

关键代码：

<span>*</span>

代码如下：

<div>

<label><span>*</span>必填</label>

<div>

<input type="text" name="" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">

</div>

</div>

添加解释说明

效果图：

关键代码(注释一)：

<span>注释一</span>

代码如下(注释一)：

<!-- 注释一 -->

<div>

<label>注释一</label>

<div>

<input type="password" name="" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">

<span>注释一</span>

</div>

</div>

关键代码(注释二)：

<span>注释二</span>

注意：摆放位置不同

代码如下(注释二)：

<!-- 注释方式二 -->

<div>

<label>注释二</label>

<div>

<input type="password" name="" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">

</div>

<span>注释二</span>

</div>

关键代码(注释三)：

<span>注释三</span>

代码如下(注释三)：

<!-- 注释方式三 -->

<div>

<label>注释三</label>

<div>

<input type="password" name="" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">

</div>

<span>注释三</span>

</div>

复选框

效果图：

代码如下:

<!-- 复选框 -->

<div>

<label>复选框</label>

<div>

<input type="checkbox" name="like[write]" checkboxs lay-skin="primary">

<input type="checkbox" name="like[read]" lay-skin="primary">

</div>

</div>

注意： checkboxs 表示选中

下一期阿牛ger将于大家分享关于表单开源、按钮、字段等代码添加，关注我呦！返回搜狐，查看更多

责任编辑：