概述
1. 介绍layui
2. form表单的基本概念
3. form表单二维数组的概念
layui介绍
layui是一款轻量级的前端UI框架,适用于各种Web页面的快速开发。它具有简洁的语法、丰富的组件和灵活的定制功能,深受开发者的喜爱。
form表单的基本概念
form表单是前端开发中常用的一种UI组件,用于收集用户输入的数据。在layui中,form表单的基本结构如下:
```html
<form class="layui-form" action="">
 
</form>
```
其中,class为"layui-form"表示使用layui框架的form组件,action属性表示form表单提交的目标位置区域。
form表单二维数组的概念
在实际开发中,经常会遇到需要提交多个相同类型的数据的情况。此时,使用二维数组的形式可以更方便地组织数据并进行提交。
二维数组是指包含多个一维数组的数组,每个一维数组表示一个数据项。在form表单中使用二维数组的方式如下所示:
```html
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">名称</label>
    <div class="layui-input-block">
      <input type="text" name="data[0][name]" lay-verify="title" autplete="off" placeholder="请输入名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
html input type属性    <label class="layui-form-label">价格</label>
    <div class="layui-input-block">
      <input type="text" name="data[0][price]" lay-verify="required" autplete="off" placeholder="请输入价格" class="layui-input">
    </div>
  </div>
 
</form>
```
在上述示例中,name属性的值为"data[0][name]"和"data[0][price]",表示这两个输入框的数据将以二维数组的形式提交给后端。
示例代码
下面通过一个完整的示例代码,演示如何使用form表单二维数组。
HTML代码
```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>form表单二维数组示例</title>
  <link rel="stylesheet" href="网络协议sxxx">
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">商品1名称</label>
    <div class="layui-input-block">
      <input type="text" name="data[0][name]" lay-verify="title" autplete="off" placeholder="请输入名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品1价格</label>
    <div class="layui-input-block">
      <input type="text" name="data[0][price]" lay-verify="required" autplete="off" placeholder
="请输入价格" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品2名称</label>
    <div class="layui-input-block">
      <input type="text" name="data[1][name]" lay-verify="title" autplete="off" placeholder="请输入名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品2价格</label>
    <div class="layui-input-block">
      <input type="text" name="data[1][price]" lay-verify="required" autplete="off" placeholder="请输入价格" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>