正文

轻松学会：Laravel框架下创建表单与提交按钮的完整教程

/0 浏览量
0416

在Laravel框架中创建表单与提交按钮是一个相对简单的过程，但其中涉及到一些重要的步骤和最佳实践。本文将带你一步步完成这个过程，让你轻松学会如何在Laravel中创建一个表单，并为其添加提交按钮。

准备工作

在开始之前，请确保你已经安装了Laravel框架，并且已经创建了一个新的Laravel项目。以下是一个简单的步骤，用于创建一个新的Laravel项目：

composer global require laravel/installer
laravel new myproject
cd myproject

创建表单

步骤1：创建视图

首先，我们需要创建一个视图文件来展示表单。在你的Laravel项目中，找到resources/views目录，并创建一个新的文件夹，例如forms。然后在forms文件夹中创建一个名为create.blade.php的文件。

mkdir -p resources/views/forms
touch resources/views/forms/create.blade.php

接下来，编辑create.blade.php文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单示例</title>
</head>
<body>
    <form action="{{ route('store') }}" method="post">
        @csrf
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱：</label>
            <input type="email" class="form-control" id="email" name="email" required>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</body>
</html>

步骤2：创建路由

接下来，我们需要在routes/web.php文件中创建一个路由，用于处理表单提交。

Route::post('/store', 'FormController@store');

步骤3：创建控制器

创建一个新的控制器，用于处理表单提交。在app/Http/Controllers目录下创建一个名为FormController.php的文件。

touch app/Http/Controllers/FormController.php

编辑FormController.php文件，并添加以下内容：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormController extends Controller
{
    public function store(Request $request)
    {
        $name = $request->input('name');
        $email = $request->input('email');

        // 在这里处理数据，例如保存到数据库等

        return redirect()->back()->with('success', '数据已成功保存！');
    }
}

添加提交按钮

在上述步骤中，我们已经创建了一个包含提交按钮的表单。提交按钮的类型是button，并且设置了type="submit"属性。这意味着当用户点击这个按钮时，表单将被提交。

如果你想要一个看起来更像是按钮的提交按钮，可以使用CSS进行样式化。以下是一个简单的CSS类，你可以将其添加到你的create.blade.php文件中：

.submit-btn {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.submit-btn:hover {
    background-color: #0056b3;
}

然后在表单中添加一个类为submit-btn的按钮：

<button type="submit" class="btn btn-primary submit-btn">提交</button>

总结

通过以上步骤，你已经在Laravel框架中创建了一个简单的表单，并为其添加了一个提交按钮。你可以根据自己的需求，对表单和按钮进行进一步的样式化和功能扩展。希望这篇教程能帮助你轻松学会在Laravel中创建表单与提交按钮。

-- 展开阅读全文 --