How to implement BorderContainer inside a Form HTML Field

I am trying to bring in a Dijit BorderContainer inside a form HTML code. However, the same doesnt seem to work at runtime, eventhough the same code works in a plain HTML form.   <!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"><title>Demo: Layout with Dijit</title> <link rel="stylesheet" href="">ajax.googleapis.com/.../claro.css" > <style type="text/css">html, body {     height: 100%;     margin: 0;     overflow: hidden;     padding: 0; } #appLayout {     height: 100%; } #leftCol {     width: 14em; }</style> <script src="">ajax.googleapis.com/.../dojo.xd.js"         data-dojo-config="parseOnLoad: true">    </script> <script>    dojo.require("dojo.parser");    dojo.require("dijit.layout.BorderContainer");    dojo.require("dijit.layout.TabContainer");    dojo.require("dijit.layout.ContentPane");</script> </head> <body class="claro">   
       
           
                <h4>Group 1 Content</h4>                <p>para 1</p>           
           
                <h4>h4 para 2</h4>           
           
                <h4>h4 para 3</h4>           
       
       
Header content (top)
       
Sidebar            content (left)
   
</body></html>