Skip to content

Commit c748b6a

Browse files
sdebackersdebacker
committed
Update readme.md
1 parent 129a936 commit c748b6a

1 file changed

Lines changed: 50 additions & 59 deletions

File tree

‎readme.md‎

Lines changed: 50 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
1-
BootForms
2-
===============
1+
# BootForms
32

43
[![Build Status](https://travis-ci.org/TypiCMS/bootforms.svg?branch=master)](https://travis-ci.org/TypiCMS/bootforms)
54
[![Coverage Status](https://coveralls.io/repos/github/TypiCMS/bootforms/badge.svg?branch=master)](https://coveralls.io/github/TypiCMS/bootforms?branch=master)
65
[![StyleCI](https://styleci.io/repos/132662795/shield?branch=master)](https://styleci.io/repos/132662795)
76

8-
BootForms was originally created by [Adam Wathan](https://github.com/adamwathan). It is build on top of the more general [Form](https://github.com/adamwathan/form) package by adding another layer of abstraction to rapidly generate markup for standard Bootstrap 4 forms. Probably not perfect for your super custom branded ready-for-release apps, but a *huge* time saver when you are still in the prototyping stage!
7+
BootForms was originally created by [Adam Wathan](https://github.com/adamwathan). It is build on top of the more general [Form](https://github.com/adamwathan/form) package by adding another layer of abstraction to rapidly generate markup for standard Bootstrap 4 forms. Probably not perfect for your super custom branded ready-for-release apps, but a _huge_ time saver when you are still in the prototyping stage!
98

10-
- [Installation](#installing-with-composer)
11-
- [Using BootForms](#using-bootforms)
12-
- [Basic Usage](#basic-usage)
13-
- [Customizing Elements](#customizing-elements)
14-
- [Reduced Boilerplate](#reduced-boilerplate)
15-
- [Input Groups](#input-groups)
16-
- [Automatic Validation State](#automatic-validation-state)
17-
- [Horizontal Forms](#horizontal-forms)
18-
- [Additional Tips](#additional-tips)
19-
- [Related Resources](#related-resources)
9+
- [Installation](#installing-with-composer)
10+
- [Using BootForms](#using-bootforms)
11+
- [Basic Usage](#basic-usage)
12+
- [Customizing Elements](#customizing-elements)
13+
- [Reduced Boilerplate](#reduced-boilerplate)
14+
- [Input Groups](#input-groups)
15+
- [Automatic Validation State](#automatic-validation-state)
16+
- [Horizontal Forms](#horizontal-forms)
17+
- [Additional Tips](#additional-tips)
18+
- [Related Resources](#related-resources)
2019

2120
## Installing with Composer
2221

@@ -81,8 +80,8 @@ BootForms lets you create a label and form control and wrap it all in a form gro
8180

8281
```php
8382
// <form method="post">
84-
// <div class="form-group">
85-
// <label for="field_name">Field Label</label>
83+
// <div class="mb-3">
84+
// <label for="field_name" class="form-label">Field Label</label>
8685
// <input type="text" class="form-control" id="field_name" name="field_name">
8786
// </div>
8887
// </form>
@@ -100,15 +99,15 @@ If you need to customize your form elements in any way (such as adding a default
10099
Attributes can be added either via the `attribute` method, or by simply using the attribute name as the method name.
101100

102101
```php
103-
// <div class="form-group">
104-
// <label for="first_name">First Name</label>
102+
// <div class="mb-3">
103+
// <label for="first_name" class="form-label">First Name</label>
105104
// <input type="text" class="form-control" id="first_name" name="first_name" placeholder="John Doe">
106105
// </div>
107106
BootForm::text('First Name', 'first_name')->placeholder('John Doe');
108107

109-
// <div class="form-group">
110-
// <label for="color">Color</label>
111-
// <select class="form-control" id="color" name="color">
108+
// <div class="mb-3">
109+
// <label for="color" class="form-label">Color</label>
110+
// <select class="form-select" id="color" name="color">
112111
// <option value="red">Red</option>
113112
// <option value="green" selected>Green</option>
114113
// </select>
@@ -118,8 +117,8 @@ BootForm::select('Color', 'color')->options(['red' => 'Red', 'green' => 'Green']
118117
// <form method="GET" action="/users">
119118
BootForm::open()->get()->action('/users');
120119

121-
// <div class="form-group">
122-
// <label for="first_name">First Name</label>
120+
// <div class="mb-3">
121+
// <label for="first_name" class="form-label">First Name</label>
123122
// <input type="text" class="form-control" id="first_name" name="first_name" value="John Doe">
124123
// </div>
125124
BootForm::text('First Name', 'first_name')->defaultValue('John Doe');
@@ -133,27 +132,27 @@ Typical Bootstrap form boilerplate might look something like this:
133132

134133
```html
135134
<form>
136-
<div class="form-group">
137-
<label for="first_name">First Name</label>
138-
<input type="text" class="form-control" name="first_name" id="first_name">
139-
</div>
140-
<div class="form-group">
141-
<label for="last_name">Last Name</label>
142-
<input type="text" class="form-control" name="last_name" id="last_name">
143-
</div>
144-
<div class="form-group">
145-
<label for="date_of_birth">Date of Birth</label>
146-
<input type="date" class="form-control" name="date_of_birth" id="date_of_birth">
147-
</div>
148-
<div class="form-group">
149-
<label for="email">Email address</label>
150-
<input type="email" class="form-control" name="email" id="email">
151-
</div>
152-
<div class="form-group">
153-
<label for="password">Password</label>
154-
<input type="password" class="form-control" name="password" id="password">
155-
</div>
156-
<button type="submit" class="btn btn-primary">Submit</button>
135+
<div class="mb-3">
136+
<label for="first_name" class="form-label">First Name</label>
137+
<input type="text" class="form-control" name="first_name" id="first_name" />
138+
</div>
139+
<div class="mb-3">
140+
<label for="last_name" class="form-label">Last Name</label>
141+
<input type="text" class="form-control" name="last_name" id="last_name" />
142+
</div>
143+
<div class="mb-3">
144+
<label for="date_of_birth" class="form-label">Date of Birth</label>
145+
<input type="date" class="form-control" name="date_of_birth" id="date_of_birth" />
146+
</div>
147+
<div class="mb-3">
148+
<label for="email" class="form-label">Email address</label>
149+
<input type="email" class="form-control" name="email" id="email" />
150+
</div>
151+
<div class="mb-3">
152+
<label for="password" class="form-label">Password</label>
153+
<input type="password" class="form-control" name="password" id="password" />
154+
</div>
155+
<button type="submit" class="btn btn-primary">Submit</button>
157156
</form>
158157
```
159158

@@ -175,12 +174,10 @@ BootForms makes a few decisions for you and allows you to pare it down a bit mor
175174
Bootforms allows you to create input groups.
176175

177176
```php
178-
// <div class="form-group">
179-
// <label for="amount">Amount</label>
177+
// <div class="mb-3">
178+
// <label for="amount" class="form-label">Amount</label>
180179
// <div class="input-group">
181-
// <span class="input-group-prepend">
182-
// <span class="input-group-text">$</span>
183-
// </span>
180+
// <span class="input-group-text">$</span>
184181
// <input type="number" name="amount" id="amount" class="form-control">
185182
// </div>
186183
// </div>
@@ -190,13 +187,11 @@ Bootforms allows you to create input groups.
190187
With a button appended.
191188

192189
```php
193-
// <div class="form-group">
190+
// <div class="mb-3">
194191
// <label for="email">Email</label>
195192
// <div class="input-group">
196193
// <input type="text" name="email" id="email" class="form-control">
197-
// <span class="input-group-append">
198-
// <button type="submit" class="btn btn-primary">OK</button>
199-
// </span>
194+
// <button type="submit" class="btn btn-primary">OK</button>
200195
// </div>
201196
// </div>
202197
{!! BootForm::inputGroup('Email', 'email')->afterAddon(BootForm::submit('OK')) !!}
@@ -209,8 +204,8 @@ Another nice thing about BootForms is that it will automatically add error state
209204
Essentially, this takes code that would normally look like this:
210205

211206
```php
212-
<div class="form-group">
213-
<label for="first_name">First Name</label>
207+
<div class="mb-3">
208+
<label for="first_name" class="form-label">First Name</label>
214209
<input type="text" class="form-control {!! $errors->has('first_name') ? 'is-invalid' : '' !!}" id="first_name">
215210
{!! $errors->first('first_name', '<div class="invalid-feedback">:message</div>') !!}
216211
</div>
@@ -257,7 +252,7 @@ You can hide labels by chaining the `hideLabel()` helper off of any element defi
257252
BootForm::text('First Name', 'first_name')->hideLabel()
258253
```
259254

260-
The label will still be generated in the markup, but hidden using Bootstrap’s `.sr-only` class, so you don’t reduce the accessibility of your form.
255+
The label will still be generated in the markup, but hidden using Bootstrap’s `.visually-hidden` class, so you don’t reduce the accessibility of your form.
261256

262257
#### Form Text
263258

@@ -276,7 +271,3 @@ BootForm::open()->action(route('users.update', $user))->put()
276271
BootForm::bind($user)
277272
BootForm::close()
278273
```
279-
280-
## Related Resources
281-
282-
- [Laravel Translatable BootForms](https://github.com/Propaganistas/Laravel-Translatable-Bootforms), integrates BootForms with Dimsav’s [Laravel Translatable](https://github.com/dimsav/laravel-translatable) package

0 commit comments

Comments
 (0)