Web Design Forum: Vertically aligned html form fields / php question - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Vertically aligned html form fields / php question

#1 User is offline   phantomdentist 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 31
  • Joined: 30-December 09
  • Reputation: 0

Posted 07 January 2010 - 09:15 PM

Two seperate questions regarding html forms, in this case ebing use for a basic contact form

1. Am I able to align two form fields vertically? if not is there another way around it for a php / html form? I tried using 2 forms side by side but then couldn't figure out how to hook them up to the php correctly

Below is a picture of what I have and what i wish to achieve as well as my form code

Posted Image

 <form id="columnarForm" action="contact.php" method="get">
        <fieldset style="border:0px solid #999999; margin-bottom:0;" >
          <p>
            
            <label for="firstName1">
              First Name
              <br/>
              <input id="firstName1" name="firstName1" type="text" value="" />
              <br />
              <br />
            </label>
            
            <label for="lastName1">
              Last Name
              <br/>
              <input id="lastName1" name="lastName1" type="text" value="" />
              <br />
              <br/>
            </label>
            
            <label for="emailAddress1">
              Email Address
              <br/>
              <input id="emailAddress1" name="emailAddress1" type="text" value="" />
              <br />
              <br/>
            </label>
            
            <label for="subject1">
              Subject
              <br/>
              <input id="subject1" name="subject1" type="text" value="" />
              <br />
              <br/>
            </label>
       
  Message
  <br/>
  <textarea rows="10" cols="45" id="textArea1" name="textarea1"></textarea>
</p>
 <br />
 <br />
  <input class="submit" type="submit" value="Submit my question"/>
  
  </fieldset>
      </form>


Question 2

I hooked my form fields / button upto my php file. When i fill in the form and send it works and I recieve and email but the message field info is missing. So I get say..

..

Firstname John

Last Name Johnson

Email Address Blah@blah.com

Subject Blah

..

But the message field info does not get added into the email. Not sure what I've done wrong there

php below

<?
$subject="Subject ".$_GET['subject1'];
$headers= "From: ".$_GET['emailAddress1']."\n";
 $headers.='Content-type: text/html; charset=iso-8859-1';
mail("myemail@myhost.com", $subject,  "
<html>
<head>
 <title>Contact letter</title>
</head>
<body>

<br>
  ".$_GET['firstName1']."
  ".$_GET['lastName1']."
  ".$_GET['textArea1']."
</body>
</html>" , $headers);
echo ("Your message was successfully sent!");
?>
<script>
	//resizeTo(300, 300)
	//window.close()
</script>


Thanks in advance for any answers / suggestions
0

#2 User is offline   TopShopper 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 878
  • Joined: 21-July 09
  • Reputation: 14
  • Gender:Male
  • Location:Cardiff, UK
  • Experience:Intermediate
  • Area of Expertise:Coder

Posted 07 January 2010 - 09:19 PM

Hi,

I would put the fields in a table but others will tell you to use CSS,

The 'textArea1' does not come through because you have called it 'textarea1' on the form. It's the name that matters not the id.
PHP is case sensitive.
0

#3 User is offline   Wickham 

  • Web Guru
  • View gallery
  • Group: Moderators
  • Posts: 2,875
  • Joined: 11-June 09
  • Reputation: 257
  • Gender:Male
  • Location:Salisbury UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 08 January 2010 - 07:10 AM

You already have a suitable code structure with label tags and input boxes vertically (except that Message and Submit should have a label).

Remember that some people don't use a mouse (especially blind people) and use the tab key to go from one input to the next and they need the description or label before the input box, so make sure your code progresses logically (you can put boxes side by side as long as the tab key moves logically from one to the next).

You can add a class and float: left; to First Name and Message labels, but you may find that the tab key moves from First Name to Message to Last Name which isn't wrong, just slightly confusing. The submit button must be reached last. Re-code your form and then test with the tab key. The answer may be to have two divs both with float: left; the left one has the labels and input boxes, the right one has the Message and Submit button and with luck the tab key will go through all the left div items first.

I've got several on this page and the one headed "Semantics for forms" has some boxes inline with others but the tab key moves through them left to right http://www.wickham43.net/forms.php

You shouldn't put the input tags in one form and the submit tag in another, the submit tag must be inside the same <form>...</form tags as the action and inputs.

You can put two totally separate forms vertically, as long as each has its own (different) action, input boxes and submit button.
0

#4 User is offline   phantomdentist 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 31
  • Joined: 30-December 09
  • Reputation: 0

Posted 08 January 2010 - 10:01 AM

-Topshopper

Thanks, I combed that code a few times but still didn't see I had not given textArea1 a capital a. Sometimes you just see what you think is there, now what actually is >.<

-Wickham

Thanks, for some reason it didnt click that I could just use floats for the form fields just like everything else.

Cheers guys got it fully functional and looking as I wish now.
0

#5 User is offline   Lev 

  • -'-
  • PipPipPipPipPip
  • Group: Members
  • Posts: 3,946
  • Joined: 28-October 09
  • Reputation: 258
  • Gender:Male
  • Location:Russia
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 08 January 2010 - 11:42 AM

Hi,
You can specify any path for cursor on any sequence of inputs - with help of TABINDEX parameter.
0

#6 User is offline   phantomdentist 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 31
  • Joined: 30-December 09
  • Reputation: 0

Posted 08 January 2010 - 03:21 PM

Thanks Lev

I was looking at the tabindex value of some of my spry collapsible panels earlier and was wondering what it did.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users