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
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
© 2024 OneMinuteCode. All rights reserved.