Control flow

Question

How can I make the details from a form appear on a web page and
Can also be search from the home web page

Answer 1

HTML:

<form id="form">
<input id="name" placeholder="Name">
<button>Save</button>
</form>

<input id="search" placeholder="Search">
<ul id="list"></ul>

JavaScript:

<script>
const form = document.getElementById("form");
const list = document.getElementById("list");
const search = document.getElementById("search");
const data = [];

form.onsubmit = e => {
e.preventDefault();
const name = form.name.value;
data.push(name);
show(data);
form.reset();
};

search.oninput = () => {
const filtered = data.filter(name =>
name.toLowerCase().includes(search.value.toLowerCase())
);
show(filtered);
};

function show(arr) {
list.innerHTML = arr.map(name => `<li>${name}</li>`).join("");
}
</script>

This lets you:

Enter a name in the form and save it

Display the names in a list

Search through them live