Skip to content

Latest commit

 

History

History
364 lines (308 loc) · 8.39 KB

element-patterns.md

File metadata and controls

364 lines (308 loc) · 8.39 KB

AI Agent HTML Element Patterns

Version: 1.2.0
Last Updated: 2025-12-22
Status: Production Ready
Related: FINAL SPEC v1.2

Dokumen ini berisi contoh markup HTML dengan atribut data-ai-* untuk berbagai tipe elemen. Untuk spesifikasi lengkap (middleware, controllers, JSON-LD policy, dll), lihat FINAL SPEC v1.2.

📋 Quick Reference

Core Attributes (WAJIB)

Attribute Description
data-ai-role Tipe elemen: form, input, button, select, link, section, table, modal
data-ai-name Identifier unik (snake_case): login_form, username_input
data-ai-desc Deskripsi human-readable untuk AI context

Security Attributes

Attribute Values
data-ai-sensitivity public, restricted, pii, sensitive
data-ai-required-consent true, false
data-ai-action submit, navigate, delete, toggle, cancel

📝 Element Patterns

1. Form

<form method="post"
      data-ai-role="form"
      data-ai-name="login_form"
      data-ai-desc="Formulir otentikasi utama pengguna"
      data-ai-context="authentication"
      data-ai-sensitivity="restricted">
    <!-- Form elements -->
</form>

2. Input Fields

Text / Username

<input type="text" 
       name="username" 
       data-ai-role="input" 
       data-ai-name="username" 
       data-ai-desc="Username atau email pengguna"
       data-ai-required="true"
       data-ai-sensitivity="pii">

Password

<input type="password" 
       name="password" 
       data-ai-role="input" 
       data-ai-name="password" 
       data-ai-desc="Password pengguna"
       data-ai-type="secret"
       data-ai-sensitivity="sensitive">

Email

<input type="email" 
       name="email" 
       data-ai-role="input" 
       data-ai-name="email" 
       data-ai-desc="Alamat email pengguna"
       data-ai-type="email"
       data-ai-sensitivity="pii">

Date

<input type="date" 
       name="birth_date" 
       data-ai-role="input" 
       data-ai-name="birth_date" 
       data-ai-desc="Tanggal lahir pengguna"
       data-ai-type="date"
       data-ai-sensitivity="pii">

File Upload

<input type="file" 
       name="avatar" 
       data-ai-role="input" 
       data-ai-name="avatar_upload" 
       data-ai-desc="Upload foto profil"
       data-ai-type="file"
       data-ai-sensitivity="restricted">

3. Buttons

Submit

<button type="submit" 
        data-ai-role="button" 
        data-ai-name="submit_login" 
        data-ai-desc="Kirim form login"
        data-ai-action="submit"
        data-ai-required-consent="true">
    Masuk
</button>

Delete (Destructive)

<button type="button" 
        data-ai-role="button" 
        data-ai-name="delete_user" 
        data-ai-desc="Hapus data pengguna"
        data-ai-action="delete"
        data-ai-required-consent="true">
    Hapus
</button>

Cancel

<button type="button" 
        data-ai-role="button" 
        data-ai-name="cancel_form" 
        data-ai-desc="Batalkan dan kembali"
        data-ai-action="cancel">
    Batal
</button>

Toggle

<button type="button" 
        data-ai-role="button" 
        data-ai-name="toggle_password" 
        data-ai-desc="Tampilkan/sembunyikan password"
        data-ai-action="toggle">
    <i class="bi bi-eye"></i>
</button>

4. Select / Dropdown

<select name="role" 
        data-ai-role="select" 
        data-ai-name="user_role" 
        data-ai-desc="Pilih role pengguna"
        data-ai-sensitivity="restricted">
    <option value="" 
            data-ai-role="option" 
            data-ai-name="placeholder">
        -- Pilih Role --
    </option>
    <option value="user" 
            data-ai-role="option" 
            data-ai-name="role_user">
        User
    </option>
    <option value="admin" 
            data-ai-role="option" 
            data-ai-name="role_admin">
        Admin
    </option>
</select>

5. Links / Navigation

<!-- Internal -->
<a href="/register" 
   data-ai-role="link" 
   data-ai-name="nav_register" 
   data-ai-desc="Navigasi ke halaman registrasi"
   data-ai-action="navigate">
    Daftar Akun
</a>

<!-- External -->
<a href="https://docs.example.com" 
   data-ai-role="link" 
   data-ai-name="nav_docs" 
   data-ai-desc="Buka dokumentasi"
   data-ai-action="navigate"
   target="_blank">
    Dokumentasi
</a>

6. Sections / Containers

<!-- Page Section -->
<section data-ai-role="section" 
         data-ai-name="login_section" 
         data-ai-desc="Area form login">
    <!-- Content -->
</section>

<!-- Modal -->
<div class="modal" 
     data-ai-role="modal" 
     data-ai-name="confirm_delete_modal" 
     data-ai-desc="Dialog konfirmasi hapus"
     data-ai-required-consent="true">
    <!-- Modal content -->
</div>

<!-- Validation Errors -->
<div data-ai-role="section" 
     data-ai-name="validation_errors" 
     data-ai-desc="Area pesan error"
     data-ai-state="hidden">
    <!-- Error messages -->
</div>

7. Tables

<table data-ai-role="table" 
       data-ai-name="users_table" 
       data-ai-desc="Tabel daftar pengguna"
       data-ai-sensitivity="restricted">
    <thead>
        <tr data-ai-role="table_header" 
            data-ai-name="users_header">
            <th>Username</th>
            <th>Email</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody data-ai-role="table_body" 
           data-ai-name="users_body">
        <tr data-ai-role="table_row" 
            data-ai-name="user_row_1">
            <td>john_doe</td>
            <td>john@example.com</td>
            <td>
                <button data-ai-role="button" 
                        data-ai-name="edit_user_1" 
                        data-ai-action="navigate">
                    Edit
                </button>
            </td>
        </tr>
    </tbody>
</table>

8. Checkbox & Radio

<!-- Checkbox -->
<div data-ai-role="checkbox_group" 
     data-ai-name="remember_me_group">
    <input type="checkbox" 
           id="remember_me"
           data-ai-role="checkbox" 
           data-ai-name="remember_me" 
           data-ai-desc="Simpan sesi login">
    <label for="remember_me">Ingat saya</label>
</div>

<!-- Radio Group -->
<div data-ai-role="radio_group" 
     data-ai-name="gender_selection" 
     data-ai-desc="Pilihan jenis kelamin">
    <input type="radio" name="gender" value="male"
           data-ai-role="radio" 
           data-ai-name="gender_male">
    <label>Laki-laki</label>
    
    <input type="radio" name="gender" value="female"
           data-ai-role="radio" 
           data-ai-name="gender_female">
    <label>Perempuan</label>
</div>

📌 Reference Values

Roles

Role HTML Elements
form <form>
input <input>, <textarea>
button <button>
select <select>
option <option>
link <a>
section <section>, <div>, <aside>
modal Modal dialogs
table <table>
table_header <thead>, <tr> in thead
table_body <tbody>
table_row <tr> in tbody
checkbox <input type="checkbox">
radio <input type="radio">
checkbox_group Container for checkboxes
radio_group Container for radios

Actions

Action Requires Consent
navigate ❌ No
submit ⚠️ Configurable
cancel ❌ No
delete ✅ Yes
toggle ❌ No
open ❌ No
close ❌ No
refresh ❌ No
download ⚠️ Configurable
upload ✅ Yes
update ✅ Yes
create ✅ Yes

Sensitivity Levels

Level Crawl Store Consent
public ✅ ✅ ❌
restricted ✅ ❌ ❌
pii ✅ ❌ ✅
sensitive ❌ ❌ ✅

📚 Related Documents

Document Content
FINAL SPEC v1.2 Middleware, Controllers, JSON-LD Policy, robots.txt, Configuration
CustomHelpers.md ASP.NET Core Tag Helpers