Password Generator

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Password Generator</title>
        <style>
            body{margin:0;padding:10px;font:small/normal arial,sans-serif;}
            input,textarea,select,button{font-family:inherit;margin:0;}
            textarea{display:block;resize:none;overflow:auto;}
            input[type="text"],textarea,select{padding:2px 4px;border:solid 1px #bebebe;}
            .label{float:left;width:180px;font-weight:bold;text-align:right;}
            .field{margin-left:190px;width:400px;}
            .label,.field{line-height:30px;}
            .field input[type="text"],textarea{width:96%;}
        </style>
        <script type="text/javascript">
            function randChars(length, chars) {
                length = length || 6;
                chars = chars || 'QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890';
                var ret = '';
                while (ret.length < length) ret += chars.charAt(Math.random() * chars.length);
                return ret;
            }

            onload = function () {
                var frm = document.getElementById('form1');
                frm.onsubmit = function (e) {
                    e.preventDefault();
                    var passwords = [];
                    for (var i = 0; i < 10; ++i) passwords.push( randChars(this.length.value, this.chars.value) );
                    console.log(passwords);
                    this.result.value = passwords.join('\n');
                };
            };
        </script>
    </head>
    <body>
        <h1>Password Generator</h1>
        <form action="#" id="form1">
            <div class="label">
                <label for="length">Password length</label>
            </div>
            <div class="field">
                <input id="length" name="length" onchange="this.value=parseInt(this.value)" value="10" size="2">
            </div>
            <div class="label">
                <label for="chars">Used chars</label>
            </div>
            <div class="field">
                <input type="text" id="chars" name="chars" value="QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890">
            </div>
            <div class="field">
                <input type="checkbox" id="set2" checked onchange="this.form.chars.value = this.form.chars.value.replace(/[a-z]/g, ''); if (this.checked) this.form.chars.value += 'qwertyuiopasdfghjklzxcvbnm';">
                <label for="set2">lower latin</label>
            </div>
            <div class="field">
                <input type="checkbox" id="set1" checked onchange="this.form.chars.value = this.form.chars.value.replace(/[A-Z]/g, ''); if (this.checked) this.form.chars.value += 'QWERTYUIOPASDFGHJKLZXCVBNM';">
                <label for="set1">upper latin</label>
            </div>
            <div class="field">
                <input type="checkbox" id="set3" checked onchange="this.form.chars.value = this.form.chars.value.replace(/\d/g, ''); if (this.checked) this.form.chars.value += '1234567890';">
                <label for="set3">digits</label>
            </div>
            <div class="field">
                <input type="checkbox" id="set4" onchange="this.form.chars.value = this.form.chars.value.replace(/[\x22-\x2f\x3a-\x40\x5b-\x60\x7b-\x7e]/g, ''); if (this.checked) this.form.chars.value += '\x22#$%&\x27()*+,-./:;<=>?@[\]^_`{|}~';">
                <label for="set4">delims</label>
            </div>
            <div class="field">
                <textarea name="result" rows="10" placeholder="Result"></textarea>
            </div>
            <div class="field">
                <button>Generate</button>
            </div>
        </form>
    </body>
</html>