Jump to content

Recommended Posts

Hi all i was testing a bit with styling a form and i was wondering if someone can confirm or deny if it is possible to have div's inside a form i.e.

<div id="wrapper" style="position:relative;">
  <form action="#" method="post">
    <div id="left" style="position:absolute; left:1px;"> Some stuf inside here</div>
    <div id="right" style="position:absolute; right:1px;">Some stuff inside here</div>
  </form>
</div>

for some reason i can't seem to get it to work.

Or should i maybe work with the old schools.

so 2 questions:

1) are divs inside forms possible?

2) how to style it awesome ::)

 

see attachment for a graphical idea

 

[attachment deleted by admin]

Link to comment
https://forums.phpfreaks.com/topic/217388-fancy-forms/
Share on other sites

hehe I fixed it's at-least for the div's inside the form, so that's possible.

The only thing i can't figure out is how to prevent the inside div's to overlap the wrapper.

I have this code:

<div id="left" style="margin:1px;background:#ff6600;border: 1px solid white;">
                   <p style="font-family: arial; color:white;">enter values</p>
                     
                        <div id="form_wrapper" style="position:relative;">
                            <form action="index.php" method="post">
                                <div id="left_form" style="float:left;">
                                   <textarea name="blablabla" rows="4" cols="20"></textarea>
                                </div>
                                <div id="right_form" style="float:left;">
                                  <input id="bla" type="text" name="bla" value="" /> 
                                </div>
                                <input type="submit" name="submit_users" value="generate" />
                            </form>
                        </div>
                </div>  

 

any help would be helpful ::)

 

see attachment for the overlapping

 

[attachment deleted by admin]

Link to comment
https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128750
Share on other sites

Basically you just need a clear at the bottom of your form. The floats "float" and don't allow the parent div to detect how tall it's supposed to be. I don't know why this is the standard, but I know if you add <div style="clear:both;"> </div> as the last element inside the form tag. That should allow the parent div to expand to the proper size.

Link to comment
https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128963
Share on other sites

I just tried your clear both trick on the last div inside the form. That does work in a way making the container div stretch to the height of the inner elements, but it doesn't let them float next to each other but instead there are on top of each other:

 

I did:

<div id="left" style="margin:1px;background:#ff6600;border: 1px solid white;">
                   <p style="font-family: arial; color:white;">enter values</p>
                     
                        <div id="form_wrapper">
                            <form action="index.php" method="post">
                                <div id="left_form" style="float:left;">
                                   <textarea name="blablabla" rows="4" cols="20"></textarea>
                                </div>
                                <div id="right_form" style="clear:both;">
                                  <input id="bla" type="text" name="bla" value="" />
                                </div>
                                <input type="submit" name="submit_users" value="generate" />
                            </form>
                        </div>
                </div>

Hmm maybe add an extra div inside the form? That sound in a way as a bad practise. can someone confirm or deny?

 

-edit: I used your trick by adding an extra div at the bottom and i think it worked.

<div id="left" style="margin:1px;background:#ff6600;border: 1px solid white;">
                   <p style="font-family: arial; color:white;">enter values</p>
                     
                        <div id="form_wrapper">
                            <form action="index.php" method="post">
                                <div id="left_form" style="float:left;">
                                   <textarea name="blablabla" rows="4" cols="20"></textarea>
                                </div>
                                <div id="right_form" style="float:left;">
                                  <input id="bla" type="text" name="bla" value="" />
                                </div>
                                <input type="submit" name="submit_users" value="generate" />
                            </form>
                                  <div style="clear:both"></div> <!--  EXTRA DIV TO DO SOME MAGIC -->
                        </div>
                </div>

 

Could anyone say if this is a good practise? (the adding of an extra "clearing div" instead of overflow hidden) i heared somewhere that using too many divs is named divitis

Link to comment
https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128979
Share on other sites

The clear div should be the last element inside your <form> tag - not somewhere in the middle.

 

The reason your divs are not next to each other is divs are 100% wide by default. If you want them to float next to each other, you have to assign a height and width. As to divitus, I'd say you already have it. Here's the same code with only two divs.

 

<head>
<style type="text/css">
  textarea { float:left; }
  input {float:left; }
  .clear {clear:both; }
  #left {
    margin:1px;
    background:#ff6600;
    border: 1px solid white;
  }
  p.pstyle {
    font-family: arial;
    color:#FFFFFF;
  }
</style>
</head>
<body>
<div id="left">
  <p class="pstyle">enter values</p>
  <div id="form_wrapper">
    <form action="index.php" method="post">
      <textarea name="blablabla" rows="4" cols="20"></textarea>
      <input id="bla" type="text" name="bla" value="" />
      <input type="submit" name="submit_users" value="generate" />
      <div class="clear"> </div>
    </form>
  </div>
</div>
</body>

Link to comment
https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128992
Share on other sites

Oh wow!! :o that looks nice. I only thought div's could float. I haven't tested it yet but this sure looks great.

Thanks a lot for helping me!

 

-edit: it works like a charm! Thanks ::)

-edit2: this is a big discovery for me the floating of other elements than div's ::) make its all easier and can cure my divitis haha

Link to comment
https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1128994
Share on other sites

Rather than using a clearing div, you can put overflow:auto on the container. Works mostly the same as overflow:hidden, except that sometimes hidden makes things disappear.

 

Be warned that relatively positioned elements inside an element with overflow:auto will force scrollbars on the container. But it's best to avoid relative positioning for the most part anyways.

Link to comment
https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1129050
Share on other sites

There is a great article here on creating accessible forms:

 

http://www.alistapart.com/articles/prettyaccessibleforms

 

It's a really great read and insight. The concept of using ordered lists is pretty cool :)

 

With regards to your above issue, overflow:hidden; on the container is a known method and I believe it works in all browsers bar the quirks modes ones such as IE6.

Link to comment
https://forums.phpfreaks.com/topic/217388-fancy-forms/#findComment-1129340
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.