These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:04 pm Advanced search

LOOKING FOR GUIDANCE

If you are stuck or have questions regarding HTML or other Web technologies, ask your questions here. No question too dumb!
Topic locked

LOOKING FOR GUIDANCE

Postby cesar1971 » Sun Nov 11, 2012 5:14 pm

HI GUYS,

CAN SOMEBODY TELL ME IF I COMING IN THE RIGHT DIRECTION, TRYING TO MAKE THIS FOR WORK.
WHAT WOULD BE THE BEST WAY TO GET THE COLLECTED DATA SEND TO MY EMAIL?
IS THIS THE RIGHT CODE FOR THIS TYPE OF FORM?
HERE IS THE CODE.
THANKS
Code: Select all
<!DOCTYPE html>

<html>
<head><style>
body {
   background: #ffffff;
   margin: 0;
   padding: 20px;
   line-height: 1.4em;
   font-family: tahoma, arial, sans-serif;
   font-size: 62.5%;
}

table {
   width: 80%;
   margin: 0;
   background: #FFFFFF;
   border: 1px solid #333333;
   border-collapse: collapse;
   align: middle;
}

td, th {
   border-bottom: 1px solid #333333;
   padding: 6px 16px;
   text-align: left;
}

th {
   background: #EEEEEE;
}

caption {
   background: #E0E0E0;
   margin: 0;
   border: 1px solid #333333;
   border-bottom: none;
   padding: 6px 16px;
   font-weight: bold;
   font-size:14px;
}
button (
          font-family: tahoma, arial, sans-serif;
      )

</style>
<title>East Coast Wholesale Order Form</title></head>
<body>

<form>

<table>
<caption>East Coast Wholesale Flowers - Online Order Form</caption>

<tr>
<td>Full name:</td>
<td><input type="text" id="name"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Account Name:</td>
<td><input type="text" id="accountName"></td>

<td>Pick Up or delivery:</td>
<td>
<select>
<option value="pickUp">Pick Up</option>
<option value="delivery">Delivery</option>
</select>
</td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="tel" id="tel"></td>
<td>Date Order Needed:</td>
<td><input type="date" id="date"></td>
</tr>

<tr>
<th>Holland In House Saturday</th>
<th>Check</th>
<th>Quantity</th>
<th>Price?</th>
</tr>
<tr>
<td>Mini Calla-White:</td>
<td><input type="checkbox" id="whiteMinicalla"></td>
<td>
<select>
<option value="white minicalla"></option>
<option value="1white minicalla">1</option>
<option value="2white minicalla">2</option>
<option value="3white minicalla">3</option>
<option value="4white minicalla">4</option>
<option value="5white minicalla">5</option>
<option value="6white minicalla">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Mini Calla-Eggplant:</td>
<td><input type="checkbox" id="eggplantMinicalla"></td>
<td>
<select>
<option value="eggplant minicalla"></option>
<option value="2eggplant minicalla">2</option>
<option value="3eggplant minicalla">3</option>
<option value="4eggplant minicalla">4</option>
<option value="5eggplant minicalla">5</option>
<option value="6eggplant minicalla">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Mini Calla-Mango:</td>
<td><input type="checkbox" id="mangoMinicalla"></td>
<td>
<select>
<option value="mango minicalla"></option>
<option value="1mango minicalla">1</option>
<option value="2mango minicalla">2</option>
<option value="3mango minicalla">3</option>
<option value="4mango minicalla">4</option>
<option value="5mango minicalla">5</option>
<option value="6mango minicalla">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Clematis:</td>
<td><input type="checkbox" id="clematis"></td>
<td>
<select>
<option value="clematis"></option>
<option value="1clematis">1</option>
<option value="2clematis">2</option>
<option value="3clematis">3</option>
<option value="4clematis">4</option>
<option value="5clematis">5</option>
<option value="6clematis">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Craspedia billy balls:</td>
<td><input type="checkbox" id="clematis"></td>
<td>
<select>
<option value="clematis"></option>
<option value="1clematis">1</option>
<option value="2clematis">2</option>
<option value="3clematis">3</option>
<option value="4clematis">4</option>
<option value="5clematis">5</option>
<option value="6clematis">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Cymbidium/Green:</td>
<td><input type="checkbox" id="cymbidium/Green"></td>
<td>
<select>
<option value="cymbidium/green"></option>
<option value="1cymbidium/green">1</option>
<option value="2cymbidium/green">2</option>
<option value="3cymbidium/green">3</option>
<option value="4cymbidium/green">4</option>
<option value="5cymbidium/green">5</option>
<option value="6cymbidium/green">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Cymbidium/White:</td>
<td><input type="checkbox" id="cymbidium/White"></td>
<td>
<select>
<option value="cymbidium/white"></option>
<option value="1cymbidium/white">1</option>
<option value="2cymbidium/white">2</option>
<option value="3cymbidium/white">3</option>
<option value="4cymbidium/white">4</option>
<option value="5cymbidium/white">5</option>
<option value="6cymbidium/white">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Cymbidium/Brown:</td>
<td><input type="checkbox" id="cymbidium/Brown"></td>
<td>
<select>
<option value="cymbidium/brown"></option>
<option value="1cymbidium/brown">1</option>
<option value="2cymbidium/brown">2</option>
<option value="3cymbidium/brown">3</option>
<option value="4cymbidium/brown">4</option>
<option value="5cymbidium/brown">5</option>
<option value="6cymbidium/brown">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Cymbidium/Yellow:</td>
<td><input type="checkbox" id="cymbidium/Green"></td>
<td>
<select>
<option value="cymbidium/yellow"></option>
<option value="1cymbidium/yellow">1</option>
<option value="2cymbidium/yellow">2</option>
<option value="3cymbidium/yellow">3</option>
<option value="4cymbidium/yellow">4</option>
<option value="5cymbidium/yellow">5</option>
<option value="6cymbidium/yellow">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Hydrangea Dutch Assorted 50 cm:</td>
<td><input type="checkbox" id="hydrangeaDutch"></td>
<td>
<select>
<option value="hydrangeaDutch"></option>
<option value="1hydrangeaDutch">1</option>
<option value="2hydrangeaDutch">2</option>
<option value="3hydrangeaDutch">3</option>
<option value="4hydrangeaDutch">4</option>
<option value="5hydrangeaDutch">5</option>
<option value="6hydrangeaDutch">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Ilex Gold:</td>
<td><input type="checkbox" id="ilexGold"></td>
<td>
<select>
<option value="ilexGold"></option>
<option value="1ilexGold">1</option>
<option value="2ilexGold">2</option>
<option value="3ilexGold">3</option>
<option value="4ilexGold">4</option>
<option value="5ilexGold">5</option>
<option value="6ilexGold">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Ilex Orange:</td>
<td><input type="checkbox" id="ilexOrange"></td>
<td>
<select>
<option value="ilexOrange"></option>
<option value="1ilexOrange">1</option>
<option value="2ilexOrange">2</option>
<option value="3ilexOrange">3</option>
<option value="4ilexOrange">4</option>
<option value="5ilexOrange">5</option>
<option value="6ilexOrange">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Ilex Gold:</td>
<td><input type="checkbox" id="ilexGold"></td>
<td>
<select>
<option value="ilexGold"></option>
<option value="1ilexGold">1</option>
<option value="2ilexGold">2</option>
<option value="3ilexGold">3</option>
<option value="4ilexGold">4</option>
<option value="5ilexGold">5</option>
<option value="6ilexGold">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<th>Italy</th>
<th>Check</th>
<th>Quantity</th>
<th>Price?</th>
</tr>
<tr>
<td><input type="submit" name="submit" value="SUBMIT ORDER"></td>
<td></td>
<td></td>
<td></td>

</tr>
</table>

</form>





</body>












</html>
cesar1971
<h6>
 
Posts: 2
Joined: Wed Oct 24, 2012 6:09 pm

Re: LOOKING FOR GUIDANCE

Postby JAB Creations » Sun Nov 11, 2012 5:28 pm

FIRST OFF WHEN YOU TYPE IN ALL CAPITOL LETTERS IT IS READ BY OTHER PEOPLE AS SCREAMING!!! READ THIS IN YOUR HEAD WITH YOUR VOICE STRESSED SCREAMING AND YOU WILL UNDERSTAND WHY YOU SHOULD NOT DO IT! :roll:

Now, getting to business you had some flaws and I cleaned them up with XHTML. You were missing name attributes on select elements, you did not have a fieldset for the form. The form had no action or method attributes. Since there was no namespace XHTML could not find styling so I fixed that up for you. Also keep your title element as the very first child element of the head element and ensure that how you practice coding is exceptionally strict, this will be a benefit to you for as long as you code.

I'm not going to go to the effort of removing the table since this is a large form. Nothing on this page is of a tabular nature, you simply need to start figuring out how to use CSS effectively. On the upside I liked your clean sense of styling.

In general this is a good (X)HTML example of how your a label, span, input and divisible element should appear in your (X)HTML...

Code: Select all
<div><label for="id_of_form"><span>Label Text</span><input id="id_of_form" name="id_of_form" type="checkbox" value="1" /></label></div>


Here is your code cleaned up using XHTML. Renaming your test pages with an XHTML extension will force the browsers to serve the mime type/media type as application/xhtml+xml and is going to force you to code to higher standards. You can either program with puny text or man up and program applications. 8)

Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>East Coast Wholesale Order Form</title>
<style type="text/css">
body {
   background: #ffffff;
   margin: 0;
   padding: 20px;
   line-height: 1.4em;
   font-family: tahoma, arial, sans-serif;
   font-size: 62.5%;
}
button {font-family: tahoma, arial, sans-serif;}
caption
{
   background: #E0E0E0;
   margin: 0;
   border: 1px solid #333333;
   border-bottom: none;
   padding: 6px 16px;
   font-weight: bold;
   font-size:14px;
}
table
{
   width: 80%;
   margin: 0;
   background: #FFFFFF;
   border: 1px solid #333333;
   border-collapse: collapse;
   align: middle;
}
td, th
{
   border-bottom: 1px solid #333333;
   padding: 6px 16px;
   text-align: left;
}
th {background: #EEEEEE;}
</style>
</head>
<body>

<form action="section/" method="post">
<fieldset>
<table>
<caption>East Coast Wholesale Flowers - Online Order Form</caption>

<tr>
<td>Full name:</td>
<td><input type="text" id="name" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Account Name:</td>
<td><input type="text" id="accountName" /></td>

<td>Pick Up or delivery:</td>
<td>
<select name="">
<option value="pickUp">Pick Up</option>
<option value="delivery">Delivery</option>
</select>
</td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="tel" id="tel" /></td>
<td>Date Order Needed:</td>
<td><input type="date" id="date" /></td>
</tr>

<tr>
<th>Holland In House Saturday</th>
<th>Check</th>
<th>Quantity</th>
<th>Price?</th>
</tr>
<tr>
<td>Mini Calla-White:</td>
<td><input type="checkbox" id="whiteMinicalla" /></td>
<td>
<select name="">
<option value="white minicalla"></option>
<option value="1white minicalla">1</option>
<option value="2white minicalla">2</option>
<option value="3white minicalla">3</option>
<option value="4white minicalla">4</option>
<option value="5white minicalla">5</option>
<option value="6white minicalla">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Mini Calla-Eggplant:</td>
<td><input type="checkbox" id="eggplantMinicalla" /></td>
<td>
<select name="">
<option value="eggplant minicalla"></option>
<option value="2eggplant minicalla">2</option>
<option value="3eggplant minicalla">3</option>
<option value="4eggplant minicalla">4</option>
<option value="5eggplant minicalla">5</option>
<option value="6eggplant minicalla">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Mini Calla-Mango:</td>
<td><input type="checkbox" id="mangoMinicalla" /></td>
<td>
<select name="">
<option value="mango minicalla"></option>
<option value="1mango minicalla">1</option>
<option value="2mango minicalla">2</option>
<option value="3mango minicalla">3</option>
<option value="4mango minicalla">4</option>
<option value="5mango minicalla">5</option>
<option value="6mango minicalla">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Clematis:</td>
<td><input type="checkbox" id="clematis" /></td>
<td>
<select name="">
<option value="clematis"></option>
<option value="1clematis">1</option>
<option value="2clematis">2</option>
<option value="3clematis">3</option>
<option value="4clematis">4</option>
<option value="5clematis">5</option>
<option value="6clematis">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Craspedia billy balls:</td>
<td><input type="checkbox" id="clematis" /></td>
<td>
<select name="">
<option value="clematis"></option>
<option value="1clematis">1</option>
<option value="2clematis">2</option>
<option value="3clematis">3</option>
<option value="4clematis">4</option>
<option value="5clematis">5</option>
<option value="6clematis">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Cymbidium/Green:</td>
<td><input type="checkbox" id="cymbidium-green" /></td>
<td>
<select name="">
<option value="cymbidium/green"></option>
<option value="1cymbidium/green">1</option>
<option value="2cymbidium/green">2</option>
<option value="3cymbidium/green">3</option>
<option value="4cymbidium/green">4</option>
<option value="5cymbidium/green">5</option>
<option value="6cymbidium/green">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Cymbidium/White:</td>
<td><input type="checkbox" id="cymbidium-white" /></td>
<td>
<select name="">
<option value="cymbidium/white"></option>
<option value="1cymbidium/white">1</option>
<option value="2cymbidium/white">2</option>
<option value="3cymbidium/white">3</option>
<option value="4cymbidium/white">4</option>
<option value="5cymbidium/white">5</option>
<option value="6cymbidium/white">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Cymbidium/Brown:</td>
<td><input type="checkbox" id="cymbidium-brown" /></td>
<td>
<select name="">
<option value="cymbidium/brown"></option>
<option value="1cymbidium/brown">1</option>
<option value="2cymbidium/brown">2</option>
<option value="3cymbidium/brown">3</option>
<option value="4cymbidium/brown">4</option>
<option value="5cymbidium/brown">5</option>
<option value="6cymbidium/brown">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Cymbidium/Yellow:</td>
<td><input type="checkbox" id="cymbidium-green" /></td>
<td>
<select name="">
<option value="cymbidium/yellow"></option>
<option value="1cymbidium/yellow">1</option>
<option value="2cymbidium/yellow">2</option>
<option value="3cymbidium/yellow">3</option>
<option value="4cymbidium/yellow">4</option>
<option value="5cymbidium/yellow">5</option>
<option value="6cymbidium/yellow">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Hydrangea Dutch Assorted 50 cm:</td>
<td><input type="checkbox" id="hydrangea-dutch" /></td>
<td>
<select name="">
<option value="hydrangeaDutch"></option>
<option value="1hydrangeaDutch">1</option>
<option value="2hydrangeaDutch">2</option>
<option value="3hydrangeaDutch">3</option>
<option value="4hydrangeaDutch">4</option>
<option value="5hydrangeaDutch">5</option>
<option value="6hydrangeaDutch">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Ilex Gold:</td>
<td><input type="checkbox" id="ilex-gold" /></td>
<td>
<select name="">
<option value="ilexGold"></option>
<option value="1ilexGold">1</option>
<option value="2ilexGold">2</option>
<option value="3ilexGold">3</option>
<option value="4ilexGold">4</option>
<option value="5ilexGold">5</option>
<option value="6ilexGold">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Ilex Orange:</td>
<td><input type="checkbox" id="ilex-orange" /></td>
<td>
<select name="">
<option value="ilexOrange"></option>
<option value="1ilexOrange">1</option>
<option value="2ilexOrange">2</option>
<option value="3ilexOrange">3</option>
<option value="4ilexOrange">4</option>
<option value="5ilexOrange">5</option>
<option value="6ilexOrange">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Ilex Gold:</td>
<td><input type="checkbox" id="ilexgold" /></td>
<td>
<select name="">
<option value="ilexGold"></option>
<option value="1ilexGold">1</option>
<option value="2ilexGold">2</option>
<option value="3ilexGold">3</option>
<option value="4ilexGold">4</option>
<option value="5ilexGold">5</option>
<option value="6ilexGold">6</option>
</select>
</td>
<td></td>
</tr>
<tr>
<th>Italy</th>
<th>Check</th>
<th>Quantity</th>
<th>Price?</th>
</tr>
<tr>
<td><input type="submit" name="submit" value="Submit Order" /></td>
<td></td>
<td></td>
<td></td>

</tr>
</table>
</fieldset>
</form>

</body>
</html>
User avatar
JAB Creations
<aside>
 
Posts: 566
Joined: Tue Mar 13, 2007 4:48 am
Location: Sarasota Florida, USA

Re: LOOKING FOR GUIDANCE

Postby cesar1971 » Sun Nov 11, 2012 9:38 pm

Thanks man :wink:
cesar1971
<h6>
 
Posts: 2
Joined: Wed Oct 24, 2012 6:09 pm
Topic locked

Return to Help & Advice

Who is online

Users browsing this forum: No registered users and 1 guest

 

Who is online

In total there is 1 user online :: 0 registered, 0 hidden and 1 guest (based on users active over the past 5 minutes)
Most users ever online was 129 on Thu Feb 11, 2010 2:54 am

Users browsing this forum: No registered users and 1 guest

Designed by RocketTheme

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group