Another useful design pattern that is easy to implement is to allow the user to click a piece of text, have it converted to a text input box, and save its updated value on the server.
This is very useful when you have a table of information and want to edit one field in one of the rows. Instead of loading a whole new page to just edit that row, you can edit the data inline and have it saved by the server. This is demonstrated in the following screenshot:
For this example, I've created a table of names and email addresses, to be saved in a new directory, /2-inline_editing
, as the inline-editing.html
file. Create a standard HTML page, including the <html>
, <head>
, and <body>
elements. I've provided a sample row below, and you should add a few more yourself.
<table> ... <tr> <td>Bob Burry</td> <td>[email protected]</td> <td><a href="edit.php?id=6">edit</a></td> <...