<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
<style type="text/css">
    h1{
        font-family: 'Bree Serif', serif;
        color: blue;
    }
    p{
        font-family: 'Bree Serif', serif;
        color: blue;
    }
    p.hasil{
        font-family: 'Bree Serif', serif;
        color: black;
    }
    input#kalimat{
        border: 2px inset black;
        background: linear-gradient(to bottom, #0033cc 0%, #ff0066 100%);
        font-family: 'Bree Serif', serif;
        font-size: 15px;
        border-radius: 50px;
        text-align: center;
        width: 300px;
    }
    input#button{
        border: 3px outset blue;
        background-color: silver;
        font-family: 'Bree Serif', serif;
        transition-duration: 0.5s;
        font-size: 15px;
        border-radius: 50px;
    }
    input#button:hover{
        border: 3px outset blue;
        background: linear-gradient(to bottom, #0033cc 0%, #ff0066 100%);
        font-family: 'Bree Serif', serif;
        font-size: 17px;
        border-radius: 50px;
        color: white;
    }
</style>

<h1>Hitung Jumlah Huruf</h1>
<form id="jumlahHuruf" name="jumlahHuruf" method="post">
    <p>
        Masukkan Kalimat :
        <input type="text" name="kalimat" id="kalimat" autocomplete="off" required="">
        <input type="radio" name="huruf" value="a">a
        <input type="radio" name="huruf" value="i">i
        <input type="radio" name="huruf" value="u">u
        <input type="radio" name="huruf" value="e">e
        <input type="radio" name="huruf" value="o">o
        <input type="submit" name="button" id="button" value="Hitung">
    </p>
</form>

<p class="hasil">
<?php
if (isset($_POST['button'])) {
    $kalimat = $_POST['kalimat'];
    $huruf = $_POST['huruf'];
    $length = strlen($kalimat);

    echo "Jumlah huruf \"<b>$huruf</b>\" dari kalimat \"<b>$kalimat</b>\" adalah ". substr_count($kalimat, $huruf);
}
?>
</p>