1. In-Line Edit for Form
Inline Edit pattern enables users to edit text directly on the same page instead of navigating them to another page for editing the text. This is useful when the user may want to make a single edit without the need to refresh the entire form to make it editable. This pattern would help user to edit the info they need edit accurately and reduce the mistake operation.
Single Field Inline Edit Design
- Only one item can be edited at a time. Users commit to or cancel changes by clicking Save or Cancel.
This a Staff Management System，most information in the form is management by company, only nickname and personal telephone number can be edit by employee.
There are three status to show to the in-line edit process.
This a personal information page, all the info in the form is added by users and all the info allow user to edit.
- In the usage scenarios like example A which with fewer fields can be edited. Displaying the Edit icons will help user discover them directly.
- In the usage scenarios like example B, most information allow user to edit. The edit icon can be hidden. Because when there are too many edit icons. The UI is obviously going to look cluttered. You can hover your cursor over the name. Once you hover over the name, you will see the information getting enclosed inside a rectangular box.
Multiple Field Inline Edit Design
A user try to edit a group information such as his birthday. When he hover the birthday number, he will see the hover status same as the following image. Once he click inside the rectangular box, the field becomes input groups with save and cancel buttons.
- This pattern applies to form content views.
- This pattern does not include bulk actions (editing multiple fields at once).
- This pattern applies to fewer fields need to be edited.
Field Inline edit components need to be created
2. A toggle to a full edit mode
If the form need users to updated a lot of information at one time. We would better giving a Edit button on the top. After click the edit button turn the page to edit status with group of fields.
- Users commit to or cancel changes by clicking Save or Cancel
Edit status （full page view）
- This pattern applies to edit multiple fields at once. If users usually edit only a few fields, do not use this pattern. Field Inline Edit will be better.
- Either edit view in a full page view or modal is make sense. We would better keep the consistent use habit. If the information add by modal, when you click edit button, you can return to modal status with the origin information. If it from a full page, you can return to the full page view.
3. Real-time sharing form
Some real-time sharing form such as Google sheet which without cancel and save button. Keep edit mode always on.
Welcome more feedback about Inline Edit on Forms. Thank you~