All we want to do in this tutorial is move the search from the address bar to a form in the page. It will still be a GET request (so the address bar will still be "?search="), but the user can use a form field.
Add this code, just below the main container div.
<form action="/charities" th:method="get">
<div class="form-group">
<label class="form-label" for="search">Search:</label>
<input aria-describedby="Enter a term to search for charities." class="form-control" id="search"
name="search" placeholder="Enter charity details" type="text" value=""/>
</div>
<button class="btn btn-primary">Submit</button>
</form>
We can see one new Thymeleaf tag th:method. This isn't actually required...it could just be method.
The form then has a text field with name = "search". When the form is submitted, the GET request will be to "/charities?search=[the value entered]".
The controller remains unchanged (there is a change in the repo but that was thinking ahead!!!).
Go to "/charities" and try out the form.
This was a simple change to enable a form using GET. Later on, we'll introduce POST requests and other form-related features.