DOM Form Events In Javascript

 <!DOCTYPE html>

<html>

    <head>

        <title>Form Events</title>

    </head>

    <body>

        <h1>Form Events</h1>

        <form action="" onsubmit="submitFunction()">

            <label>First Name</label>

            <input type="text" placeholder="first_name" id="fname" value="adnan" onfocus="focusFunction(this)" onblur="blurFunction(this)" oninput="inputFunction(this)"

            onselect="selectFunction(this)" />

            <br>

            <br>

            <label>Last Name</label>

            <input type="text" placeholder="last_name" id="lname" onfocus="focusFunction(this)" onblur="blurFunction(this)"

            oninput="inputFunction(this)"

            oninvalid="alert('please fill the last name feild..!')"

            required

            />

            <br>

            <br>

            <label>Favourit Fruit</label>

            <select id="fruit" onfocus="focusFunction(this)" onblur="blurFunction(this)"

            onchange="changeFunction(this)"

            >

                <option value="0">Select...</option>

                <option value="1">Apple</option>

                <option value="2">Orange</option>

            </select>

            <br>

            <br>

            <button type="submit">Submit Event</button>

        </form>

        <div id="text" style="border:1px solid pink">

        </div>

        <script>

            function focusFunction(element){

                // document.getElementById('fname').style.background = 'lime';

                element.style.background = 'lime';

            }

            function blurFunction(element){

                // document.getElementById('fname').style.background = 'lime';

                element.style.background = '';

            }

            // Input event.

            // this event only work on input and textarea

            // this event trigger when we start writing on the input or textarea

            function inputFunction(element){

             var val = element.value;

             document.querySelector('#text').innerHTML = val;

            }

            // onchange event

            // this event work like oninput event but run on if chnage happen than previous state.

            // see the chnage effect on chnage select option.

            // input feld pr onchnage event teb kaam krega jb ap lost focus kreinge mean on feild se focus remove kreinge.

            function changeFunction(element){

                var val = element.value;

                document.querySelector('#text').innerHTML = val;

            }

            // onselect event

            // this event run when we select content in input feild

            // we use this event in input or textarea.

            function selectFunction(element){

                var val = element.value;

                console.log(val);

                console.log('you have selected some text');

            }

            // onsubmit event

            // this event we use on submit button/ input

            // when user fill the form and submit the form, this event triggers.

            function submitFunction(){

                var x = document.getElementById('fname').value;

                alert('Hello '+ x);

            }

            // oninvalid event

            // when user submit form with empty input feild if feild is required than invalid event fire(run).

        </script>

    </body>

</html>