Penggunaan properti terkenal yang kurang diketahui – Beragampengetahuan

Daftar atribut yang tersedia dalam HTML panjang dan terdokumentasi dengan baik. Bahkan jika Anda belum menghafalnya (yang tidak masalah bagi penulisnya…er…orang biasa, siapa yang menghafalnya), ada banyak tempat di mana atribut HTML yang Anda kenal akan menjadi peluang kerja konten yang berbeda atau lebih spesifik. Mari kita lihat.

name

Anda mungkin pernah mendengarnya name Properti yang memberikan nama/label atas informasi yang dikirimkan melalui formulir. Lebih khusus lagi, Anda mungkin menggunakannya untuk menggabungkan sekumpulan tombol radio, tetapi Anda juga dapat menggabungkannya dengan details Elemen ini hanya membuka salah satu dari serangkaian akordeon dalam satu waktu.

Sama seperti jika Anda memiliki lebih dari satu lemari es di kantor Anda, orang terhormat mana pun hanya akan membuka satu pintu dalam satu waktu. Benar, Bob?

<details name="office-kitchen">
  <summary>Refrigerator 1</summary>
  Lunches, condiments, yogurt et al.
</details>
<details name="office-kitchen">
  <summary>Refrigerator 2</summary>
  More Lunches, leftovers from client meeting, stray cans of off-brand soda et al.
</details>
<details name="office-kitchen">
  <summary>Refrigerator 3</summary>
  Cookie dough someone bought from somebody’s child’s fundraiser, expired milk, unidentifiable meat et al.
</details>

Lihat nama pena [forked] Atas izin Institut Orang Mati.

title

Anda mungkin pernah mendengar tentang properti generik title. Biasanya dianggap sebagai teks tooltip bawaan, namun tiga elemen memiliki semantik khusus untuk atribut title: input dan permata yang jarang digunakan, definisi (dfn) elemen, dan singkatan (abbr) elemen.

Jika Anda menggunakan pattern properti aktif input Untuk memberikan beberapa koreksi kesalahan berbasis regex, Anda harus memberi tahu pengguna cara memenuhi kriteria yang Anda gunakan. ini title Properti dapat digunakan baik sebagai tooltips maupun sebagai pesan yang muncul ketika pengguna tidak memenuhi kondisi tersebut.

<form method="post" action="#">
  <label>Who took my <em>well labeled</em> yogurt from the company fridge? I know it was you, Bob.<br>
    <input type="text" pattern="Bob [A-Za-z].+" title="There are many Bobs. The only question is which one it was. Please limit your answers to Bob and his/her last name.">
  </label><br>
  <button type="submit">Submit</submit>
</form>

Lihat Judul Pena – Masuk [forked] Atas izin Institut Orang Mati.

untuk a dfn elemen jika Anda menggunakan title atribut, maka harus mengandung istilah yang didefinisikan. dfn Teks tetap harus dicantumkan, namun dapat berupa singkatan atau bentuk istilah lain.

<p><dfn title="Office Yogurt Thief">OYG</dfn>’s are a pox on humanity. Stealing yogurts from the office fridge even when they are labeled.</p>

Lihat judul pena – dfn [forked] Atas izin Institut Orang Mati.

satu title di sebuah abbr Elemen tidak hanya mengatur tooltips, tetapi juga secara eksplisit memiliki singkatan atau ekstensi akronim. Sebagaimana tercantum dalam spesifikasi: ” Lesser Known Uses Of Better Known Attributes Jika suatu atribut ditentukan, atribut tersebut harus berisi perluasan singkatan dan tidak ada yang lain. “Ini sama saja dengan mengancam akan menjadi mafia jika Anda menggunakan nama Anda secara sembarangan. title milik. Anda sudah diperingatkan, Bob.

When dealing with a suspected yogurt thief, we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with the problem.

Lihat judul pena – singkatan [forked] Atas izin Institut Orang Mati.

value

ini value Properti dikenal untuk menetapkan nilai default inputs, tetapi Anda juga dapat menggunakannya pada item daftar (li) dalam daftar yang dipesan (ol) mengubah nomor item ini dan semua item berikutnya. Ini hanya menerima bilangan bulat, tetapi Anda dapat menggunakannya apa pun jenis daftar terurut yang Anda miliki (angka, huruf, atau angka Romawi).

<h1>Favorite Co-workers</h1>
<ol>
  <li>Tina</li>
  <li>Keesha</li>
  <li>Carlos</li>
  <li>Jamal</li>
  <li>Scott</li>
  <li value="37">Bob</li>
  <li>Bobbie</li>
  <li>Bobby</li>
  <li>"Rob"</li>
</ol>

Lihat nilai pena [forked] Atas izin Institut Orang Mati.

datetime

Anda mungkin pernah menggunakannya datetime properti aktif time Elemen menyediakan format waktu dan/atau tanggal yang dapat dibaca mesin time Teks elemen:

<time datetime="2024-12-09">Dec. 12, 2024</time>

Properti yang sama juga dapat digunakan dengan ins Dan del Elemen (masing-masing digunakan untuk mewakili penambahan/penyisipan dan penghapusan konten). ini datetime Dikaitkan dengan ins Dan del Memberikan tanggal yang dapat dibaca mesin (dan waktu opsional) saat perubahan terjadi. Anda dapat menampilkannya kepada pengunjung jika diinginkan, tetapi ini terutama untuk penggunaan pribadi.

Lihat hasil edit versi asli dari contoh sebelumnya:

When dealing with a <ins datetime="2024-11-17">suspected</ins> yogurt thief <del datetime="2024-11-17">, like Bob,</del> we must create a <abbr title="Human Resources Special Task Force on Yogurt Theft">HRSTFYT</abbr> to deal with <del datetime="2024-11-17">Bob</del> <ins datetime="2024-11-17">the problem</ins>.

Lihat tanggal dan waktu pena [forked] Atas izin Institut Orang Mati.

Sebagai catatan tambahan, pembaca layar bisa TIDAK Mengumumkan datetime properti dalam konteks ini.

cite

Habiskan waktu bersama teman-teman kita yang sering diabaikan ins Dan delini cite atribut yang Anda gunakan blockquote Dan q Elemen yang menyediakan URL pengarah juga dapat digunakan ins Dan del Memberikan URL dokumentasi yang menjelaskan perubahan tersebut.

Lihat kutipan pena [forked] Atas izin Institut Orang Mati.

Sekali lagi, tanggal-tanggal ini tidak akan dipublikasikan dalam teknologi bantu seperti pembaca layar.

multiple

Anda mungkin tahu multiple Properti adalah properti yang sangat menarik yang mengubah menu drop-down menjadi kotak multi-pilih, seperti rekan kerja yang meminta Anda memilih dua donat dari sebuah kotak. (Aku sedang melihatmu, Tina.) Tapi itu juga memiliki dua tujuan lain. Anda dapat menambahkan ini ke kedua file input dan sebuah email Input masing-masing menerima banyak file dan email.

<form method="post" action="#">
  <label>Upload complaint forms (about Bob) <input type="file" multiple> </label><br>
  <label>Email all of Bob’s bosses: <input type="email" multiple></label><br>
  <button type="submit">Submit</submit>
</form>

Pastikan email dipisahkan dengan koma.

Lihat kelipatan pena [forked] Atas izin Institut Orang Mati.

for

Dalam proses browsing Internet, Anda mungkin pernah menjumpainya for Ketika atribut digunakan dalam asosiasi label Elemen dengan bidang formulir (input, select, textareadll), tetapi Anda juga dapat menggunakannya untuk menggabungkan elemen terhitung secara eksplisit output elemen.

tidak seperti a label–input Relationship, yaitu hubungan satu-ke-satu (yaitu satu field, satu label), for Properti digunakan untuk output Dapat menyimpan daftar ID bidang yang tidak berurutan dan dipisahkan spasi yang berpartisipasi dalam penghitungan.

<form method="post" action="#" id="comeuppance"> 
  <fieldset><legend>Defendant name</legend>
    <label>First Name: <input name="fname" type="text"></label>
    <label>Last Name: <input name="lname" type="text"></label>
  </fieldset>
  <label>Number of yogurts stolen (unlabeled): 
    <input name="numunlbld" id="numstolen-unlbld" type="number">
  </label> * 
  <label>Unlabeled Multiplier: 
    <input name="multiunlbld" id="multi-unlbld" type="number" value="0.5">
  </label> + 
  <label>Number of yogurts stolen (labeled): 
    <input name="numlbld" id="numstolen-lbld" type="number">
  </label> * 
  <label>Labeled Multiplier: 
    <input name="multilbld" id="multi-lbld" type="number" value="1.5">
  </label> = 
  <label>Suggested prison term (in years):
    <output id="answer" for="numstolen-unlbld numstolen-lbld multi-unlbld multi-lbld"></output>
  </label>
</form>

Cari tahu untuk apa pena itu [forked] Atas izin Institut Orang Mati.

target

Seperti yang bisa Anda gunakan target Tautan properti terbuka di tab/jendela baru, Anda dapat menggunakan yang sama target Properti dan nilai _blank memiliki form Buka respons di tab/jendela baru.

<form method="post" action="#" id="comeuppance" target="_blank"> 
  [...]
</form>

disabled

Anda mungkin pernah menggunakannya disabled properti untuk menghapus satu bidang formulir, namun Anda juga dapat menggunakannya untuk menonaktifkan setiap turunan formulir fieldset elemen.

Tidak peduli apa kata HR, tidak peduli etos “tidak bersalah”, kita tahu itulah yang dilakukan Bob. Bukan?

<form method="post" action="#" id="comeuppance"> 
  <fieldset disabled><legend>Defendant name</legend>
    <label>First Name: <input name="fname" type="text" value="Bob"></label>
    <label>Last Name: <input name="lname" type="text" value="McBobberson"></label>
  </fieldset>
  [...]
</form>

Tampilan pena dinonaktifkan [forked] Atas izin Institut Orang Mati.

pemilih atribut

Meskipun secara teknis properti bukan merupakan trik HTML, properti juga dapat digunakan sebagai penyeleksi dalam CSS. Anda memasukkan nama atribut dalam tanda kurung siku, lalu memilih semua elemen yang berisi atribut tersebut.

<style>
  Lesser Known Uses Of Better Known Attributes {
    background-color: red;
  }
</style>
<h1>List of <del>Suspects</del><ins>Co-workers</ins></h1>
<ol>
  <li>Fred</li>
  <li>Rhonda</li>
  <li>Philomina</li>
  <li>Cranford</li>
  <li>Scott</li>
  <li title="the guilty one">Bob</li>
  <li>Bobbie</li>
  <li>Bobby</li>
  <li>"Rob"</li>
</ol>

Lihat pemilih atribut pena [forked] Atas izin Institut Orang Mati.

Sebenarnya masih banyak lagi yang dapat Anda lakukan dengan penyeleksi atribut, namun itu adalah topik untuk artikel lain – secara harfiah.

Meringkaskan

Oke, sekarang kita telah membahas beberapa hal sepele yang dapat digunakan untuk menuntut pelanggaran Bob’s Office dan Yogurt dengan benar, apakah Anda memiliki atribut HTML favorit yang belum saya bahas? Pamerkan energi kehidupan pesta pribadi Anda di komentar. (Dan, ya, orang keren punya atribut HTML favorit…orang keren banget…kan? Benar? Benar!?!?!?!?!)

Hasilkan $200 seminggu
Dikutip dari artikel di Smashing Magazine – Untuk Desainer dan Pengembang Web