GenWebForm

Generează diverse controale de interacțiune ale unui formular Web via JavaScript, folosind DOM. Generate several inputs of a Web form via JavaScript (by using DOM).

by Sabin Buraga

HTML

<form id="unFormular">
  <!-- corpul formularului va fi generat via JavaScript -->
</form>

CSS

.interactiv {
    border-style: dotted;
    border-width: 0.1em;
    border-color: gray;
    border-radius: 0.2em;
    width: 25em;
    padding: 0.4em;
    font-family: sans-serif;
}
label {
    width: 50%;
    display: block;
    float: left;
    margin-right: 0.3em;
}

JavaScript 1.7

function adaugaControl (element, tip, nume, explicatie) {
    // vom crea un element <input> atasandu-i atributele esentiale
    let control = document.createElement ('input');
    control.type = tip;
    control.id = nume;
    control.name = nume;

    // vom adauga si o eticheta explicativa
    let eticheta = document.createElement ('label');
    eticheta.htmlFor = nume;
    eticheta.innerHTML = explicatie;
    // vom altera diverse stiluri CSS
    eticheta.style.background = 'lightgray';
    eticheta.style.color = '#333';
    eticheta.style.padding = '0.2em';

    // vom plasa elementele <label> si <input> intr-un container 
    let container = document.createElement ('div');
    container.className = "interactiv";
    container.appendChild (eticheta);
    container.appendChild (control);

    // vom adauga nodul container la elementul dat ca parametru
    element.appendChild (container);
}

// preluam elementul de tip formular
let formular = document.getElementById ('unFormular');
// adaugam controalele de interactiune dorite
adaugaControl (formular, 'text', 'nume', 'Numele meu: ');
adaugaControl (formular, 'password', 'parola', '<em>Codul secret</em>: ');
adaugaControl (formular, 'checkbox', 'particip', 'Particip? ');
for (let an = 2023; an <= 2025; an++) {
    adaugaControl (formular, 'radio', 'an', 'Web Hackathon ' + an);
}