JSFiddle - React, Tailwind, and code Playground

by elpakks

HTML

<form>
    
    <div id="form">
        
    <div>Name:<input id = "name" type="text" value = "" name="name"/> </div>
	<div>E-mail Address:<input id = "email" type="text" value="" name="email"/></div>
    <div>Gender: <input id="female" type="radio" name="gender" value="female" checked="" /> Female
            <input id="male" type="radio" name="gender" value="male" checked="" /> Male </div>
        
        
    <div>Seeking:<select option="seeking" name="seeking"> 
        <option></option>
         <option>Male</option>
         <option>Female</option>
         <option>Both</option>
        </select></div>
        
    </div>

    <action="assignment4.php" method="post" enctype="multipart/form-data">
    Upload a photo if you wish:
    <input type="file" name="picture" id="picture">
    <input type="submit" value="Upload Image" name="submit">

    
    <div><input type="reset"/></div>
    <div><input type="submit"/></div>

</form>

JavaScript

function genderChanged() {
    var woman = document.getElementById("female");
    var man = document.getElementById("male");
    var mlabel = document.getElementById("male_label");
    var flabel = document.getElementById("female_label");
    mlabel.style.color = '#444444';
    flabel.style.color = '#444444';
    if (woman.checked) {                
        mlabel.style.color = "#04356C";        
    } else {                        
        flabel.style.color = "#E869AA";
    }
}


function events() {
    document.getElementById("female").onclick = genderChanged;
    document.getElementById("male").onclick = genderChanged;
}

window.onload = events;