Simple input

Les classes CSS suivantes vous aident à créer des formulaires.

Note : Tout les type d'inputs possède les même propriété de base.

Classe de base pour les formulaires

tip

Toujours ajouter la class label sur la balise label

Nom

Textarea

Choisir un paysFranceEspagneAllemagne

Newsletter frequency

Daily

Weekly

Categories

Categorie 1

Categorie 2

HTML BLADE

<x-form :action="route('contact.send')" style="max-width: 400px; margin: 3em auto 1em;">

    <x-form-input name="name" label="Nom" class="first" required />

    <x-form-input type="email" name="email" label="Email" required />

    <x-form-textarea name="message" label="Message" placeholder="Dutch Biography" required />


    <x-form-select name="country_code" label="Choisir un pays" :options="['FR' => 'France', 'ES' => 'Espagne', 'DE' => 'Allemagne']" />
    <x-form-select name="interests[]" :options="['FR' => 'France', 'ES' => 'Espagne', 'DE' => 'Allemagne']" label="Select your interests" multiple />


    <!-- Inline radio inputs -->
    <x-form-group name="newsletter_frequency" label="Newsletter frequency" inline type="radios">
        <x-form-radio name="newsletter_frequency" value="daily" label="Daily" />
        <x-form-radio name="newsletter_frequency" value="weekly" label="Weekly" default />
    </x-form-group>

    <x-form-group type="checkboxes" name="categories" label="Categories">
        <x-form-checkbox name="categories[]" :show-errors="false" label="Categorie 1" value="cat_1" switch />
        <x-form-checkbox name="categories[]" :show-errors="false" label="Categorie 2" value="cat_2" switch />
    </x-form-group>

    <div class="btns">
        <x-form-submit class="btn-large">C'est parti !</x-form-submit>
    </div>
</x-form>