Rework methodAdd Form to use bootstrap.

src/OFS/dtml/methodAdd.dtml

@@ -1,5 +1,7 @@
 <dtml-var manage_page_header>
 
+<main>
+
 <dtml-var "manage_form_title(this(), _,
            form_title='Add DTML Method',
            )">
@@ -9,63 +11,36 @@ A DTML Method is used to hold scripting tags and text content.
 It can contain HTML, XML, plain text, structured-text, etcetera.
 A DTML Method can contain DTML scripting tags which operate
 in the context of the DTML Method's containing object.
-A DTML Method differs from a DTML Document in that it does not 
+A DTML Method differs from a DTML Document in that it does not
 have properties and calls methods on its container object.
 </p>
 
 <p class="form-help">
-You may create a new DTML Method object using the form below. 
+You may create a new DTML Method object using the form below.
  You may also choose to upload an existing html file from your
  local computer by clicking the <I>Browse</I> button.
 </p>
 
-<form action="addDTMLMethod" method="post" enctype="multipart/form-data">
-<table cellspacing="0" cellpadding="2" border="0">
-  <tr>
-    <td align="left" valign="top">
-    <div class="form-label">
-    Id
-    </div>
-    </td>
-    <td align="left" valign="top">
-    <input type="text" name="id" size="40" />
-    </td>
-  </tr>
-  <tr>
-    <td align="left" valign="top">
-    <div class="form-optional">
-    Title
-    </div>
-    </td>
-    <td align="left" valign="top">
-    <input type="text" name="title" size="40" />
-    </td>
-  </tr>
-  <tr>
-    <td align="left" valign="top">
-    <div class="form-optional">
-    File
-    </div>
-    </td>
-    <td align="left" valign="top">
-    <input type="file" name="file:string" size="25" value="" />
-    </td>
-  </tr>
-  <tr>
-    <td align="left" valign="top">
-    </td>
-    <td align="left" valign="top">
-    <div class="form-element">
-    <input class="form-element" type="submit" name="submit" 
-     value=" Add " /> 
-    <input class="form-element" type="submit" name="submit" 
-     value=" Add and Edit " />
-    </div>
-    </td>
-  </tr>
-</table>
-</form>
+<form action="addDTMLMethod" method="post" enctype="multipart/form-data" class="zmi-add zmi-dtmlmethod">
 
-<dtml-var manage_page_footer>
+<div class="form-group row">
+    <label for="id" class="form-label col-sm-2">Id</label>
+    <input type="text" class="form-control col-sm-10" name="id" id="id" />
+</div>
+<div class="form-group row">
+    <label for="title" class="form-label col-sm-2">Title</label>
+    <input type="text" class="form-control col-sm-10" name="title" id="title" />
+</div>
+<div class="form-group row">
+    <label for="file" class="form-label col-sm-2">File</label>
+    <input type="file" id="file" class="form-control-file col-sm-10" name="file:string" size="25" value="" />
+</div>
+<div class="controls">
+    <input class="btn btn-primary" type="submit" name="submit" value=" Add " />
+    <input class="btn btn-secondary" type="submit" name="submit" value=" Add and Edit " />
+</div>
+</form>
 
+</main>
 
+<dtml-var manage_page_footer>