הלינקייה: מגזין חודשי למפתחים

רוצה לשמוע על כל האירועים, המדריכים, הקורסים והמאמרים שנכתבו החודש ?
הלינקייה הינו מגזין חופשי בעברית שמשאיר אותך בעניינים.
בלי ספאם. בלי שטויות. פעם בחודש אצלך בתיבה.

CSS Form Examples

Here are two examples for using CSS to make forms look much better

<html>
    <head>
        <title>Look Ma' no tables</title>
        <link rel="stylesheet" href="master.css" />
    </head>
 
    <body>
        <h1>User Registration Form</h1>
        <form>
 
            <div>
                <label for="fullname">Name:</label>
                <input type="text" name="fullname" class="txt" />
            </div>
 
            <div>
                <label for="email">Email Address:</label>
                <input type="text" name="email" class="txt" />
 
            </div>
 
            <div>
                <label for="password1">Password:</label>
                <input type="password" name="password1" class="txt" />
            </div>
 
            <div>
                <label for="password2">Confirm Password:</label>
 
                <input type="password" name="password2" class="txt" />
            </div>
 
            <div>
                <label for="level">Membership Type:</label>
                <select name="level">
                        <option value="silver">Silver</option>
                        <option value="gold">Gold</option>
 
                </select>
            </div>
            <div>
                <input type="submit" name="btnSubmit" value="Sign Up!"
                class="btn" />
            </div>
        </form>
    </body>
</html>
h1 {
    font: 1.2em Arial, Helvetica, sans-serif;
}
 
input.txt {
    color: #00008B;
    background-color: #E3F2F7;
    border: 1px inset #00008B;
    width: 200px;
}
 
input.btn {
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px outset #00008B;
}
 
form {
    width: 40%;
}
 
form div {
    clear: left;
    margin: 0;
    padding: 0;
    padding-top: 0.6em;
}
 
form div label {
    float: left;
    width: 40%;
    font: bold 0.9em Arial, Helvetica, sans-serif;
}
<html>
    <head>
        <title>Look Ma' no tables</title>
        <link rel="stylesheet" href="master.css" />
    </head>
 
    <body>
        <h1>User Registration Form</h1>
        <form>
 
            <fieldset>
                <legend>Personal Information</legend>
 
            <div>
                <label for="fullname">Name:</label>
                <input type="text" name="fullname" class="txt" />
            </div>
 
            <div>
 
                <label for="email">Email Address:</label>
                <input type="text" name="email" class="txt" />
            </div>
 
            <div>
                <label for="password1">Password:</label>
                <input type="password" name="password1" class="txt" />
            </div>
 
            <div>
                <label for="password2">Confirm Password:</label>
                <input type="password" name="password2" class="txt" />
            </div>
            </fieldset>
 
            <fieldset>
                <legend>Address Details</legend>
 
                <div>
                    <label for="address1">Address Line One:</label>
                    <input type="text" name="address1" class="txt" />
                </div>
                <div>
                    <label for="address2">Address Line Two:</label>
                    <input type="text" name="address2" class="txt" />
                </div>
 
                <div>
                        <label for="city">Town / City:</label>
                        <input type="text" name="city" class="txt" />
                </div>
 
                <div>
                        <label for="zip">Zip / Post Code:</label>
                        <input type="text" name="zip" class="txt" />
 
                </div>
            </fieldset>
            <div>
                <input type="submit" name="btnSubmit" value="Sign Up!"
                class="btn" />
            </div>
        </form>
    </body>
</html>
 
 
fieldset {
    border: 1px dotted #61B5CF;
    margin-top: 1.4em;
    padding: 0.6em;
}
 
legend {
    font: bold 0.8em Arial, Helvetica, sans-serif;
    color: #00008B;
    background-color: #FFFFFF;
}
 
 
(function () {
    console.log('forms.js');
 
    var validators = {
        required : function(input) {
                var val = dojo.attr(input, 'value');
 
                if ( val && val.length > 0 ) {
                    return true;
                } else {
                    return false;
                }            
            },
 
        fail : function(input) {
            return false;
        }
    };
 
    dojo.ready(function() {
        console.log('dojo ready');
        var fields = dojo.query('form div');
 
        fields.onchange(function(ev) {
            console.log('got event');
            var row = ev.currentTarget,
                action = dojo.attr(row, 'validation'),
                input  = ev.target,
                pass;
 
            var func = validators[action];        
 
            console.dir(row);
            console.log('func = ' + func + '; action = ' + action);
            if ( func !== undefined ) {
                pass = func(input);
 
                if ( ! pass ) {
                    dojo.addClass(row, 'error');
                } else {
                    dojo.removeClass(row, 'error');
                }
 
            }
        });
    });
}());