Todo Laravel Project - Form to create new todo tasks

In this Laravel project tutorial we will create a form to create a new todo task.

Form to create new todo task

Create a new file form-new-todo.blade.php inside the resources/views/layouts directory and write the following code.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 offset-sm-3 col-md-6 offset-md-3 my-3">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">New</button>
    </div>
  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New Todo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <!-- form -->
        <form action="/todo" method="POST">
          {{ csrf_field() }}

          <!-- Todo title -->
          <div class="form-group">
            <label for="todo-title" class="control-label">Title</label>
            <input type="text" name="todo-title" id="todo-title" class="form-control" required>
          </div>

          <!-- Todo description -->
          <div class="form-group">
            <label for="todo-description" class="control-label">Description</label>
            <textarea name="todo-description" id="todo-description" class="form-control" rows="3" required></textarea> 
          </div>

          <!-- button -->
          <div class="float-right">
            <button type="reset" class="btn btn-secondary">Reset</button>
            <button type="submit" class="btn btn-primary">Create</button>
          </div>
        </form>
        
      </div>
    </div>
  </div>
</div>

In the above code we are creating a New button. When the user will click that button then a Bootstrap Modal will be displayed.

Inside the body of the modal we have a form which will allow us to create a new todo task.

The csrf_field()

Note! We are using {{ csrf_field() }} in the form.

It will create a hidden field in the form which the Laravel application will use to prevent CSRF (Cross-site request forgery) attack.

Now we will include this form-new-todo.blade.php file inside the master layout.

Form submit

If user clicks on the Submit button then the data of the form will be submitted to /todo URL via POST request.

We will discuss about form handling in the next tutorial.

Adding the new todo form in master layout

Open app.blade.php file inside the resources/views/layouts directory and include the form-new-todo file after the navigation.

<!-- navigation bar ends here -->

@include('layouts.form-new-todo')

@yield('content')

Note! The line @include('layouts.form-new-todo') tells Laravel to include form-new-todo.blade.php file which is inside the resources/views/layouts directory.

If we open the home page in the browser we will get the following output.

On clicking the New button we will get the form.

Alright, our form is ready. In the next tutorial we will handle the form submission.

See you there. Have fun coding.