Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Convert from "form" to "div"

    Hi

    I have a registry page with a number of box fields and placed the text labels above each one of them with position:absolute, which does not work well

    I found another way of doing what I wanted: placing the text labels above the field boxes. However, I now have a big problem and don't know how to get round it. My form was based on
    <form method="post" action="./database.php">

    and I have just realized that "form" and "div" don't go together. Is there a quick way of converting from form to div so that the database.php gets the correct information? What I added to the css file works well. Or could it be that I have to ger div classes withing the css for each form field?

    When I submit the form I get error messages for the four fields that I changed to div as if no input went into them.

    This is the beginning of what I ended up with:

    <form method="post" action="./database.php">


    <div class="fieldBlock">

    <ry</DIV><br>
    <p><label for="City"> </label><input type="text" name="city" />
    Last edited by qim; 04-09-2013 at 11:14 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Divs have nothing to do with it. You have to use a name attribute to send the info. And yes position:absolute is not good

    FYI Don't use the 'quote' icon to wrap code. Use the # next to it on the right.

    Code:
    <form method="post" action="./database.php">
    
    <div class="fieldBlock">
    <label for='name'>User name:</label><br />
    <input type='text' name='name' />
    </div>
    
    <div class="fieldBlock"><br />
    <label for='repeartname'>Repeat username:</label><br />
    <input type='text' name='repeatname' />	
    </div>
    
    <input type="submit" value="Submit" />
    </form>
    You can remove the div tags if you want and add a <br />.

    The php:
    PHP Code:
     <?php
    $name 
    $_POST['name'];
    $newname $_POST['repeatname'];
    echo 
    $name."<br>";
    echo 
    $newname."<br>";
    ?>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Feb 2013
    Location
    Liverpool
    Posts
    70
    Thanks
    1
    Thanked 4 Times in 4 Posts
    Or instead of using a <br /> just put them in <p>'s - still not strictly correct but better than using deprecated elements in your html!

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    I have to mention this, ( sorry I know its a bit of a derail) why use div's at all, why not go the semantic route and use fieldset in a form? http://reference.sitepoint.com/html/fieldset

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,627
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by edgethreesixty View Post
    Or instead of using a <br /> just put them in <p>'s - still not strictly correct but better than using deprecated elements in your html!
    And since when exactly is <br> deprecated?

  • #6
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, all

    regarding Sunfighter's code, let me be more specific: I have a form.php; a database.php (both with html code) and a register.css.

    The first bit of code you wrote seems to indicate that I do not have to change the code. But where fo I put the php code? At the momemnt that sort of code is in my database.php which works very well getting the data and placing it in the dartabase table. Do I have to do anything to that file?

    Let me show you the bits in database.php that are involved in 'username'

    Code:
    if(isset($_br />';
        $errors_found++;
        }   
    
    
    
    ......
    
    
     if ((!empty($_POST["username"]) && !empty($_POST["repeat-username"])) &&  $_POST["username"] != $_POST["repeat-username"]) {
        echo 'Username does not match.<br />';
        $errors_found++;
        }
    
    
    .....
    
    
    $query->bindValue(":user", trim($_POST['username']));
    Thank you
    Last edited by qim; 04-09-2013 at 11:15 AM.

  • #7
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I got it. I changed the username fields as Sunfighter suggested and the while process works.

    However, the whiole idea of changing to this method was to get the text labels on top of the box fields. Before I porsted I had managed that but the page was not working. Now it is working by«ut the two boxes that were side by side are now on different levels...

    http://pintotours.net/coding/form.php

    I've only changed userbame and password. the ones below are still as they were in the previous stage.

    Can you see why the fields have moved, please?

    This is the appropriate code in the css file

    Code:
    .maincontent {
    	
    	overflow: auto;
    	background: #BABD98; /*demo only*/
    }
    font-size: 1.1em;
       
     }
    Last edited by qim; 04-09-2013 at 11:15 AM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello qim,
    Looks like the way you're using line breaks is doing you no favors. A line break is just what it sounds like, it breaks text to the next line.

    <br> should never be used for making space in a layout, that is what CSS is for (see css margin).
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator

    I'm using the code that sunfighter gave me (see below) and it got ther page working fine, except that the fields are all over the place. I've now finished converting all of them and found the problem, which is solved.

    But now I still have problems not knowuing how to apply this code to the select function for country

    Please see page: http://pintotours.net/coding/form.php

    Thanks for your help
    Last edited by qim; 04-08-2013 at 07:28 PM.

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Just to clarify qim. The code I gave you put one div on top and the other below. And that was because i used a <br>. I did not use a float and there was no way I knew you were using a float.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #11
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sunfighter, I am very grateful to you as the page is now working well, and I've sorted out the boxes, except the one about countries (Select) which I would be grateful if you could throw some light on what to do.

    Thank you

    qim

  • #12
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Stop using position: absolute; Use the float instead.
    You can do this:
    Code:
    	
    	<div class="fieldBlock">
    	<label for="City">City</label>
    	<input type="text" name="city">
    	</div>
    	
    	<div class="fieldBlock">
    	<label for="Country">Country</label>
    	<select name="country">
    Put a </div> at the end of the selections and remove that </p>
    Get rid position: absolute; on what comes next like the Website section
    Last edited by sunfighter; 04-08-2013 at 07:48 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #13
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, it's worked for the select but now all the other field went into one below the other, even though I did not touch anything... I'm losong all my hairs. Any ideas, please?have a look at the page.

    qim
    Last edited by qim; 04-08-2013 at 07:53 PM.

  • #14
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Also do this to the css
    Code:
    .maincontent {
    overflow: auto;
    background: #BABD98; /*demo only*/
    width: 500px;
    padding-left: 60px;
    margin: 0 auto;
    }
    Your just going to restyle each thing as it comes up. removing the position: absolute; means you have to restyle. Stay clam. do things one step at a time and view the results.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #15
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    Thanks

    It has centered the boxes which was the next thing I wanted to do, but from the country down, once I changed the select all the boxes are not paired.

    Before you sorted out the country select, 'website' which is the only one that is not supposed to be paired was strangely on the right when I though everything was floated left. Since sorting out the 'country' all boxes seem to go along with whatever is placing 'website' to the right

    I found the problem: there was a </div> missing at the end of the countries.

    Now the last proble is the fact that 'website is at the right. It should be centered. I'll try <center>
    Last edited by qim; 04-08-2013 at 08:33 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •