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.


Who is Participating?

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

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.