<form>
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="surname">Фамилия:</label>
    <input type="text" id="surname" name="surname"><br><br>
    <button type="button" onclick="countLetters()">Отправить</button>
</form>
form {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}

label {
    font-weight: bold;
    font-size: 20px;
}

input {
    padding: 10px;
    font-size: 18px;
    margin-bottom: 10px;
}

button {
    background-color: #3674f4;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
}
function countLetters() {
    var name = document.getElementById("name").value;
    var surname = document.getElementById("surname").value;
    var num_o = 0;
    var num_a = 0;
    for (let i = 0; i < surname.length; i++) {
        if (surname[i].toLowerCase() === 'о') {
            num_o++;
        }
    }
    for (let i = 0; i < name.length; i++) {
        if (name[i].toLowerCase() === 'а') {
            num_a++;
        }
    }
    alert("Количество букв 'о' в фамилии:  " + num_o + "\nКоличество букв 'а' в имени:" + num_a);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.