1. Datalist
<body>
<form action="" method="get">
<label for="fruit">Choose your fruit :</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Orange">
<option value="Banana">
<option value="Mango">
<option value="Avacado">
</datalist>
<input type="submit">
</form>
</body>
2. The details tag
<body>
<details>
<summary>Click to get the user details</summary>
<table>
<tr>
<th>Name</th>
<th>Date of birth</th>
<th>Job</th>
</tr>
<tr>
<td>John</td>
<td>March 19</td>
<td>Accountant</td>
</tr>
</table>
</details>
</body>3. The output tag
<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="0">
* <input type="number" id="b" value="0">
= <output name="x" for="a b"></output>
</form>4. Content editable
By setting this attribute to true you will be able to edit the content of an element.<div> <h1> Employees list </h1> <ul class="content-editable" contenteditable="true"> <li> 1. Jhon </li> <li> 2. Mehdi </li> <li> 3. Brad </li> </ul> </div>5. The meter tag
<label for="low">Low</label>
<meter id="low" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter><label for="medium">Medium</label>
<meter id="medium" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter><label for="high">High</label>
<meter id="high" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter>6. The download attribute
<div>
<a href="index.html" download="fileName">Download HTML</a>
</div>7. Defer and Async attributes
<script src="app.js" defer></script><script src="app.js" async></script>You don’t need to put the script tags at the bottom of the body tag anymore.8. The abbr tag
<h2><abbr title="JavaScript and XML">JSX</abbr> is awesome.</h2>9. Accept
<input type="file" accept=".jpg, .png" >
파일 찾기 시 해당 확장자만 탐색이에서 열린다.10. Content editable
<div>
<h1> Employees: </h1>
<ul contenteditable="true">
<li> 1. John </li>
<li> 2. Mehdi </li>
<li> 3. James </li>
</ul>
</div>11. Download
<div>
<a href="index.html" download="fileName">Download this</a>
</div>12. Poster
The attribute
poster
is used to display an image while an HTML video is downloading, or until the user clicks on the play button.<video poster="picture.jpeg" controls> <source src="file.mp4" type="file/mp4"> <source src="file.ogg" type="file/ogg"> </video>
13. Native HTML accordion
<div class="container"> <details> <summary> HTML stands for? </summary> <p>HTML stands for hyper text markup language.</p> </details> </div>
14. Lazy loading images using HTML
<img src='imageSrc.jpg' loading='lazy' alt='image description'>15. Copying text to clipboard
function CopyText() { // select the text element. let text = document.getElementById("myText"); // select text. text.select(); text.setSelectionRange(0, 99999); // Copying the text inside the text field navigator.clipboard.writeText(text.value); //if you want an a copy alert. alert("Copied the text: " + text.value); }
16. Scroll to the top
const ScrollTop = () => window.scrollTo(0, 0);
ScrollTop();17. Easily create a color picker
<input type="color" value="#000">
18. Easily create a color picker
The hidden attribute is a boolean attribute.When present, the browsers won’t display elements that have the hidden attribute specified.<p hidden>You won't see me on the browser, only developers can!</p>19. Accept
<form action="/..."> <label for="img">Select image:</label> <input type="file" id="img" name="img" accept="image/*"> <input type="submit"> </form> <!-- or --> <input type="file" accept=".jpg, .png" >20. Controlling Context Menu and Paste
<input type="text" onpaste="return false" value="Paste something in here"> <div oncontextmenu="myFunction()" contextmenu="mymenu">You can listen to events like when they use right-clicks or try to paste content and handle these events with oncontextmenu and onpaste attributes. If you don’t want users to be able to paste onto some field like password, you can write onpaste=”return false” on that input field and users won’t be able to paste there. Similarly, oncontextmenu fires whenever the user right-clicks on that element.21. Range
<head>
<script>
function changeValue(event) {
let value = event.target.value;
let output = document.getElementById('output');
output.value = value;
}
</script>
</head>
<body>
<form method="post">
<input
type="range"
name="range"
min="0"
max="100"
step="1"
value=""
onchange="changeValue(event)"/>
</form>
<div class="range">
<output id="output" name="result"> </output>
</div>
</body>22. Progress
<label for="home">6/10 tasks done</label>
<progress value="60" max="100" id="home"></progress>23. Color picker
<p id="colorPicker">Color Picker!</p>
<input type="color" onchange="showColor(event)">24. Mark content
<p>Did you know that <mark>not all heroes wear capes.</mark></p><p>Agent Phil Coulson leads a team of highly skilled agents from the global law-enforcement organisation known as
<abbr title="Strategic Homeland Intervention, Enforcement, and Logistics Division">SHIELD</abbr>.
</p>26. <del> and <ins>
<p><del>Iron Man</del> <ins>Captain America</ins> is ehmmm.. yea the captain!</p><form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="0"> * <input type="number" id="b" value="0">
= <output name="x" for="a b"></output>
</form>28. Time
The
<time>
tag defines a specific time (or datetime).The
datetime
attribute of this element is used to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.<p>The next assemble meeting is postponed on <time datetime="2022-12-01">2022-12-01</time>.</p>
29. Audio
The
<audio>
tag will define a sound and there are three supported files which the tag can be used with. These are MP3, WAV, and OGG. A browser will then select the first one it supports.<audio controls>
<source src=”introduction.ogg” type=”audio/ogg”>
<source src=”introduction.mp3” type=”audio/mpeg”>
Your browser does not support this audio
</audio>
댓글 없음:
댓글 쓰기