Forms

by inuitcss

HTML

<link rel="stylesheet" href="http://inuitcss.com/inuit.min.css">
<form action=#>
    
    <fieldset>

        <legend>Personal details</legend>
        
        <ul class=form-fields>
            
            <li>
                <label for=first-name>First name</label>
                <input type=text class=text-input id=first-name>
            </li>
            
            <li>
                <label for=last-name>Last name</label>
                <input type=text class=text-input id=last-name>
            </li>
            
            <li>
                <label for=email>Email</label>
                <input type=email class=text-input id=email>
                <small class=extra-help>.edu emails only</small>
            </li>
            
        </ul>
            
    </fieldset>

    <fieldset>
        
        <legend>Contacting you</legend>
        
        <p>We may contact you from time to time&hellip;</p>
        
        <ul class=form-fields>
            
            <li>
                <span class=label>How would you like to be contacted?</span>
                
                <ul class=check-list>
                    <li>
                        <input type=checkbox id=by-email> <label for=by-email>By email</label>
                    </li>
                    <li>
                        <input type=checkbox id=by-post> <label for=by-post>By post</label>
                    </li>
                    <li>
                        <input type=checkbox id=by-pigeon> <label for=by-pigeon>By carrier pigeon</label>
                    </li>
                </ul>
                
            </li>
            
            <li>
                <span class=label>How often would you like to be contacted?</span>
                
                <ul class="check-list  multi-list  two-cols">
                    <li>
                        <input type=radio name=frequency id=weekly> <label for=weekly>Weekly</label>
                    </li>
                ...

CSS

/**
 * These demo styles sit on top of inuit.css
 * github.com/csswizardry/inuit.css/blob/master/inuit.css/base/_forms.scss
 */

html{
    font:1em/1.5 Georgia, serif;
    padding:5%;
    background-color:#fff;
    color:#333;
}
label,
.label{
    font:bold 0.75em/2 sans-serif;
}