Forms

Close this notice

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level: 
Beginner

We provide default form styles with a focus on quick visual scanning (avoiding the common zig-zag eye tracking of typical horizontal layouts). Historically you needed to add a class to opt-in to these styles, however, that led to many developers forgetting to style their forms. We realize that these styles may cause problems with other plugins or widgets. Just be aware that you may need to add additional CSS to adjust those. We also recommend using list elements to handle order and layout. You can use the class .wdn-std to retrun list elements to the standard bullet or number format.

Basic example

Sample Form Content
  4. * The Most Important Question: I Can Has Cheezburger?
    1. Yes, you get a cheezburger
    2. No, you don't
    3. Maybe, somebody might get one
  6. * denotes required field 
<form action="?" method="post">
    <fieldset>
        <legend>Sample Form Content</legend>
        <ol>
            <li>
                <label for="name">
                    <span class="required">*</span>
                    Name
                    <span class="helper">Enter Your Full Name</span>
                </label>
                <input id="name" name="name" type="text">
            </li>
            <li>
                <label for="email">Email</label>
                <input id="email" name="email" type="text">
            </li>
            <li>
                <label for="campus">Campus</label>
                <select name="campus" id="campus">
                    <option value="" selected="selected"> </option>
                    <option value="unl">UNL</option>
                    <option value="unk">UNK</option>
                    <option value="uno">UNO</option>
                    <option value="unmc">UNMC</option>
                </select>
            </li>
            <li>
                <fieldset>
                    <legend>
                        <span class="required">*</span>
                        The Most Important Question: I Can Has Cheezburger?
                    </legend>
                    <ol>
                         <li>
                             <input value="1" name="helpful" id="helpful_yes" type="radio">
                             <label for="helpful_yes">Yes</label>
                         </li>
                         <li>
                           <input value="0" name="helpful" id="helpful_no" type="radio">
                           <label for="helpful_no">No</label>
                         </li>
                         <li>
                             <input value="2" name="helpful" id="helpful_maybe" type="radio">
                             <label for="helpful_maybe">Maybe</label>
                         </li>
                    </ol>
                    <ol class="wdn-std">
                        <li>Yes, you get a cheezburger</li>
                        <li>No, you don't</li>
                        <li>Maybe, somebody might get one</li>
                    </ol>
                </fieldset>
            </li>
            <li>
                <label for="helpful_comments">In what way?</label>
                <textarea id="helpful_comments" name="comments" rows="4" cols="20"></textarea>
            </li>
            <li class="reqnote">
                <span class="required">*</span> denotes required field
            </li>
        </ol>
    </fieldset>
    <input name="submit" value="Submit" type="submit">
</form>

Accessibility Considerations: 

There are many things to consider with HTML forms in regards to making them accessible

  • Make sure that all form controls have a <label> element. The <label> can be associated with the form control either by using the for attribute to reference the form control's id attribute, or by making the form control a child of the <label> element.
  • Try using just your keyboard to fill out and submit the form. Sometimes elements can become focused in the wrong order and sometimes javascript widgets can prevent submitting the form entirely.
Contributed By: 
IIM

Comments

jsadler2's photo

Submitted by Jeff Sadler on Mon, 2020-05-18 13:57

gg