Is it right to use attributes only to indicate html elements?

Question

I have doubts about good HTML writing practices with Javascript.

I came up with an idea (maybe not the first, but I can’t find a clear link) to mark some elements as candidates for loading some data when they are available (after some user interaction). I will give an example:

Suppose I have a query that returns the following:

GET    /animals/dog

{
  name: "Gutemberg",
  race: "doberman",
  age: "2y"
}

The code I wrote links the fields in the response to the elements that are candidates for loading such a value. For example: using the above query, I could use the following tags:

<input name="dog-name-field" data-load-dog-name type="text"/>
<input name="dog-age-hid" data-load-dog-age type="hidden"/>

, - dog-name-field "Gutemberg", . , . , ( "" ), "/", data-load-type-property , .

, , . - , .

? ? , ?

PS: SO , , , . , , , .

Answer 1

, .

, :

, . , .

( w3.org)

, data-attributes "" , : DOM API , , .

- textContent, / :

1) id,

id (ID), . - ( ), ( CSS).

( id MDN)

2) class,

class - . CSS Javascript , DOM document.getElementsByClassName.

( class MDN)

@Supr, , , . , , ; , :

• Javascript, -, , , Ajax,

• (, ), innerHTML textContent,

• ​​ UI ( )

id class , , , KnockoutJS AngularJS, data-* (AngularJS is ng-*, data-ng-* HTML).

:

<input data-bind="visible: editing, value: name, hasFocus: editing" />

KnockoutJS , , , class es id s, .

TL; DR

, class id.

Answer 2

. , .

, .

AngularJS :

<input ng-model="dog.name" />

Knockout :

<input data-bind="textInput: dog.name" />

React :

<input value={this.state.dog.name} />

/, , , . , (.. "dog.name" ), . . "" ( " " ), , .