Александр

<form action="URL" method="POST">

https://paveldogreat.github.io/WebGL-Fluid-Simulation/

https://www.jivochat.com/

Например так:

const makeTree = (root) => {
    const tree = {};

    const step = (root, branch) => {
        root.querySelectorAll(':scope > [class^="block"]').forEach((element, index) => {
            const className = [...element.classList.values()].find(
                (className) => className.startsWith('block')
            ) ?? element.className;
            const key = `${className}_${index + 1}`;

            branch[key] = {};

            const control = element.querySelector(':scope > input');
            if (control) {
                branch[key].value = control.value;
            }

            step(element, branch[key]);
        });
    };

    step(root, tree);

    return tree;
};

const tree = makeTree(document.body);
console.log(tree);

или так

const makeTree = (root) => {
    const tree = {};

    const step = (root, branch) => {
        root.querySelectorAll(':scope > [class^="block"]').forEach((element, index) => {
            const className = [...element.classList.values()].find(
                (className) => className.startsWith('block')
            ) ?? element.className;
            const key = `${className}_${index + 1}`;

            const controls = element.querySelectorAll(':scope > input');
            branch[key] = {
                values: [...controls].reduce((acc, control) => {
                    if (control.id) {
                        acc[control.id] = control.value;
                    }

                    return acc;
                }, {})
            };

            step(element, branch[key]);
        });
    };

    step(root, tree);

    return tree;
};

const tree = makeTree(document.body);
console.log(tree);

1. ПКМ на элемент → Просмотреть код.

2. ПКМ на выделенной строке в инспекторе → Force state → :hover.

В правой (или нижней) части инспектора будут стили. В ::after лежат «кнопки». Можете искать в CodePen по Floating Action Button.

В раздел head:

+ function applyTheme() {
+     const isDark = (localStorage.getItem('is-dark-theme') ?? 'true') === 'true';
+     if (isDark) {
+         document.body.classList.remove('light-mode');
+         document.body.classList.add('dark-mode');
+     } else {
+         document.body.classList.remove('dark-mode');
+         document.body.classList.add('light-mode');
+     }
+ }

- var dark = true;
function themeChange() {
-     var element = document.body;
- 
-     if (dark == true) {
-         element.classList.remove("dark-mode");
-         element.classList.add("light-mode");
-         dark = false;
-     }
- 
-     else {
-         element.classList.remove("light-mode");
-         element.classList.add("dark-mode");
-         dark = true;
-     }
+     localStorage.setItem('is-dark-theme', !((localStorage.getItem('is-dark-theme') ?? 'true') === 'true'));
+     applyTheme();
}

+ window.addEventListener('DOMContentLoaded', function () {
+     applyTheme();
+ });

Styling Form Controls Using Pseudo Classes