Jump to content



Photo

Sticky Forms

php

  • Please log in to reply
5 replies to this topic

#1 Marie

Marie

    Advanced Member

  • Members
  • PipPipPip
  • 121 posts
  • LocationToronto, Canada

Posted 24 December 2011 - 11:01 AM

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

#2 Antonio Conte

Antonio Conte

    Advanced Member

  • Members
  • PipPipPip
  • 1,035 posts
  • LocationOslo, Norway

Posted 25 December 2011 - 4:34 PM

Css is how you should alter the presentation. Something like:


option {
   padding-left: 3px;
}

Should give them some space.
  • 0

#3 Marie

Marie

    Advanced Member

  • Members
  • PipPipPip
  • 121 posts
  • LocationToronto, Canada

Posted 26 December 2011 - 10:53 AM

Thank you. I will give this a try but will have to get back to the forum later.

Marie
  • 0

#4 Antonio Conte

Antonio Conte

    Advanced Member

  • Members
  • PipPipPip
  • 1,035 posts
  • LocationOslo, Norway

Posted 27 December 2011 - 8:55 AM

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. :)
  • 0

#5 Marie

Marie

    Advanced Member

  • Members
  • PipPipPip
  • 121 posts
  • LocationToronto, Canada

Posted 12 March 2012 - 10:56 PM

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

#6 Antonio Conte

Antonio Conte

    Advanced Member

  • Members
  • PipPipPip
  • 1,035 posts
  • LocationOslo, Norway

Posted 13 March 2012 - 1:25 AM

You need some kind of check like isset().

<textarea name="comments" rows="5" cols="45" ><?php if (isset($_POST['comments'])) { echo $_POST['comments']; } ?></textarea>

That will remove the error.
  • 1