1- # Rendering the Form with Twig Helper Functions
1+ # Rendering the Form
22
3- In the last chapter, we dived into the Symfony Form component, built our
3+ In the last chapter, we dove into the Symfony Form component, built our
44first Form type, and created a Form object from the type in the controller.
55
66Now, let's move on to the fun part — bringing it all to life by
77rendering the form. The Symfony Form component packs a bunch of neat helper
88functions that make form rendering a breeze. Open your template and swap
9- out the dump with this line of code : ` {{ form(form) }} `
9+ out the dump with: ` {{ form(form) }} `
1010
1111Now, head back to your browser and refresh the page. Voila! We have a form.
1212Sure, it might not win any beauty pageants, but as backend developers,
@@ -28,15 +28,15 @@ action explicitly, but most of the time, it's not necessary.
2828
2929Since our project uses Tailwind CSS, let's activate the Tailwind Forms
3030plugin for some reasonable styling defaults. Back in PhpStorm, open
31- ` assets/styles/app.css ` , and in the beginning add
31+ ` assets/styles/app.css ` , and at the top, add
3232` @plugin "@tailwindcss/forms"; `
3333
3434Don't forget the semicolon at the end. This plugin provides a neat minimal
3535reset for form controls, making them easier to style with Tailwind classes.
36- That's designer's favorite feature!
36+ That's our designer's favorite feature!
3737
3838Refresh your browser, and you'll notice a significant improvement. Our
39- form has gone from a 90s throwback to a modern developer tool .
39+ form has gone from a 90s throwback to a more modern look .
4040
4141Now, let's add a minor detail to make our form fields blend better with the
4242background. In the CSS file, add this bit:
@@ -49,14 +49,14 @@ input, textarea, select {
4949
5050## Adding a Submit Button
5151
52- Buuuut we've got a tiny issue. Our beautiful reset form is missing the most
52+ Buuuut we've got a tiny issue. Our beautiful form is missing the most
5353important element - a submit button. How do we add one? The best practice
5454is to add your submit button manually in Twig, not inside the form type.
5555
5656Let's create a simple button. Back in the Twig template, below the form, add:
57- ` <button type="submit"></button> ` . I will add some Tailwind CSS classes
58- to make it look prettier like a real stylish button . You can copy/paste
59- that long list of CSS classes from the scripts below the video .
57+ ` <button>Create</button> ` , ` type="submit" ` . I'll add some Tailwind CSS classes
58+ to make it look prettier. You can copy/paste
59+ this long list of CSS classes from the script below.
6060
6161Remember, this button must be inside the ` form ` tag; otherwise, no matter how
6262many times you click or how hard you will press your touchpad, it just won't
@@ -88,4 +88,4 @@ saving, no validating, no redirecting. You'll see this when you try to
8888reload the page, and your browser asks if it should resubmit the form.
8989
9090But don't worry, we'll cover how to process the form and store the new
91- StarshipPart in the database in the next video. Stay tuned!
91+ ` StarshipPart ` in the database in the next video. Stay tuned!
0 commit comments