<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">

<form id="tangga" name="tangga" method="post">
    <table>
        <tr>
            <th colspan="3">Tangga Berwarna</th>
        </tr>
        <tr>
            <td class="batas" colspan="3"></td>
        </tr>
        <tr>
            <td>Masukkan Jumlah Anak Tangga</td>
            <td>:</td>
            <td>
                <input type="number" name="jml_anakTangga" autocomplete="off" required="">
            </td>
        </tr>
        <tr>
            <td>Warna</td>
            <td>:</td>
            <td>
                <input type="radio" name="warna" value="green">Hijau
                <input type="radio" name="warna" value="purple">Ungu
                <input type="radio" name="warna" value="yellow">Kuning
                <input type="radio" name="warna" value="blue">Biru
                <input type="radio" name="warna" value="grey">Abu
            </td>
        </tr>
        <tr>
            <th colspan="3">
                <input type="submit" name="button" id="button" value="Buat Tangga">
            </th>
        </tr>
    </table>
</form>

<?php
if (isset($_POST['button'])) {
$jml_anakTangga = $_POST['jml_anakTangga'];
$warna = $_POST['warna'];

    for ($i = 1; $i <= $jml_anakTangga; $i++) {
        for ($j = 1; $j <= $i; $j++) {
            echo "<div></div>";
        }
        echo "<br/>";
    }
}
?>

<style type="text/css">
    div{
        width: 30px;
        height: 30px;
        background-color: <?php echo $warna ?>;
        display: inline-block;
        margin: 3px;
    }
    table{
        border: 5px outset darkblue;
        background: linear-gradient(to right, #0033cc 0%, #ff0066 100%);
    }
    th{
        font-family: 'Bree Serif', serif;
        font-size: 25px;
        width: 200px;
    }
    td{
        font-family: 'Bree Serif', serif;
        font-size: 20px;
    }
    td.batas{
        height: 5px;
        border-radius: 50px;
        background-color: cyan;
    }
    input{
        border: 2px inset black;
        background-color: silver;
        font-family: 'Bree Serif', serif;
        font-size: 15px;
        border-radius: 50px;
        text-align: center;
    }
    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>