今回は実務でも使えそうな小技を紹介
accept属性
<input type="file" accept=".jpg,.jpeg,.png">
alt属性
<img src="sample.png" alt="美しいサンセット">
autocomplete属性
こちらを参考<input type="text" name="name" autocomplete="name">
contenteditable属性
<div contenteditable="true">ここを編集できます</div>
demo
See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
ダウンロード属性
<a href="document.pdf" download="document.pdf">PDFをダウンロード</a>
hidden属性
<div hidden>this is hidden content.</div>
lazy属性
<img src="image.png" loading="lazy">
multiple属性
<input type="file" multiple>
<select multiple>
<option>html</option>
<option>css</option>
</select>
demo
See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
poster属性
<video controls poster="img.png">
<source src="movie.mp4" type="video/mp4">
</video>
readonly属性
<input type="text" value="this is readonly" readonly>
spellcheck属性
<input type="text" spellcheck="true">
demo
See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
title属性
<a href="document.pdf" title="click to download">ダウンロードファイル</a>
demo
See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
(Visited 34 times, 1 visits today)