JSFiddle - React, Tailwind, and code Playground

by elpakks

HTML

<h1>Search</h1>

<form id = "form" action="ExamSearchSubmit.php" onmouseover="mOver(this)"
      style="background-color: #867970" method="post">


    <label for="name">Full Name</label><input id="name" type="text" value="" name="name"/>
    <label for="atomicnum">Show atomic number</label><input id="atomicnum" type="checkbox" checked=""</>

    <input type="submit" value="Search Elements" onclick="return onsubmit()"/>

CSS

form {background-color: #867970

}

#name {
    width: 200px
}

label {width:75px; display: inline-block;}

form * {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
}

JavaScript

function onsubmit(){
    checkName()
    mOver();
    
    function checkName(){
        var input = document.getElementById("name");
        var name = input.value;
        if (name) {
            return true;
        }
        else {return false}
    }
    
}



function mOver() {
    var form=document.getElementById("form");
    form.style.backgroundColor = "#30352A";
}

function mOut(obj){
    var form=document.getElementById("form");
    form.style.backgroundColor = "#867970";
}