whats the differences between id and name attribute?

[Matt]

For example, what's the differences between
<INPUT TYPE="TEXT" NAME="username">
<INPUT TYPE="TEXT" ID="username">

Or they are the same, we can use id and name attribute interchangely?

Thanks!

 

[David Dorward]

For example, what's the differences between
<INPUT TYPE="TEXT" NAME="username">
<INPUT TYPE="TEXT" ID="username">

The name attribute is used for form controls and determine how the data will
be sent to the server when the form is submitted.

ID is used for all sorts of client side stuff, such as fragment identifiers,
<label> fors, JavaScript and CSS.

Some of the client side features can be applied to name also, but its use
for this is deprecated.

 

[rstuckart]

snip . . .

I have begun the practice of always providing both and setting them to
the same value.

Are there are any tags that I should not do that with?

Bob

 

[Jeff Thies]

I have begun the practice of always providing both and setting them to
the same value.

I don't see how this can do any harm. But I don't think it does any good
either. I'm unaware of any environment where a submitted form will recognize
form elements by ID.

Jeff

 

[Steve Pugh]

I have begun the practice of always providing both and setting them to
the same value.

Somewhat recommended for anchor elements and the like (so long as you
use a version of (X)HTML that allows both) and doesn't do any harm in
most other cases.

Are there are any tags that I should not do that with?

radio buttons - the name must be the same for each set of buttons, but
the id must be different for each individual button.

Steve

 

[Toby A Inkster]

I have begun the practice of always providing both and setting them to
the same value.

Are there are any tags that I should not do that with?

<input type="radio" id="foo" name="foo" value="bar">
<input type="radio" id="foo" name="foo" value="baz">

Because you're not allowed two elements with the same ID.

 

[Big Bill]

<input type="radio" id="foo" name="foo" value="bar">
<input type="radio" id="foo" name="foo" value="baz">

Because you're not allowed two elements with the same ID.

So what if you use the same elements twice? Should you then be
calling, say, the first with "id" and successive instances "name"s?

BB

 

[Mark Parnell]

So what if you use the same elements twice? Should you then be
calling, say, the first with "id" and successive instances "name"s?

No. The name and id attributes serve different purposes.

<input type="radio" id="foo_bar" name="foo" value="bar">
<input type="radio" id="foo_baz" name="foo" value="baz">

 

[Neal]

So what if you use the same elements twice? Should you then be
calling, say, the first with "id" and successive instances "name"s?

Why would you have two different controls affect the same piece of your
CGI? Where's the use?

Put over-simply, ID is for associating the input element with a label, and
name is used to associate the input value with part of your CGI.

Don't make the mistake of assuming ID is a drop-in replacement for name.
It is in terms of linking, but with forms id and name serve totally
different functions.

 

[David Dorward]

Why would you have two different controls affect the same piece of your
CGI? Where's the use?

foreach my $thing ($CGI->param('things_that_john_likes') {
foo($thing)
}

Is a little cleaner then:

foo($CGI->(param('thing_that_john_likes_1');
foo($CGI->(param('thing_that_john_likes_2');
foo($CGI->(param('thing_that_john_likes_3');
foo($CGI->(param('thing_that_john_likes_4');
foo($CGI->(param('thing_that_john_likes_5');
foo($CGI->(param('thing_that_john_likes_6');
foo($CGI->(param('thing_that_john_likes_7');
foo($CGI->(param('thing_that_john_likes_8');
foo($CGI->(param('thing_that_john_likes_9');
foo($CGI->(param('thing_that_john_likes_10');
foo($CGI->(param('thing_that_john_likes_11');
foo($CGI->(param('thing_that_john_likes_12');
foo($CGI->(param('thing_that_john_likes_13');
foo($CGI->(param('thing_that_john_likes_14');
foo($CGI->(param('thing_that_john_likes_15');
foo($CGI->(param('thing_that_john_likes_16');
foo($CGI->(param('thing_that_john_likes_17');
foo($CGI->(param('thing_that_john_likes_18');
foo($CGI->(param('thing_that_john_likes_19');
foo($CGI->(param('thing_that_john_likes_20');
foo($CGI->(param('thing_that_john_likes_21');
foo($CGI->(param('thing_that_john_likes_22');
foo($CGI->(param('thing_that_john_likes_23');
foo($CGI->(param('thing_that_john_likes_24');
foo($CGI->(param('thing_that_john_likes_25');
foo($CGI->(param('thing_that_john_likes_26');
foo($CGI->(param('thing_that_john_likes_27');
foo($CGI->(param('thing_that_john_likes_28');
foo($CGI->(param('thing_that_john_likes_29');
foo($CGI->(param('thing_that_john_likes_30');
foo($CGI->(param('thing_that_john_likes_31');
foo($CGI->(param('thing_that_john_likes_32');
foo($CGI->(param('thing_that_john_likes_33');
foo($CGI->(param('thing_that_john_likes_34');
foo($CGI->(param('thing_that_john_likes_35');

 

[Neal]

foreach my $thing ($CGI->param('things_that_john_likes') {
foo($thing)
}

Is a little cleaner then:

foo($CGI->(param('thing_that_john_likes_1');
foo($CGI->(param('thing_that_john_likes_2');

...

Granted. But so long as the HTML can be valid... I think that's an
overriding concern, unless it amounts to something horribly cumbersome.

Mind you, I am no one's authority on CGI so feel free to correct me where
I am inevitably in error.

 

[Big Bill]

No. The name and id attributes serve different purposes.

<input type="radio" id="foo_bar" name="foo" value="bar">
<input type="radio" id="foo_baz" name="foo" value="baz">

Well call me Dumbo, folk usually do here, but what if you want to use
the same thingy/element twice or more in one document? I'm guessing
you shouoldn't be calling it id in the first place, yeah?

BB

 

[David Dorward]

Granted. But so long as the HTML can be valid...

As the HTML is valid in both cases, that isn't much of an argument for using
the cumbersome server side scripting.

 

[David Dorward]

Well call me Dumbo, folk usually do here, but what if you want to use
the same thingy/element twice or more in one document? I'm guessing
you shouoldn't be calling it id in the first place, yeah?

I'll make the example a little clearer:

<input type="radio" id="foo_bar" name="foo" value="bar">
<label for="foo_bar">Bar</label>
<br>
<input type="radio" id="foo_baz" name="foo" value="baz">
<label for="foo_baz">Baz</label>

The two radio buttons must have the same name to be members of the same
radio group, but they must have different id's for the labels to be
correctly associated (OK, there are other ways to associate labels, but
support for those isn't as good).

The two elements are different, but related, and still need to be identified
uniquely.