crop_rotate
Run
<!DOCTYPE html> <html> <head> <style> .input { height:30px; width:30%; } .btn { padding:10px; background-color:#007bff; border:none; color:white; } </style> </head> <body> <h1>JavaScript on focus</h1> <p id="paragraph">this input will take border after value changed , after blured</p> <form id="form" action="" method="post"> <input type="text" class="input" placeholder="Enter Username"> <input class="btn" type="submit"> </form> <script> let form = document.getElementById("form"); form.addEventListener('submit',()=>{ alert('Data Sent successfully') }); </script> </body> </html>
PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg0KPHN0eWxlPg0KIC5pbnB1dA0KIHsNCiAgIGhlaWdodDozMHB4Ow0KICAgd2lkdGg6MzAlOw0KIH0NCiAuYnRuDQogew0KICAgcGFkZGluZzoxMHB4Ow0KICAgYmFja2dyb3VuZC1jb2xvcjojMDA3YmZmOw0KICAgYm9yZGVyOm5vbmU7DQogICBjb2xvcjp3aGl0ZTsNCiB9DQo8L3N0eWxlPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4gOjotd2Via2l0LXNjcm9sbGJhcnt3aWR0aDo3cHg7aGVpZ2h0OjdweDt9Ojotd2Via2l0LXNjcm9sbGJhci10cmFja3tiYWNrZ3JvdW5kOiNmZmY7fTo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWJ7Ym9yZGVyLXJhZGl1czo1cHg7YmFja2dyb3VuZDojMmY0NWZmO308L3N0eWxlPjwvaGVhZD4NCjxib2R5Pg0KPGgxPkphdmFTY3JpcHQgb24gZm9jdXM8L2gxPg0KPHAgaWQ9InBhcmFncmFwaCI+dGhpcyBpbnB1dCB3aWxsIHRha2UgYm9yZGVyIGFmdGVyIHZhbHVlIGNoYW5nZWQgLCBhZnRlciBibHVyZWQ8L3A+DQo8Zm9ybSBpZD0iZm9ybSIgYWN0aW9uPSIiIG1ldGhvZD0icG9zdCI+DQogIDxpbnB1dCB0eXBlPSJ0ZXh0IiBjbGFzcz0iaW5wdXQiIHBsYWNlaG9sZGVyPSJFbnRlciBVc2VybmFtZSI+DQogIDxpbnB1dCBjbGFzcz0iYnRuIiB0eXBlPSJzdWJtaXQiPg0KPC9mb3JtPg0KPHNjcmlwdD4NCmxldCBmb3JtID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImZvcm0iKTsNCmZvcm0uYWRkRXZlbnRMaXN0ZW5lcignc3VibWl0JywoKT0+ew0KICAgYWxlcnQoJ0RhdGEgU2VudCBzdWNjZXNzZnVsbHknKQ0KfSk7DQo8L3NjcmlwdD4NCjwvYm9keT4NCjwvaHRtbD4=