how to deal with fields outside of form tag - forms

Question

Here is my code.
In this code, as you can see, there is no form tag wrapping around fields.
but somehow it can process fields. from my understanding, I always thought that fields are needed to be wrapped around form tag. How come this works?
Would anyone can explain this to me please? Thank you.
<form role="form" method="post">
<input type='hidden' name='bno' value="${boardVO.bno}">
</form>
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">Title</label> <input type="text"
name='title' class="form-control" value="${boardVO.title}"
readonly="readonly">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Content</label>
<textarea class="form-control" name="content" rows="3"
readonly="readonly">${boardVO.content}</textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Writer</label> <input type="text"
name="writer" class="form-control" value="${boardVO.writer}"
readonly="readonly">
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-warning">Modify</button>
<button type="submit" class="btn btn-danger">REMOVE</button>
<button type="submit" class="btn btn-primary">LIST ALL</button>
</div>
<script>
$(document).ready(function(){
var formObj = $("form[role='form']");
console.log(formObj);
$(".btn-warning").on("click", function(){
formObj.attr("action", "/board/modify");
formObj.attr("method", "get");
formObj.submit();
});
$(".btn-danger").on("click", function(){
formObj.attr("action", "/board/remove");
formObj.submit();
});
$(".btn-primary").on("click", function(){
self.location = "/board/listAll";
});
});