HTML Help

Polemos

United States160 Posts

August 09 2011 14:54 GMT

Hi!
Recently, I've been teaching myself HTML and CSS, with a bit of javascript thrown in. Unfortunately, I have run into a block, and I can't seem to find an error with my code (it's really, really simple.) I've looked at it for hours, and I still can't find an error. I was wondering if anyone could help :/ I'll put all the info in a spoiler below.

+ Show Spoiler +

http://dev.ieworks.net/devtest/location_add.html

+ Show Spoiler +

<!DOCTYPE html>
<head>
<title>Pop-Up Location Form</title>
</head>
<body>
<table>
<tr>
<td>Name: <input type="text" id="loc_name" /></td>
</tr>
<tr>
<td >Address 1: <input type="text" id="loc_add_1" /></td>
</tr>
<tr>
<td>Address 2: <input type="text" id="loc_add_2" /></td>
</tr>
<tr>
<td>City:<input type="tex" id="city_add" /></td>
<td>State: <select name="state" />
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select></td>
<td>Zip Code:<input type="Text" id="loc_zip" /></td>
</tr>
<tr>
<td><input type="button" id="button_cancel" value="Cancel" /></td>
<td><input type="button" id="button_save" value="Save" /></td>
</tr>
</table>
</body>
</html>

P.S. I've run it through a code validator to no avail, and I've tried using Firebug, but I can't figure out how to use it ._.

Deleted User 101379

4849 Posts

August 09 2011 14:58 GMT

On August 09 2011 23:54 Polemos wrote:
Hi!
Recently, I've been teaching myself HTML and CSS, with a bit of javascript thrown in. Unfortunately, I have run into a block, and I can't seem to find an error with my code (it's really, really simple.) I've looked at it for hours, and I still can't find an error. I was wondering if anyone could help :/ I'll put all the info in a spoiler below.

+ Show Spoiler +

http://dev.ieworks.net/devtest/location_add.html

+ Show Spoiler +

P.S. I've run it through a code validator to no avail, and I've tried using Firebug, but I can't figure out how to use it ._.

<select name="state" />

There is your mistake.
Remove the / in the opening select tag.

NihiLStarcraft

Denmark1413 Posts

August 09 2011 14:58 GMT

It'd probably save time if you let us know what the problem is? :p

EDIT: Ninja'd.

Polemos

United States160 Posts

August 09 2011 14:59 GMT

I have done so, but it still hasn't done anything with my formatting issues ._.

Polemos

United States160 Posts

August 09 2011 15:00 GMT

Look at the first spoiler. Since it's in a table, all the text inputs, and name address & w/e should be lining up, but they aren't. My issue is finding out why they aren't lining up.

Deleted User 101379

4849 Posts

August 09 2011 15:01 GMT

On August 09 2011 23:59 Polemos wrote:
I have done so, but it still hasn't done anything with my formatting issues ._.

Ok, what are your formatting issues then?
Edit: Now i got Ninjaed.

They are aligning up exactly like you wrote in the code.
The layout is exactly as defined.

However, your table structure is broken in a logical/semantical way, not a syntactical way.

A table has a defined number of rows and columns and should have the same number of columns in every row.
Your first 3 rows only have 1 column (td)


		<tr> 
->>>			<td>Name: <input type="text" id="loc_name" /></td> 
		</tr> 
		<tr> 
->>>			<td	>Address 1: <input type="text" id="loc_add_1" /></td> 
		</tr> 
		<tr> 
->>>			<td>Address 2: <input type="text" id="loc_add_2" /></td> 
		</tr>

Your fourth row has 3


		<tr> 
->>>			<td>City:<input type="tex" id="city_add" /></td> 
->>>			<td>State: <select name="state"> 
	<option value="AL">Alabama</option> 
..snip..
</select></td> 
->>>	<td>Zip Code:<input type="Text" id="loc_zip" /></td> 
	</tr>

Your fifth row has 2:


	<tr> 
->>>	<td><input type="button" id="button_cancel" value="Cancel" /></td> 
->>>	<td><input type="button" id="button_save" value="Save" /></td> 
	</tr>

You probably want to have the label in a seperate column.

Polemos

United States160 Posts

August 09 2011 15:02 GMT

Look up one post

Moff

United Kingdom166 Posts

August 09 2011 15:07 GMT

http://jsfiddle.net/BjgW4/

Is that what you wanted?

Since you put two <td> inside one <tr> it messed up the formatting.

Polemos

United States160 Posts

August 09 2011 15:13 GMT

So, if I understand you correctly Morf, I can only have like
<tr>
<td>xxxx</td>
</tr>

and no other TD's in there?

Polemos

United States160 Posts

August 09 2011 15:13 GMT

#10

Assuming that I want them to be all lined up

lolsixtynine

United States600 Posts

August 09 2011 15:17 GMT

#11

No, you can have multiple tds in a tr, you just need to have the same number in each or the formatting can get wacky. Normally if you have the same number of td's in each row, it will automatically align them into columns.

Edit for example:

You currently have

<td>Name: <input type="text" id="loc_name" /></td>

You want:

<td>Name: </td> 
<td> <input type="text" id="loc_name" /></td>

Deleted User 101379

4849 Posts

August 09 2011 15:19 GMT

#12

On August 10 2011 00:13 Polemos wrote:
So, if I understand you correctly Morf, I can only have like
<tr>
<td>xxxx</td>
</tr>

and no other TD's in there?

You can have as many as you want, you should just always have the same number of <td>s in all <tr>s of the same table.

<tr> starts a new row (table row)
<td> starts a new column (table data)

A table is always a rectangle.
For example, a table 2 cells wide, 5 rows high would be:
(Using dummy content)


<table>
  <tr>
    <td>Name</td>
    <td><input type="text" name="name" /></td>
  </tr>
  <tr>
    <td>City</td>
    <td><input type="text" name="city" /></td>
  </tr>
  <tr>
    <td>ZIP code</td>
    <td><input type="text" name="zip" /></td>
  </tr>
  <tr>
    <td>State</td>
    <td><input type="text" name="state" /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" value="save" /></td>
    <!-- colspan means, this column should span over 2 columns, it counts double in this case -->
  </tr>
</table>

Polemos

United States160 Posts

August 09 2011 15:22 GMT

#13

Ahhhhhhhhhhhhhh!! I understand ! Thank you all very much!

Trowabarton756

United States870 Posts

August 09 2011 15:45 GMT

#14

Basically bra when i looked at your page it was fine in firefox, but you gotta understand that just because the code works in 1 browser doesn't mean it will work in another(i assume you're looking at this in IE or another browser) so make sure to check it in as many browsers as you can to make sure the code properly works.

Marou

Germany1371 Posts

August 09 2011 16:58 GMT

#15

i wouldn't recomend using tables for your layout, but rather use div and css to have boxes layed out the same way as a table does it. That's just my opinion tho, many people still use tables, but if you are serious about html/css you shouldn't rely on them to much.

aike

United States1629 Posts

August 09 2011 17:34 GMT

#16

On August 10 2011 01:58 Marou wrote:
i wouldn't recomend using tables for your layout, but rather use div and css to have boxes layed out the same way as a table does it. That's just my opinion tho, many people still use tables, but if you are serious about html/css you shouldn't rely on them to much.

This exactly. Tables are supposed to be for tabular data. Like say you want to display the results of all info that has ever been submitted with the current from, you'd want it to be laid out like a spreadsheet. But for actual page formatting you should use CSS + Divs and other HTML elements. With CSS you can position things anywhere you want on the page, you aren't stuck with the constraints of a table.

And to Trowabarton756, that isn't completely true. These days as long as you are using proper CSS and HTML your pages should look the same in all browsers. I haven't had any issues with different stuff in different browsers in a long time.

KeksX

Germany3634 Posts

August 09 2011 17:59 GMT

#17

On August 10 2011 00:19 Morfildur wrote:

Show nested quote +

You can have as many as you want, you should just always have the same number of <td>s in all <tr>s of the same table.

Not (100%) true, you can just use colspans !

Integra

Sweden5626 Posts

August 09 2011 18:08 GMT

#18

I just read your code, why are you using CSS when you clearly aren't using it? Your form should not be formatted through tables, since you are using CSS. Just setup the form using the List tag and then format it with CSS.

SarR

476 Posts

August 09 2011 18:16 GMT

#19

I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995

Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.

Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you.

KeksX

Germany3634 Posts

August 09 2011 18:20 GMT

#20

On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995

Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.

Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you.

"to break a butterfly on a wheel"

He needs a table. He makes a table. :3

Integra

Sweden5626 Posts

August 09 2011 18:23 GMT

#21

To help illustrate here is a example:

CSSCode:
+ Show Spoiler +

*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}

div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}

div.box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}

div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}

div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}

div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}

div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}

div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}

HTML CODE creating Forms without the use of tables with the above CSS:

+ Show Spoiler +

<form> <div class="box">
<h1>Contact Form :
</h1>
<label>
<span>Full name</span>
<input type="text" class="input_text" name="name" id="name"/>
</label>
<label>
<span>Email</span>
<input type="text" class="input_text" name="email" id="email"/>
</label>
<label>
<span>Subject</span>
<input type="text" class="input_text" name="subject" id="subject"/>
</label>
<label>
<span>Message</span>
<textarea class="message" name="feedback" id="feedback"></textarea>
<input type="button" class="button" value="Submit Form" /> </label>
</div>
</form>

As you can see the form contains less code compared to the table, and you don't have to struggle with all the colspan, width of each row and so forth Tables are just... bad in every way.

Integra

Sweden5626 Posts

August 09 2011 18:24 GMT

#22

On August 10 2011 03:20 KeksX wrote:

Show nested quote +

"to break a butterfly on a wheel"

He needs a table. He makes a table. :3

He doesn't need a table, he needs a form. Tables are for structuring complex data which contains 8 or more fields with X amount of rows. This is just a simple form and it's hard as hell designing a table compared to a list. he is doing 10 times the work for no real benefit.

SarR

476 Posts

August 09 2011 18:28 GMT

#23

On August 10 2011 03:20 KeksX wrote:

Show nested quote +

"to break a butterfly on a wheel"

He needs a table. He makes a table. :3

Im not sure about what you're alluding to, but if you're referring to effort necessary vs the benefits, then that is also an argument in favor of CSS.

The only way Id ever consider recommending tables is for laying out dynamic data, for example, data queried from a database.

KeksX

Germany3634 Posts

August 09 2011 18:30 GMT

#24

On August 10 2011 03:28 SarR wrote:

Show nested quote +

I mean, he's only learning the very basics. It would be better to start slowly then to get him into stuff he doesn't properly understand yet...

Integra

Sweden5626 Posts

August 09 2011 18:35 GMT

#25

On August 10 2011 03:30 KeksX wrote:

Show nested quote +

I mean, he's only learning the very basics. It would be better to start slowly then to get him into stuff he doesn't properly understand yet...

its tables that are hard, lists are simple as hell.

SarR

476 Posts

August 09 2011 18:42 GMT

#26

EDIT: Spoilered for being a dumbass and not readying Integra's post thoroughly. Thought he was actually arguing for the use of tables over CSS.

+ Show Spoiler +

On August 10 2011 03:23 Integra wrote:

Show nested quote +

To help illustrate here is a example:

CSSCode:
+ Show Spoiler +

HTML CODE creating Forms using List instead of Tables with the above CSS:

+ Show Spoiler +

As you can see the form contains less code compared to the table, and you don't have to struggle with all the colspan, width of each row and so forth Tables are just... bad in every way.

Cant argue with that. All the same its a very bad practice. For something simple like this for demonstration purposes then yes.

However, if he plans to put his HTML skills to practical use one day then he would be in a world of hurt if he practices this way of HTML coding.

Software development, and anything similar like website development is NEVER finished, its always a work-in-progress. When he needs to tweak the layout, which is a dead certainty as clients or whoever you're doing this for will want more, you'd find then that tweaking the CSS is a lot less stressful than rummaging through countless lines of table code just to change some simple thing.

Another very powerful benefit of using CSS is that you can re-use it very easily to arrange other elements in a similar fashion by manipulating the CSS selectors. With tables you'd be copying that code all over the place, when you could have that layout code all in one place using CSS and subsequently apply them to as many elements on as many html forms as you like with little more than a simple reference to the stylesheet file.

TLDR; I think its better he starts off with good practices, even with simple things like this.

Integra

Sweden5626 Posts

August 09 2011 18:52 GMT

#27

On August 10 2011 03:42 SarR wrote:

Show nested quote +

On August 10 2011 03:23 Integra wrote:

To help illustrate here is a example:

CSSCode:
+ Show Spoiler +

HTML CODE creating Forms using List instead of Tables with the above CSS:

+ Show Spoiler +

As you can see the form contains less code compared to the table, and you don't have to struggle with all the colspan, width of each row and so forth Tables are just... bad in every way.

what? are you responding to my post you quoted, because that essentially demonstrates what you just talked about why tables are bad.

SarR

476 Posts

August 09 2011 18:58 GMT

#28

Oh fuck......LOL Im doing like 3 things at once here so I just sped-read what you posted and "thought" I got the gist of what you were saying, you are actually saying the opposite.

My apologies for being a dumbass LOL.

Integra

Sweden5626 Posts

August 09 2011 19:03 GMT

#29

It's fine, you explained why tables are bad, so its all good

SarR

476 Posts

August 09 2011 19:05 GMT

#30

Love u babe...gimma a kiss.

Polemos

United States160 Posts

August 10 2011 03:46 GMT

#31

lol - I'm really not all that proficient with CSS yet. Basic stuff, like color and fonts, yea, but I'm really not that great with anything else. The way it is now is perfect for the way I want it.

If someone wants to do a sample CSS, go for it. I'd love to see how it's done. This just seemed the easiest way to get done what I wanted from it.

Integra

Sweden5626 Posts

August 10 2011 03:48 GMT

#32

On August 10 2011 12:46 Polemos wrote:
lol - I'm really not all that proficient with CSS yet. Basic stuff, like color and fonts, yea, but I'm really not that great with anything else. The way it is now is perfect for the way I want it.

If someone wants to do a sample CSS, go for it. I'd love to see how it's done. This just seemed the easiest way to get done what I wanted from it.

See the first post, second page of this thread for a complete example.

Normal

Please or register to reply.

HTML Help

Completed

Ongoing

Upcoming