Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>Kein datensatz</title>
    <style>

    #container{
        background-color: #CCC;
        display: block;
        width: 286px;
        border: 1px solid black;
    }

    .szvg{
        width: 103px;
        float: left;
    }

    .mezo{
        padding: 5px;
        clear: both;
    }

    #klikk{
        margin: 5px;
        width: 276px;
    }

    #valasz{
        font-size: 11px;
        margin: 10px 0 10px 0;
    }

    #valasz > input{
        width: 18px;
    }

    textarea{
        resize: none;
        margin: 5px;
        width: 270px;
        height: 300px;
    }

    body{
        font-family: Calibri, Verdana, Tahoma, Geneva, sans-serif;
    }

    </style>
    <script>
    function csapassad(){
        var spid = document.jozsi.sp.value;
        var lord = document.jozsi.lord.value;
        var netz = document.jozsi.netz.value;
        var rou1 = document.jozsi.r1.value;
        var rou2 = document.jozsi.r2.value;

        if(rou1 === ""){
            rou1 = rou2;
            rou2 = "";
        }

        if (document.getElementById("hotline").checked) {
            document.getElementById("oput").value = "lofasz";
        }

        if (document.getElementById("fconf").checked) {
            alert("fc");
        }

        if (document.getElementById("confehlt").checked) {
            alert("cf");
        }

        if (document.getElementById("radius").checked) {
            alert("rd");
        }
    }
    </script>
</head>
<body>
<div id = "container">
    <form name="jozsi">
        <div class = "mezo">
            <div class = "szvg">SP-ID:&nbsp;</div>
            <input type = "text" name= "sp">
        </div>
        <div class = "mezo">
            <div class = "szvg">LOrd:&nbsp;</div>
            <input type = "text" name= "lord">
        </div>
        <div class = "mezo">
            <div class = "szvg">NETZ:&nbsp;</div>
            <input type = "text" name= "netz">
        </div>
        <div class = "mezo">
            <div class = "szvg">Router 1:&nbsp;</div>
            <input type = "text" name= "r1">
        </div>
        <div class = "mezo">
            <div class = "szvg">Router 2:&nbsp;</div>
            <input type = "text" name= "r2">
        </div>
        <div id = "valasz">
            <input type = "radio" id = "hotline" value="hotline" checked>Hotline
            <input type = "radio" id = "fconf" value="fconf">Final Config
            <input type = "radio" id = "confehlt" value="confehlt">Konfig fehlt
            <input type = "radio" id = "radius" value="radius">RADIUS
        </div>
        <input type = "button" id = "klikk" onclick = "csapassad()" value = "Generál">
        <br />
        <textarea id="oput" placeholder = "Használat: töltsd ki a mezőket, válassz egy gombot és generáld! Ide kerül az output." readonly></textarea>
    </form>
</div>
</body>
</html>