JSFiddle - React, Tailwind, and code Playground

by alexg88

HTML

<FORM id="formulario" action="http://algunsitio.com/prog/usuarionuevo" method="post">
    <P>
    <LABEL for="nombre">Nombre: </LABEL>
              <INPUT class="otro" type="text" id="nombre"><BR>
    <LABEL for="apellido">Apellido: </LABEL>
              <INPUT type="text" id="apellido"><BR>
    <LABEL for="email">email: </LABEL>
              <INPUT type="text" id="email"><BR>
    <INPUT type="radio" name="sexo" value="Varón"> Varón<BR>
    <INPUT type="radio" name="sexo" value="Mujer"> Mujer<BR>
    <INPUT type="submit" value="Enviar"> <INPUT type="reset">
    </P>
 </FORM>

CSS

.remarcado{    
 border-color:red;  
}

JavaScript

function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
    if (!hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}

function colorear(objeto){
    
   addClass(objeto,"remarcado"); 
}


function limpiar(){
    removeClass(this,"remarcado");
}



formulario = document.getElementById('formulario');

for(indice in formulario.elements){   
   elemento = formulario.elements[indice];
    if (elemento.type == "text")
    {
     colorear(elemento);
     elemento.onclick = limpiar;
    }
}