README

一套用于在 Laravel 应用中渲染基本、完全可访问的 HTML 表单的 Laravel Blade 组件。这种方法简洁：不包含 CSS 和 JS，但计划提供 Tailwind（以及可能的其他框架）预设。

安装

您可以通过 composer 安装此包

composer require gridprinciples/blade-forms

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="blade-forms-config"

可选，您可以使用以下命令发布视图

php artisan vendor:publish --tag="blade-forms"

使用

<x-form :post="route('form-submission-route')">

    <x-form::input 
        name="name" 
        label="Your name" 
        help="What should we call you?"
        required
        />

    <x-form::radio-buttons 
        name="weekday"
        label="Preferred weekday" 
        :options="[
            'mo' => 'Monday',
            'tu' => 'Tuesday',
            'we' => 'Wednesday',
            'th' => 'Thursday',
            'fr' => 'Friday',
        ]"
        required
        />

    <x-form::checkbox
        name="agree"
        label="I agree with the terms"
        />

</x-form>

结果

文本输入

文本输入可能是最简单的表单元素。与其他所有元素一样，我们可以使用 x-form Blade 前缀来调用它

<x-form::input name="username" />

我们可以继续装饰这个输入（并应用一些可读的缩进）

<x-form::input
    name="username"
    label="Please provide your username"
    help="If you don't have a username yet, use your email."
    required
    />

这样我们就得到了一个可以使用的输入

我们可以进一步自定义包裹的 <div> 和 <label> 的属性

<x-form::input
    name="username"
    label="Please provide your username"
    help="If you don't have a username yet, use your email."
    required
    :wrapperAttributes="[
        'class' => 'form-group-wrapper', 
        'id' => 'username-field',
    ]"
    :labelAttributes="['class' => 'form-label']"
    :inputGroupAttributes="['class' => 'form-input-wrapper']"
    />

结果如下

<div class="form-group-wrapper" id="username-field">
    <label for="username_01" class="form-label">
        Please provide your username*
        <span class="sr-only">(required)</span>
    </label>
    <div class="form-input-wrapper">
        <input id="username_01" name="username" type="text" aria-describedby="username_01_feedback" required="">
    </div>
    <div id="username_01_feedback">
        <div>If you don't have a username yet, use your email.</div>
    </div>
</div>

多行文本输入框

多行文本输入框几乎与上面的输入组件相同

<x-form::textarea
    name="message"
    label="What would you like to say?"
    rows="2"
    />

单选按钮

单选控件应以一组的形式渲染，带有选项

<x-form::radio-buttons
    name="choice"
    label="Do you think so?"
    :options="[
        'yes' => 'Yes',
        'no' => 'No',
        'maybe' => 'Maybe',
    ]"
    value="maybe" {{-- pre-selected option --}}
    />

您可以通过传递数组而不是字符串作为标签来自定义选项属性。以下是如何禁用“可能”选项的示例

<x-form::radio-buttons
    name="choice"
    label="Do you think so?"
    :options="[
        'yes' => 'Yes',
        'no' => 'No',
        'maybe' => [
            'label' => 'Maybe',
            'disabled' => true,
        ],
    ]"
    />

复选框

单个复选框可以独立使用

<x-form::checkbox
    name="remember"
    label="Remember me"
    id="remember_checkbox"
    />

或者，您可以渲染一组选项

<x-form::checkbox-list
    name="fields"
    label="Which fields can be exported?"
    :options="[
        'name' => 'Full name',
        'email' => 'Email address',
        'phone' => 'Phone number',
        'zip' => 'ZIP code',
    ]"
    />

选择框

选择框输入必须包含选项，并且可以以非常类似于单选按钮和复选框列表的方式编写

<x-form::select
    name="frequency"
    label="How frequently would you like to receive updates?"
    :options="[
        'sync' => 'As soon as anything happens',
        'daily' => 'Daily updates',
        'weekly' => 'Weekly updates',
        'monthly' => 'Monthly updates',
    ]"
    />

表单

您可以使用此组件创建 <form> 元素，这包括一些快捷方式来使事情更简洁。Laravel 应用通常有类似以下内容

<form method="POST" action="{{ route('submission-route') }}">
    @csrf
    @method('PUT')
    {{-- form elements --}}
</form>

使用 <x-form> 组件，我们可以简化事情

<x-form :put="route('submission-route')">
    {{-- form elements --}}
</x-form>

组件将自动

添加 CSRF 字段
根据您填充提交 URL 的变量添加方法。您可以使用 get、post、put、patch 或 delete 传递您的 URL，方法将为您设置。

测试

composer test

变更日志

有关最近更改的更多信息，请参阅 CHANGELOG

贡献

有关详细信息，请参阅 CONTRIBUTING

安全漏洞

有关如何报告安全漏洞的详细信息，请参阅我们的安全策略

鸣谢

许可

MIT 许可证 (MIT)。有关更多信息，请参阅许可文件

gridprinciples / blade-forms

维护者

详细信息