Roderick
Sample data table
Location | Effort to convert into PL | Form Layout | Alignment | Label location | Tooltips | Placeholder text | Validation | Location of validation | Advance input fields | Semantic HTML | Links | Action buttons | Submit | Screenshots |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Edx help center |
| inline | center | No label | no | Yes | no validation | none |
| No. No label associated with input field |
| no hover, no active | goes to result page |
|
edX support request https://support.edx.org/hc/en-us/requests |
| stack | left | above | none | none | inline | below | file upload | yes | no | grays out on submit | goes back to help desk page with a small blue success message |
|
Financial aid form https://courses.edx.org/financial-assistance/apply/ |
| Stack | left | above | none | none | summary | top | none | no, field instructions shouldn't be inside a <span> | no | grays out on submit | success message with link to dashboard |
|
might be really hard | stack and inline | center | above, dynamic. | no tooltips | yes | inline with dynamic icons | icon on right | all with transitions on labels | maybe | no | grays out | ? |
| |
Contact us | small | stack two columns | left | left | no | no | summary | top | none | yes | no | no hover, no active | goes to a success page |
|