【html】HTMLの小技

今回は実務でも使えそうな小技を紹介

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 26 times, 1 visits today)