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

Posted on 2010-01-02
Last Modified: 2013-11-19
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.


Question by:jbbarnes
    LVL 11

    Accepted Solution


    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!
    LVL 34

    Assisted Solution

    by:Beverley Portlock
    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

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit ( and similar technologies have enjoyed wide adoption, making it possib…
    Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
    The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now