Trouble interpreting elements especially name and id

Question

I'm still a beginner and am still learning how to read and understand HTML. Within a login form in a website:

<form action="https://examplesite.jp/user.php" name="loginform" method="post">

<ul class="form">
<li class="title">E-MAIL ADDRESS</li>
<li class="text"><input type="text" name="uname" 
id="legacy_xoopsform_block_uname" size="18" maxlength="60" value=""/>
</li>

<li class="title">PASSWORD</li>
<li class="pass">

<input type="password" name="pass" id="legacy_xoopsform_block_pass" 
size="18" maxlength="12"/>

Part I do not understand is this part from above:

<input type="password" name="pass" id="legacy_xoopsform_block_pass" 
size="18" maxlength="12"/>

I understand up to <input type="password" name="pass" /> part, but not after that especially how it's using id="legacy_xoopsform_block_pass".

How I am comprehending this code is that the type of input that will be sent to https:/examplesite.jp/user.php (using online form) is "password", and that is named "pass" but what's "id"? Especially email's acted as ID?

I read Difference between id and name attributes in HTML but don't really understand...

The name attribute is the key that the data will be assigned when it's posted to the other page, an ID is just for identification. — Matt, Jun 22 '17 at 08:41

score 0 · Answer 1 · answered Jun 22 '17 at 08:41

Welcome to SO. Please use google search, its your best friend!

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

Source

score 0 · Accepted Answer · answered Jun 22 '17 at 08:43

The ID attribute isn't used for any server side function, it is merely for styling (ill-advised) or more commonly used for hooking JavaScript functionality too.

So for example, you could use it to style the element in your CSS:

#legacy_xoopsform_block_uname {
  background-color: black;
}

Or you could use it to do stuff in JavaScript:

$('#legacy_xoopsform_block_uname').on('click', function(){
  alert('the input field has just been clicked);
});

Those are the only two situations you would use the ID, however I don't suggest the first option, I would use a class for that.

Essentially if you're not doing one of the above two things, you don't need and can safely get rid of it.

score 0 · Answer 3 · answered Jun 22 '17 at 09:02

The name attribute value is a name of a query parameter. This is a name of data field, that will sent to server with your form. id is an unique identidicator of HTML element. There is no several elements with same id in valid HTML. Thus, id attribute is used for HTML element identification, but the name attribute is used for data field identification in HTTP request.

Trouble interpreting elements especially name and id

3 Answers3