• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 351
  • Last Modified:

Making attractive php-based forms. Help get me out of the Dark Ages.

After months of work on a php database project, I was praised for the site's functionality, but asked to make the pages prettier. I asked for an example of something they thought looked nice, and they pointed to some Windows applications. Sure, it's easy to format, change widget sizes, and add images & color in the Visual Studio GUI--not so much when developing for web browsers in HTML.

Since this project is coded in php (with some jQuery), that's what outputs the html. So if I want 5 rows and 3 columns of text fields, I have been using <table><tr><td>, etc. It's tough getting a lot of control over exact layout and changing colors. There are php loops used to fill dropdowns with their contents from the database, etc.

Is there some quantum leap tool I don't know about? Some kind of form designer that would allow me to lay out all the controls on the page as desired,with a lot of control over placement and aesthetics, and then allow me to integrate the php behind it that does all the database work?

I'm just looking for ideas here because I think there are better methods out there than what I am doing. Any advice would be helpful.


2 Solutions

The easy way is using a Jquery Plug-in that do all the work and make the forms look just beauty.

Here a good collection:


I hope that my answer helps you!
Beverley PortlockCommented:
A simple way is to have a container DIV that is position: relative; You can then position any element absolutely within the div. The appearance of the elements is also controllable through CSS.

See attached snippet
               input {
                    border: 1px solid #c0c0c0;
                    background: #f0f0ff;
          <div style='position: relative'>
               <label style='position: absolute; left: 0px; top: 10px;'>Field 1</label>
               <input name='a' type='text' size='6' style='position: absolute; left: 100px; top: 10px;' />
               <label style='position: absolute; left: 0px; top: 50px;'>Field 1</label>
               <input name='b' type='text' size='6' style='position: absolute; left: 80px; top: 50px;' />

Open in new window


Featured Post

Get your Disaster Recovery as a Service basics

Disaster Recovery as a Service is one go-to solution that revolutionizes DR planning. Implementing DRaaS could be an efficient process, easily accessible to non-DR experts. Learn about monitoring, testing, executing failovers and failbacks to ensure a "healthy" DR environment.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now