Help creating order form

**Medyman** · 05-17-2008, 03:44 AM

Can you post what you have so far?

**Twilightrose917** · 05-17-2008, 03:48 AM

yeah give me a minute. ... do you want just the part i'm working on, or the whole thing?

um... I got something to appear how I wanted it to, but now I don't know how to do the textbox to come after it...

**Medyman** · 05-17-2008, 03:49 AM

It might be easier for you to work if you change

Code:

.hidden {
	display:none;
}

to

Code:

.hidden {
	display:block;
}

You'll need to change it back once youre done. But this way you don't need to click each checkbox everytime to test.

**Twilightrose917** · 05-17-2008, 03:57 AM

oh thanks - that is easier. here's the code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 

xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Ordering</title>

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
<style type="text/css">

<!--
body,td,th {
	font-family: Papyrus;
	font-size: 16pt;
	color: #FFFFFF;
}
body {
	background-color: #000000;
}
a {
	font-size: 14pt;
	color: #FF0000;
}
a:link {
	text-decoration: underline;
}
a:visited {
	text-decoration: 

underline;
	color: #0099FF;
}
a:hover {
	text-decoration: none;
}
a:active {
	

text-decoration: underline;
}
.style1 {color: #FF0000}
.style2 {color: #3300CC}
-->

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some 

right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this 

attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

.hidden {
	display:block;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}
</style>

</head>


<body>

<script language=JavaScript>

<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by 

DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Sorry, 

right-clicking isn't allowed.";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if 

(document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if 

(document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// --> 

</script>

<table width="750" border="1" cellspacing="2" cellpadding="1" align="center">

  <tr>
    
<td width="85"><div align="center"><a href="index.html">Home</a></div></td>
    
<td width="136"><div align="center"><a href="about us.html">About Us</a></div></td>

<td width="247"><div align="center"><a href="our services.html">Available 

Services</a></div></td>
    
<td width="117"><div align="center"><a href="artwork.html">Artwork</a></div></td>
    
<td width="131"><div align="center"><a href="ordering.html">Ordering</a></div></td>
  
</tr>

</table>

<br><br>

<form id="myform" class="cssform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress" value="" />
</p>

<p>
<label for="comments">Mailing Address:</label>
<textarea id="mailingaddress" rows="5" cols="25"></textarea>
</p>


<p>
<label for="services">Services:</label>
<input type="checkbox" name="services" value="logo_design" 

onClick="toggle_visibility(this.value)" /> Logo Design<br />
<input type="checkbox" name="services" value="business_card" class="threepxfix" 

onClick="toggle_visibility(this.value)" /> Business Card Design <br />
<input type="checkbox" name="services" value="web_graphics" class="threepxfix" 

onClick="toggle_visibility(this.value)" /> Web Graphics <br />
<input type="checkbox" name="services" value="flyers" class="threepxfix" 

onClick="toggle_visibility(this.value)" /> Flyers/Handouts <br />
<input type="checkbox" name="services" value="notecards" class="threepxfix" 

onClick="toggle_visibility(this.value)" /> Notecards <br />
<input type="checkbox" name="services" value="other" class="threepxfix" 

onClick="toggle_visibility(this.value)" 	/> Other <br />
</p>

<p id="logo_design" class="hidden">
<label for="services">Logo Design:</label>
 <br>Company Name: <br> <textbox id="companyname"></textbox>

</p>
<p id="business_card" class="hidden">
<label for="services">Business Card Design:</label>
</p>
<p id="web_graphics" class="hidden">
<label for="services">Web Graphics:</label>
</p>
<p id="flyers" class="hidden">
<label for="services">Flyers/Handouts:</label>
</p>
<p id="notecards" class="hidden">
<label for="services">Notecards:</label>
</p>
<p id="other" class="hidden">
<label for="services">Other:</label>
</p>

<br>
<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="Reset" />
</div>

<br>

</form>
</body>
</html>

i wasn't sure if you needed all of it or just what i was working on, but the part i'm working on is:

HTML Code:

<p id="logo_design" class="hidden">
<label for="services">Logo Design:</label>
 <br>Company Name: <br> <textbox id="companyname"></textbox>

so far I haven't had a lot of success getting the textbox to show. Do I need to do that in CSS or something?

**thetestingsite** · 05-17-2008, 04:01 AM

change textbox to textarea.

Hope this helps.

**Twilightrose917** · 05-17-2008, 04:06 AM

I suppose that might be a good thing to script correctly... thanks - it did work.

**Twilightrose917** · 05-17-2008, 04:19 AM

okay - now that I've got that figured out, this is what i have so far:

HTML Code:

<p id="logo_design" class="hidden">
<label for="services">Logo Design:</label>
 <br>Company Name: <br> <textarea id="companyname"></textarea>
<br>Business Description: <br><textarea id="description"></textarea>
</p>

<p id="business_card" class="hidden">
<label for="services">Business Card Design:</label>
<br><br>If you have a logo and want it used on your card, we will need a copy of it. If you 
do not have a logo but want one, please fill out the information for Logo Design as 
well.<br>Company Name:<br><textarea id="companyname"></textarea>
<br>Company Contact:<br><textarea id="companycontact">(Employee/Manager) Name:
Phone #:
Fax # (if applicable):
(company) Email address:
Anything else you want on the card:</textarea>
</p>

how do I make the textareas smaller and/or wider? And is it possible to make it so that

"If you have a logo and want it used on your card, we will need a copy of it. If you do not have a logo but want one, please fill out the information for Logo Design as well."

streches across the whole page instead of being in the column like that? I tried to do a couple things with it but instead ended up messing up the alignment for the textareas following it...

**thetestingsite** · 05-17-2008, 02:25 PM

how do I make the textareas smaller and/or wider?

Edit the following in your css:

Code:

.cssform textarea{
width: 250px;
height: 150px;
}

**Medyman** · 05-17-2008, 02:31 PM

how do I make the textareas smaller and/or wider?

Use cols and rows as well as make the changes to CSS that thetestingsite mentions above.
http://www.w3schools.com/TAGS/tag_textarea.asp

And is it possible to make it so that

"If you have a logo and want it used on your card, we will need a copy of it. If you do not have a logo but want one, please fill out the information for Logo Design as well."

streches across the whole page instead of being in the column like that? I tried to do a couple things with it but instead ended up messing up the alignment for the textareas following it...

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

Also, instead of <textarea> you should be using <input type="text"> for a great number of those fields. The textarea should only be used when you have multiple lines of text you need to have inputted. Something like someone's name or company affilliation can be fit into a text box.
http://www.w3schools.com/TAGS/tag_input.asp

**Twilightrose917** · 05-17-2008, 11:18 PM

thanks you two. I've almost got everything done for the individual services, but I want to put in a dropdown list under a couple things... how do I do that?