Aligning with Tables
[Previous] [Main] [Next]

 
If a form is relatively complex or has a number of input fields, it's often useful to align the fields and the surrounding text using a table.  
 
The following example illustrates using htmlTable to create a table of two columns and multiple rows. Text elements and input fields are added to htmlTableCell objects, which are then combined into htmlTableRow objects and added to the table. Finally, the entire table object is inserted into a htmlForm object for use in a page.  
 
Important Caveat  
The example below adds input elements to a table instead of directly to a form. This is fine unless your application uses the htmlInputFile class, in which case you will need to call htmlForm::Encode("multipart/form-data") manually.  
 
Example
 
#include <stdio.h>  
#include <stdlib.h>  
#include <dcmicro/htmlpp/htmlpp.h>  
 
int main( void )  
{  
   htmlCgi   server ;  
   htmlPage  page ;  
   htmlForm  form( "/cgi-bin/yourapp" ) ;  
 
   htmlTable  table ;  
   table.Border(3).Align(align_center).CellPadding(10) ;  
 
   //  Create the form elements, inserting them  
   //  into cells and rows of the table.  
   table << (htmlTableRow() << "Last:"  
                            << htmlInputText("last") )  
         << (htmlTableRow() << "First:"  
                            << htmlInputText("first") )  
         << (htmlTableRow() << "Company:"  
                            << htmlInputText("company") )  
         << (htmlTableRow() << "Address:"  
                            << htmlInputText("address") ) ;  
 
   //  Add the entire table along with a  
   //  submit button to the form object  
   form << table  
        << htmlInputSubmit() ;  
 
   //  Finally, put the form into the page object  
   page << form ;  
 
   server << page ;  
   return 0 ;  
}  
 
Program Output
 
Content-Type: text/html  
<HTML>  
<HEAD>  
</HEAD>  
<BODY>  
<FORM ACTION="/cgi-bin/yourapp" METHOD="POST">  
<TABLE BORDER="3" ALIGN="CENTER" CELLPADDING="10">  
<TR><TD>Last:</TD>  
<TD><INPUT TYPE="TEXT" NAME="last"></TD>  
</TR>  
<TR><TD>First:</TD>  
<TD><INPUT TYPE="TEXT" NAME="first"></TD>  
</TR>  
<TR><TD>Company:</TD>  
<TD><INPUT TYPE="TEXT" NAME="company"></TD>  
</TR>  
<TR><TD>Address:</TD>  
<TD><INPUT TYPE="TEXT" NAME="address"></TD>  
</TR>  
<INPUT TYPE="SUBMIT">  
</FORM>  
</BODY>  
</HTML>  
 

ex_form.gif  



©1998 DC Micro Development. All rights reserved.
No portion of this document may be c opied or reproduced without expressed written consent.
html++ is a trademark of DC Micro Development.