Can you use <input> without a server? - html

Question

I want to use ‹input› without PHP because my code editor (Glitch.com) doesn't work well with PHP. Is there a way to use ‹input› without server-side code? Example: Somehow stores the input as a variable. This is incorrect, I know but can I do something like this?
<form>
<label for="FirstName">First name:</label>
var input = <input type="text" id="fname" name="fname">
</form>
Then like use a getElementById and replace the text with the input variable.
I know I can use prompt(), but I don't want a window popping up, but something like this:
<form>
<label for="Username">Enter New Name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="Submit" value="Submit">
</form>
If you can help,
Thanks!
Update:
What I am trying to accomplish is I am making a scorekeeper, and I want the user to be able to rename themselves. Sorry if I wasn't clear.

Answer 1

You can definetely achieve this using Javascript:
const firstName = document.querySelector('#fname');
const lastName = document.querySelector('#lname');
const submit_button = document.querySelector('input[type="button"]');
const heading = document.querySelector('h1')
submit_button.addEventListener('click', () => {
heading.textContent = "Last Name: " + lastName.value;
})
<h1 class="display-first-name"></h1>
<form>
<label for="FirstName">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="LastName">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="button" value="Submit">
</form>