>menu UVA, School of Medicine Portal

Forms

Toggle Index

For field label guidelines, refer to Typography.

Form Guidelines

For button design guidelines, refer to Buttons.

  • Buttons on a form should be left-aligned.
  • The primary button should be placed on the left.
  • In a single field form, place the buttons next to the field.
  • If there is a need for a back/return link, place it on the left above the form.
  • Users should have the option to press the "Enter" key to search, in addition to pressing the search button.

Sample Form

                
                <form>
                <fieldset>
                    <label for="nameField">Name</label>
                    <input type="text" placeholder="CJ Patoilo" id="nameField">
                    <div class="row">
                        <div class="column">
                            <label for="ageRangeField">Age Range</label>
                            <select id="ageRangeField">
                                <option value="0-13">0-13</option>
                                <option value="14-17">14-17</option>
                                <option value="18-23">18-23</option>
                                <option value="24+">24+</option>
                            </select>
                        </div>
                        <div class="column">
                            <label for="genderField">Gender</label>
                            <select id="genderField">
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                    </div>
                    <label for="commentField">Comment</label>
                    <textarea placeholder="Hi CJ …" id="commentField"></textarea>
                    <div class="float-left">
                        <button class="default">Submit</button>
                        <button class="default outline">Cancel</button>
                    </div>
                    <div class="float-right">
                        <button class="danger">Delete</button>
                    </div>
                </fieldset>
                </form>

Radio Buttons

For text guidelines, refer to Typography.

Pre Class
In Class
Post Class
Non Release
Specific Release Time
                
                <input type='radio' name='ReleaseType' value='1'   checked onclick='showspan2("1","span154")'> Pre Class<br>
                    <input type='radio' name='ReleaseType' value='2'  onclick='showspan2("1","span154")'> In Class <br>
                    <input type='radio' name='ReleaseType' value='3'  onclick='showspan2("1","span154")'> Post Class<br>
                    <input type='radio' name='ReleaseType' value='4'  onclick='showspan2("1","span154")'> Non Release<br>
                    <input type='radio' name='ReleaseType' value='5'  onclick='showspan2("span154","span154")'> Specific Release Time<br>

Checkboxes

For text guidelines, refer to Typography. 






                
                    <input type="checkbox"  name="Roles"  value="12"
                        checked="checked" />
                        <label for="Role_12" class="label-inline">Adhoc</label><br />
                        <input type="checkbox"  name="Roles"  value="11"/>
                        <label for="Role_11" class="label-inline">Admin</label><br />
                        <input type="checkbox"  name="Roles"  value="13"/>
                        <label for="Role_13" class="label-inline">Clerkship Admin</label><br />
                        <input type="checkbox"  name="Roles"  value="3"/>
                        <label for="Role_3" class="label-inline">Coach</label><br />
                        <input type="checkbox"  name="Roles"  value="2"/>
                        <label for="Role_2" class="label-inline">College Dean</label><br />

Tooltips

If instructional text is needed to provide additional context for a field label, use tooltips. Users can hover over the question mark icon to see the text. 

                
                    <label for="nameField" title='First and last name.'>Name <i data-feather="help-circle" style='height:12'></i></label>

Date/Time Fields

For Date/Time fields, use the date-input-field class. Unless the field is required to have a default date displayed.

Required Input Fields

Pre Class
In Class
Pre Class In Class
            		
            		<fieldset>
            			<label>Required Field</label>
            			<input type="text" required="required">
            		</fieldset>