• 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.

Thanks.

0
jbbarnes
Asked:
jbbarnes
2 Solutions
 
VanHackmanCommented:

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:

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements

I hope that my answer helps you!
0
 
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
<html>
     <head>
          <title></title>
          <style>
               input {
                    border: 1px solid #c0c0c0;
                    background: #f0f0ff;
               }
          </style>
     </head>
     <body>
          <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;' />
          </div>
     </body>
</html>

Open in new window

0

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