Как правильно добавить элементы через innerhtml
const userName = "xormakor"
console.log(userName[0]) // x
console.log(userName[1]) // o
// и так далее..length, которое показывает сколько символов в строке.0 до длины строки-1 (так как нумерация с нуля), на каждой итерации цикла взять букву из строки по индексу текущей итерации, и если она соответствует нужной - увеличить счётчик..split(' ') и для элемента каждого проделать нужную процедуру.
Кнопке в форме можно не прописывать type=submit, это её действие в форме по умолчанию.