Something went wrong. Try again.
Codelabs for major subjects in the BSIT course at STI College Meycauayan. gitlab.com/andreijiroh-dev/labs/studentops-codelab
codelabs labs
Something went wrong. Try again.
1.5 kB · 59 lines
HTML
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fill Up Form</title> <link rel="stylesheet" href="style.css"></head>
<body> <main class="page-layout"> <section class="form-section"> <h1>FILL UP FORM</h1>
<form id="nameinput"> <div> <label for="lastname">Surname</label> <input id="lastname"> </div>
<div> <label for="firstname">First Name</label> <input id="firstname"> </div>
<div> <label for="middlename">Middle Initial</label> <input id="middlename"> </div> </form>
<button id="submitButton">Submit</button> </section>
<section class="output-section"> <p>OUTPUT:</p> <p id="output"></p> </section> </main>
<script> document.getElementById("submitButton").addEventListener("click", () => { const form = document.getElementById("nameinput"); const surname = document.getElementById("lastname").value; const firstname = document.getElementById("firstname").value; const middlename = document.getElementById("middlename").value; const output = document.getElementById("output"); const submittedName = `${surname}, ${firstname} ${middlename}`;
output.textContent += `${output.textContent ? "\n" : ""}${submittedName}`; form.reset(); document.getElementById("lastname").focus(); }); </script>
</body>
</html>