I want to know how to use id, name, and class properties.

As the title says, I want to know how to use id, name, and class properties accurately.

If you look at Mr. Yamoo's lecture, you often use the above attribute.

Do I have to use the properties of the stomach when I do the mission? Or I often get confused about which attributes to use.

fast-frontend html id name class

2022-09-22 13:25

1 Answers

Hello, flag bearer :-^

The usage of each of the three attributes you asked are as follows.

Use this if you are trying to identify something unique.

Use for reuse purposes.

Property required to send the value of the form control element (value) to the server.

"Application's Unique Area Identifier"

Unique name that separates the 'News' area from the 'Heroes' area

<section id="front-end-news">
  <h1> Front-end Development News</h1>
  ...
</section>

<section id="front-end-heroes">
  <h1> Front-end Development Heroes</h1>
  ...
</section>

"Identifier for linking label to input control"

Email input control associated with 'email' label text

<div class="form-control">
  <label for="email">email</label>
  <input type="email" id="email">
</div>

"Identifier for linking table to table description"

Table description associated with the aria-describedby property of the table element

<p hidden id="table-desc">Table description (summary)</p>

<table aria-describedby="table-desc">
  <caption>Table Title</caption>
  ...
</table>

"Application component identifier for reuse"

Class name for batch reflection of button component style

<Button type="Button" class="Button">Read</Button>

<input type="Button" class="Button" value="Read">

<a href class="button">Read</a>

Regardless of the type of element, the class="button" setting reflects a consistent design. (e.g. Bulma Element: Button)

"Application layout identifier for reuse"

Class name for batch reflection of layout style

<!-- Identifier to reflect container style with fixed width -->
<div class="container">
  ...
</div>

<!-- Add identifier to flexibly change width of container element -->
<div class="container is-fluid">
  ...
</div>

"Application helper identifier for reuse"

Class name for collectively reflecting the Helper style that is reflected in common.

<body class="is-marginless">
  <div class="is-float-left is-clearfix">
    ...
  </div>
  ...
</body>

/* CSS */

.is-marginless {
  margin: 0;
}

.is-float-left > * {
  float: left;
}

.is-clearfix::after {
  content: '';
  display: table;
  clear: both;
}

"Identifier for sending data to the server in the event of a form transfer event"

<select> Name to identify the value set in the element

<form>
  <div class="select">
    <label for="source-of-info">Source of information</label>
    <select 
      name="source-of-info" 
      id="source-of-info">
      <option> Select an information source.</option>
      <option> Facebook</option>
      <option> Twitter</option>
      <option selected>Instagram</option>
      ...
    </select>
  </div>
  ...
</form>

The JavaScript programming code can be used to identify the value of the name property of the <select> element to obtain and output the value you selected.

// JavaScript

var form = document.querySelector('form');
var formData = new FormData(form);

// output name="source-of-info" information value
formData.get('source-of-info'); // Instagram

2022-09-22 13:25

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656