bellshade · azizarizaldi · Oct 11, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023
@@ -0,0 +1,83 @@
+
+
+
+## CSS Counters
+### Apa itu CSS CSS Counters?
+
+CSS Counters adalah sebuah fitur dalam Cascading Style Sheets (CSS) yang memungkinkan kamu untuk menghitung elemen-elemen dalam dokumen HTML dan menampilkan jumlah tersebut dengan gaya  atau tampilan yang kamu tentukan. Ini adalah cara yang berguna untuk membuat daftar terurut, nomor halaman, atau membuat tata letak yang kompleks dalam dokumen.  
+
+Counters digunakan dalam CSS untuk menghitung elemen-elemen HTML, seperti `<li>`, dan menampilkan jumlahnya dalam tampilan web. Kamu dapat mengatur dimulai dari berapa angka, cara menghitungnya, dan cara menampilkan hasilnya dalam dokumen.
+
+
+### Cara Menggunakan Counters
+
+ 1.  **Mendefinisikan Counter**: Pertama, Kamu perlu mendefinisikan counter dalam CSS dengan menggunakan properti `counter-reset`. Ini akan memberi tahu CSS bahwa kamu ingin menghitung elemen-elemen tertentu.
+
+
+```css
+.counter {
+    counter-reset: my-counter;
+}
+```
+
+2.  **Menggunakan Counter**: Sekarang, Kamu dapat menggunakan counter ini dalam dokumen HTML kamu dengan properti `counter-increment`. Misalnya, Kamu ingin menghitung elemen-elemen `<li>` dalam daftar:
+
+ ```css
+.counter  li {
+    counter-increment: my-counter;
+}
+```
+
+
+3.  **Menampilkan Hasil Counter**: Kamu dapat menampilkan hasil counter dalam elemen-elemen HTML dengan properti `content` dan `counter()`. Contoh, menampilkan nomor urut pada daftar:
+```css
+.counter  li::before {
+    content: counter(my-counter) ". ";
+}
+```
+
+### Contoh Penggunaan
+```html
+<!DOCTYPE  html>
+<html>
+    <head>
+        <link  rel="stylesheet"  type="text/css"  href="style.css">
+    </head>
+    <body>
+        <div  class="counter">
+            <ol>
+                <li>List Item 1</li>
+                <li>List Item 2</li>
+                <li>List Item 3</li>
+            </ol>
+        </div>
+    </body>
+</html>
+```
+
+```css
+/* style.css */
+.counter {
+    counter-reset: my-counter;
+}
+
+.counter  li {
+    counter-increment: my-counter;
+}
+
+.counter  li::before {
+    content: counter(my-counter) ". ";
+}
+```
+
+Hasilnya akan menjadi daftar terurut seperti ini:
+
+```text
+1. List Item 1
+2. List Item 2
+3. List Item 3
+```
+
+### Referensi
+- [MDN Web Docs - CSS Counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
+- [W3Schools - CSS Counters](https://www.w3schools.com/css/css_counters.asp)
@@ -0,0 +1,115 @@
+# HTML Input Attributes
+
+Elemen `<input>` digunakan untuk membuat berbagai jenis input seperti teks , kata sandi, kotak centang, radio button, dan banyak lagi.  Kamu dapat mengontrol perilaku dan tampilan elemen input ini dengan menggunakan berbagai atribut.
+
+Berikut adalah beberapa atribut umum yang digunakan dalam elemen input:
+
+## 1. `type`
+Atribut `type` digunakan untuk menentukan jenis input yang akan digunakan. Beberapa contoh jenis yang umum adalah:
+
+- `text`: Untuk input teks biasa.
+- `password`: Untuk input kata sandi.
+- `checkbox`: Untuk kotak centang.
+- `radio`: Untuk tombol radio.
+- `file`: Untuk mengunggah berkas.
+- `number`: Untuk input angka.
+- `email`: Untuk alamat email.
+- `date`: Untuk memilih tanggal.
+- `color`: Untuk memilih warna.
+
+**Contoh penggunaan:**
+
+```html
+<input  type="text"  name="username">
+<input  type="password"  name="password">
+<input  type="checkbox"  name="subscribe"  value="yes">
+```
+
+
+
+## 2. `name`
+
+Atribut `name` digunakan untuk memberi nama input, yang akan digunakan saat mengirimkan data formulir. Ini sifatnya harus unik dalam satu formulir.
+
+
+**Contoh penggunaan:**
+
+```html
+<input type="text" name="username">
+<input type="text" name="email">
+```
+
+## 3. `value`
+
+Atribut `value` digunakan untuk mengatur nilai awal dari elemen input. Ini berguna untuk mengisi nilai awal dalam kasus input teks atau kata sandi.
+
+**Contoh penggunaan:**
+
+```html
+<input  type="text"  name="username"  value="JohnDoe">
+<input  type="radio"  name="gender"  value="male"  checked> Male
+<input  type="radio"  name="gender"  value="female"> Female
+```
+
+
+
+## 4. `placeholder`
+
+Atribut `placeholder` digunakan untuk menampilkan teks tip pada input sebelum pengguna memasukkan nilai. Ini memberikan panduan kepada pengguna.
+
+
+
+**Contoh penggunaan:**
+
+```html
+<input  type="text"  name="search"  placeholder="Cari...">
+```
+
+
+
+## 5. `required`
+
+Atribut `required` digunakan untuk membuat input wajib diisi sebelum formulir dapat disubmit.
+
+
+**Contoh penggunaan:**
+```html
+<input type="email"  name="email"  required>
+<input type=checkbox  name="agree"  value="yes"  required>
+```
+
+## 6. `disabled`
+
+Atribut `disabled` digunakan untuk menonaktifkan input, sehingga tidak dapat diedit atau diklik.
+
+**Contoh penggunaan:**
+
+```html
+<input type="text" name="disabledInput" value="Ini input nonaktif" disabled>
+```
+
+
+## 7. `readonly`
+
+Atribut `readonly` digunakan untuk membuat input hanya bisa dibaca, tapi tidak bisa diubah.
+
+**Contoh penggunaan:**
+
+```html
+<input  type="text"  name="readOnlyInput"  value="Ini input hanya bacaan"  readonly>
+```
+
+
+
+## 8. `max` dan `min`
+
+Atribut `max` dan `min` digunakan untuk menentukan nilai maksimum dan minimum yang dapat dimasukkan oleh pengguna dalam input tipe `number`, `date`, atau atribut lainnya.
+
+**Contoh penggunaan:**
+
+```html
+<input  type="number"  name="age"  min="18"  max="99">
+<input  type="date"  name="birthDate"  min="1990-01-01"  max="2005-12-31">
+```
+
+**Referensi:** [w3schools (https://www.w3schools.com/html/html_form_attributes.asp)](https://www.w3schools.com/html/html_form_attributes.asp)