Password generator


<!DOCTYPE html>
<html>
<head>
    <title>Random password generator</title>
    <script type="text/javascript">
        function generate() {
            var pform = document.getElementById("passform")
            var plen = pform.elements["plen"].value;
            var ptype = pform.elements["passtype"].value;
            var pstr = "";
            var alph = ptype;
            for(var i = 0; i < plen; i++) {
                pstr += alph.charAt(Math.floor(Math.random() * alph.length));
            }
            pform.elements["password"].value = pstr;
        }
    </script>
    <style type="text/css">
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Tahoma;
            font-size: 13px
        }
        #container {
            box-shadow: 0 0 20px rgba(50, 50, 50, 0.8);
            min-width: 250px;
        }
        .options {
            padding: 10px 20px;
            background-color: #66ff99;
        }
        .result {
            padding: 10px;
            background-color: #ff6666;
        }
        .result input {
            width: calc(100% - 10px);
            padding: 5px ;
            border: none;
            text-align: center;
        }
        .options #genbut {
            display: block;
            margin: 0 auto;
            margin-top: 10px;
            background: #ff0000;
            border: 1px solid #333;
            padding: 5px 10px;
            font-weight: bold;
            cursor: pointer;
            color: #fff;
        }
        .options #genbut:hover {
            box-shadow: 0 0 10px #ff0000;
        }
        .options #passtype {
            margin-top: 5px;
        }
        .title {
            padding: 10px 20px;
            background-color: #ffff66;
            text-align: center;
            font-size: 15px;
        }
        </style>
</head>
<body>
<div id="container">
    <form id="passform">
        <div class="title"><b>Password Generator</b></div>
        <div class="options">
        <label>Length: </label><input type="number" name="plen" min="6" max="64" value="12" /><br />
        <label>Type: </label>
        <select id="passtype" name="passtype">
            <option value="0123456789">Numbers only</option>
            <option value="abcdefghijklmnopqrstuvwxyz">az</option>
            <option value="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789">azAZ09</option>
        </select><br />

        <input type="button" name="genbut" id="genbut" value="Generate!" onclick="generate()" />
        </div>
        <div class="result">
            <input type="text" name="password" placeholder="Press Generate button" readonly />
        </div>

    </form>
</div>
</body>
</html>