Jump to content
Larry Ullman's Book Forums

Sticky Forms


Recommended Posts

Hello,

 

It seems when I try to add some space between the form field and any visible wording, I lose the form's "stickiness" and also the hints to tell people to fill out a certain field, if it has been done incorrectly. I would like my forms to look nice but can't seem to override this in CSS or in the php code.

 

Marie.

Link to comment
Share on other sites

Look like I rushed the explanation a bit. After the second read-through, it looks like you want to seperate the exlanatory text from the input field, like:

 

Fill out first name: -spacing- [input field]

 

This is how you do it:

1. Start by getting the (X)Html right. Something like

<!-- Inside a <form>-tag -->
<div>
  <label for="a-field">Explanatory text</label>
  <input name="a-field" type="text" title="Description for a-field" value="" /> 
</div>
<div>
  <label for="another-field">Explanatory text</label>
  <input name="another-field" type="text" title="Description for another-field" value="" /> 
</div>

 

2. And the css:

 

/* Align divs */
form div {
float: left;
width: 100%;
height: 40px;
clear: both;
padding: 10px;
}

/* Align label and inputs */
form label, form input {
width: 45%;
line-height: 2.5;
height: 30px;
display: block;
float: left;
clear: none;
}

 

This will allow you to style the text and input fields. Change the CSS to fit your needs. :)

Link to comment
Share on other sites

  • 2 months later...

A slight variation to this problem.

 

When I try to add stickiness to the text area I get an undefined variable error. Following is my code.

 

<textarea name="comments" rows="5" cols="45" ><?php echo $comments; $PostANoticeTBR_errors; ?> </textarea>

 

I have played around with the code and I seem to get an undefined variable no matter what I do.

 

Marie

Link to comment
Share on other sites

 Share

×
×
  • Create New...