如何处理表单标签之外的字段

Question

这是我的代码。

如您所见，在此代码中，字段周围没有表单标签。 但是它可以处理字段。根据我的理解，我一直认为字段需要包裹在form标签周围。这怎么运作的？ 有人可以向我解释一下吗？谢谢。

<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";
});

}）;