Schalk Venter PRO
🔧 Front-end Development / 🎨 UI Design / 🌍 Social Good / ❤️ Destigmatising mental illness
The Humble Form
From typewriters to The Terminator
Web 2.0
The future that arrived yesterday
Forms are Scary
Textfields, radios, checkboxes, oh my!
The Post-form World
When forms are not forms
📋
👨🚀
👻
👽
From typewriters to The Terminator
<form action="/authentication-url" method="post">
<div>
<label for="username-element">
<span>Name:</span>
<input type="text" id="username-element" name="username">
</label>
</div>
<div>
<label for="password-element">
<span>Password</span>
<input type="password" id="password-element" name="password">
</label>
</div>
<button type="submit">Login</button>
</form>
<form action="/authentication-url" method="post">
<div>
<label for="username-element">
<span>Name:</span>
<input type="text" id="username-element" name="username">
</label>
</div>
<div>
<label for="password-element">
<span>Password</span>
<input type="password" id="password-element" name="password">
</label>
</div>
<button type="submit">Login</button>
</form>
<form action="/authentication-url" method="post">
<div>
<label for="username-element">
<span>Name:</span>
<input type="text" id="username-element" name="username">
</label>
</div>
<div>
<label for="password-element">
<span>Password</span>
<input type="password" id="password-element" name="password">
</label>
</div>
<button type="submit">Login</button>
</form>
<form action="/authentication-url" method="post">
<div>
<label for="username-element">
<span>Name:</span>
<input type="text" id="username-element" name="username">
</label>
</div>
<div>
<label for="password-element">
<span>Password</span>
<input type="password" id="password-element" name="password">
</label>
</div>
<button type="submit">Login</button>
</form>
"The same applies to nonlinguistic signs. The small slit in the back of jackets, for instance, was once functional, serving to make it easier to mount a horse. Today most people are no longer aware of this. Yet it persists in the design of jackets."
Theo van Leeuwen
Introducing Social Semiotics (2005)
"The same applies to nonlinguistic signs. The small slit in the back of jackets, for instance, was once functional, serving to make it easier to mount a horse. Today most people are no longer aware of this. Yet it persists in the design of jackets."
Theo van Leeuwen
Introducing Social Semiotics (2005)
"The same applies to nonlinguistic signs. The small slit in the back of jackets, for instance, was once functional, serving to make it easier to mount a horse. Today most people are no longer aware of this. Yet it persists in the design of jackets."
Theo van Leeuwen
Introducing Social Semiotics (2005)
"The same applies to nonlinguistic signs. The small slit in the back of jackets, for instance, was once functional, serving to make it easier to mount a horse. Today most people are no longer aware of this. Yet it persists in the design of jackets."
Theo van Leeuwen
Introducing Social Semiotics (2005)
"The same applies to nonlinguistic signs. The small slit in the back of jackets, for instance, was once functional, serving to make it easier to mount a horse. Today most people are no longer aware of this. Yet it persists in the design of jackets."
Theo van Leeuwen
Introducing Social Semiotics (2005)
"The same applies to nonlinguistic signs. The small slit in the back of jackets, for instance, was once functional, serving to make it easier to mount a horse. Today most people are no longer aware of this. Yet it persists in the design of jackets."
Theo van Leeuwen
Introducing Social Semiotics (2005)
"A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. [...] Forms have existed for a significant amount of time, with historians of law having discovered preprinted legal forms from the early 19th century that greatly simplified the task of drafting complaints and various other legal pleadings."
Wikipedia
Form (Document)
"A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. [...] Forms have existed for a significant amount of time, with historians of law having discovered preprinted legal forms from the early 19th century that greatly simplified the task of drafting complaints and various other legal pleadings."
Wikipedia
Form (Document)
"A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. [...] Forms have existed for a significant amount of time, with historians of law having discovered preprinted legal forms from the early 19th century that greatly simplified the task of drafting complaints and various other legal pleadings."
Wikipedia
Form (Document)
"A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. [...] Forms have existed for a significant amount of time, with historians of law having discovered preprinted legal forms from the early 19th century that greatly simplified the task of drafting complaints and various other legal pleadings."
Wikipedia
Form (Document)
"A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. [...] Forms have existed for a significant amount of time, with historians of law having discovered preprinted legal forms from the early 19th century that greatly simplified the task of drafting complaints and various other legal pleadings."
Wikipedia
Form (Document)
"A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. [...] Forms have existed for a significant amount of time, with historians of law having discovered preprinted legal forms from the early 19th century that greatly simplified the task of drafting complaints and various other legal pleadings."
Wikipedia
Form (Document)
"A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. [...] Forms have existed for a significant amount of time, with historians of law having discovered preprinted legal forms from the early 19th century that greatly simplified the task of drafting complaints and various other legal pleadings."
Wikipedia
Form (Document)
"A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. [...] Forms have existed for a significant amount of time, with historians of law having discovered preprinted legal forms from the early 19th century that greatly simplified the task of drafting complaints and various other legal pleadings."
Wikipedia
Form (Document)
"Most forms ask questions. But to save words and therefore save space, the questions usually aren't written out. Instead of asking. "What is your age?" is is better simply to say "Age". [...] The visibility of captions in the upper corner of boxes permits the typist to read them without rolling the typewriter platen up and down as is required when the captions are below the line."
National Archives and Records Service
Record Management Handbook (1960)
"Most forms ask questions. But to save words and therefore save space, the questions usually aren't written out. Instead of asking. "What is your age?" is is better simply to say "Age". [...] The visibility of captions in the upper corner of boxes permits the typist to read them without rolling the typewriter platen up and down as is required when the captions are below the line."
National Archives and Records Service
Record Management Handbook (1960)
"Most forms ask questions. But to save words and therefore save space, the questions usually aren't written out. Instead of asking. "What is your age?" is is better simply to say "Age". [...] The visibility of captions in the upper corner of boxes permits the typist to read them without rolling the typewriter platen up and down as is required when the captions are below the line."
National Archives and Records Service
Record Management Handbook (1960)
"Most forms ask questions. But to save words and therefore save space, the questions usually aren't written out. Instead of asking. "What is your age?" is is better simply to say "Age". [...] The visibility of captions in the upper corner of boxes permits the typist to read them without rolling the typewriter platen up and down as is required when the captions are below the line."
National Archives and Records Service
Record Management Handbook (1960)
"Most forms ask questions. But to save words and therefore save space, the questions usually aren't written out. Instead of asking. "What is your age?" is is better simply to say "Age". [...] The visibility of captions in the upper corner of boxes permits the typist to read them without rolling the typewriter platen up and down as is required when the captions are below the line."
National Archives and Records Service
Record Management Handbook (1960)
"At the end of the 1800s Herman Hollerith invented the recording of data on a medium that could then be read by a machine, developing punched card data processing technology for the 1890 U.S. census. [...] Printing could include having fields named and marked by vertical lines, logos, and more"
Wikipedia
Punched card
"At the end of the 1800s Herman Hollerith invented the recording of data on a medium that could then be read by a machine, developing punched card data processing technology for the 1890 U.S. census. [...] Printing could include having fields named and marked by vertical lines, logos, and more"
Wikipedia
Punched card
"At the end of the 1800s Herman Hollerith invented the recording of data on a medium that could then be read by a machine, developing punched card data processing technology for the 1890 U.S. census. [...] Printing could include having fields named and marked by vertical lines, logos, and more"
Wikipedia
Punched card
"At the end of the 1800s Herman Hollerith invented the recording of data on a medium that could then be read by a machine, developing punched card data processing technology for the 1890 U.S. census. [...] Printing could include having fields named and marked by vertical lines, logos, and more"
Wikipedia
Punched card
Container
Leading Icon
Trailing Icon
Label
Placeholder
Helper Text
Current Value
Container
Leading Icon
Trailing Icon
Label
Placeholder
Helper Text
Current Value
Container
Leading Icon
Trailing Icon
Label
Placeholder
Helper Text
Current Value
Container
Leading Icon
Trailing Icon
Label
Placeholder
Helper Text
Current Value
Container
Leading Icon
Trailing Icon
Label
Placeholder
Helper Text
Current Value
Container
Leading Icon
Trailing Icon
Label
Placeholder
Helper Text
Current Value
Container
Leading Icon
Trailing Icon
Label
Placeholder
Helper Text
Current Value
Container
Leading Icon
Trailing Icon
Label
Placeholder
Helper Text
Current Value
Entered Value
Freeform Input
Selectable Input
Mixed Input
Freeform Input
Selectable Input
Mixed Input
Freeform Input
Selectable Input
Mixed Input
Freeform Input
Selectable Input
Mixed Input
The future that arrived yesterday
"Berners-Lee envisioned a read/write Web. But what had emerged in the 1990s was an essentially read-only Web on which you needed an account with an ISP (Internet service provider) to host your web site, special tools, and/or HTML expertise to create a decent site."
Dan Gillmor
We The Media (2006)
"Berners-Lee envisioned a read/write Web. But what had emerged in the 1990s was an essentially read-only Web on which you needed an account with an ISP (Internet service provider) to host your web site, special tools, and/or HTML expertise to create a decent site."
Dan Gillmor
We The Media (2006)
"Berners-Lee envisioned a read/write Web. But what had emerged in the 1990s was an essentially read-only Web on which you needed an account with an ISP (Internet service provider) to host your web site, special tools, and/or HTML expertise to create a decent site."
Dan Gillmor
We The Media (2006)
"Berners-Lee envisioned a read/write Web. But what had emerged in the 1990s was an essentially read-only Web on which you needed an account with an ISP (Internet service provider) to host your web site, special tools, and/or HTML expertise to create a decent site."
Dan Gillmor
We The Media (2006)
"Berners-Lee envisioned a read/write Web. But what had emerged in the 1990s was an essentially read-only Web on which you needed an account with an ISP (Internet service provider) to host your web site, special tools, and/or HTML expertise to create a decent site."
Dan Gillmor
We The Media (2006)
"Berners-Lee envisioned a read/write Web. But what had emerged in the 1990s was an essentially read-only Web on which you needed an account with an ISP (Internet service provider) to host your web site, special tools, and/or HTML expertise to create a decent site."
Dan Gillmor
We The Media (2006)
"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."
Darcy DiNucci
Print Magazine (1999)
"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."
Darcy DiNucci
Print Magazine (1999)
"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."
Darcy DiNucci
Print Magazine (1999)
"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."
Darcy DiNucci
Print Magazine (1999)
"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."
Darcy DiNucci
Print Magazine (1999)
"Web 1.0 is a retronym referring to the first stage of the World Wide Web's evolution, from roughly 1991 to 2004. [...] Personal web pages were common, consisting mainly of static pages hosted on ISP-run web servers, or on free web hosting services such as Tripod and defunct GeoCities."
Wikipedia
Web 2.0
Wikipedia
Web 2.0
"Web 1.0 is a retronym referring to the first stage of the World Wide Web's evolution, from roughly 1991 to 2004. [...] Personal web pages were common, consisting mainly of static pages hosted on ISP-run web servers, or on free web hosting services such as Tripod and defunct GeoCities."
Wikipedia
Web 2.0
"Web 1.0 is a retronym referring to the first stage of the World Wide Web's evolution, from roughly 1991 to 2004. [...] Personal web pages were common, consisting mainly of static pages hosted on ISP-run web servers, or on free web hosting services such as Tripod and defunct GeoCities."
Wikipedia
Web 2.0
"Web 1.0 is a retronym referring to the first stage of the World Wide Web's evolution, from roughly 1991 to 2004. [...] Personal web pages were common, consisting mainly of static pages hosted on ISP-run web servers, or on free web hosting services such as Tripod and defunct GeoCities."
Wikipedia
Web 2.0
"Web 1.0 is a retronym referring to the first stage of the World Wide Web's evolution, from roughly 1991 to 2004. [...] Personal web pages were common, consisting mainly of static pages hosted on ISP-run web servers, or on free web hosting services such as Tripod and defunct GeoCities."
Wikipedia
Web 2.0
"Web 1.0 is a retronym referring to the first stage of the World Wide Web's evolution, from roughly 1991 to 2004. [...] Personal web pages were common, consisting mainly of static pages hosted on ISP-run web servers, or on free web hosting services such as Tripod and defunct GeoCities."
Wikipedia
Web 2.0
"Web 1.0 is a retronym referring to the first stage of the World Wide Web's evolution, from roughly 1991 to 2004. [...] Personal web pages were common, consisting mainly of static pages hosted on ISP-run web servers, or on free web hosting services such as Tripod and defunct GeoCities."
"The minor version is incremented for releases which add new, but backward-compatible, API features, and the major version is incremented for API changes which are not backward-compatible. For example, software which relies on version 2.1.5 of an API is compatible with version 2.2.3, but not necessarily with 3.2.4."
Wikipedia
Software versioning
"The minor version is incremented for releases which add new, but backward-compatible, API features, and the major version is incremented for API changes which are not backward-compatible. For example, software which relies on version 2.1.5 of an API is compatible with version 2.2.3, but not necessarily with 3.2.4."
Wikipedia
Software versioning
"The minor version is incremented for releases which add new, but backward-compatible, API features, and the major version is incremented for API changes which are not backward-compatible. For example, software which relies on version 2.1.5 of an API is compatible with version 2.2.3, but not necessarily with 3.2.4."
Wikipedia
Software versioning
"The minor version is incremented for releases which add new, but backward-compatible, API features, and the major version is incremented for API changes which are not backward-compatible. For example, software which relies on version 2.1.5 of an API is compatible with version 2.2.3, but not necessarily with 3.2.4."
Wikipedia
Software versioning
When a forms are not forms
"Ajax (also AJAX /ˈeɪdʒæks/; short for "Asynchronous JavaScript and XML") is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page."
Wikipedia
Mozilla Developer Network
A Form is Not Always a Form
"Standard HTML form submission, as described in the previous article, loads the URL where the data was sent, which means the browser window navigates with a full page load. [...] Many modern UIs only use HTML forms to collect input from the user, and not for data submission."
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Ship of Theseus
Wikipedia
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
Wikipedia
Ship of Theseus
"It is supposed that the famous ship sailed by the hero Theseus in a great battle was kept in a harbor as a museum piece, and as the years went by some of the wooden parts began to rot and were replaced by new ones; then, after a century or so, every part had been replaced. The question then is if the "restored" ship is still the same object as the original."
"And this may work for radio buttons and checkboxes, but what if there were text boxes that could be used to enter a price range? When would users expect the form to submit? Submitting while typing is out of the question. This leaves submitting the form on blur (tabbing or clicking out of the field), which is odd and unintuitive."
Adam Silver
Form Design Patterns (2018)
"And this may work for radio buttons and checkboxes, but what if there were text boxes that could be used to enter a price range? When would users expect the form to submit? Submitting while typing is out of the question. This leaves submitting the form on blur (tabbing or clicking out of the field), which is odd and unintuitive."
Adam Silver
Form Design Patterns (2018)
"And this may work for radio buttons and checkboxes, but what if there were text boxes that could be used to enter a price range? When would users expect the form to submit? Submitting while typing is out of the question. This leaves submitting the form on blur (tabbing or clicking out of the field), which is odd and unintuitive."
Adam Silver
Form Design Patterns (2018)
"And this may work for radio buttons and checkboxes, but what if there were text boxes that could be used to enter a price range? When would users expect the form to submit? Submitting while typing is out of the question. This leaves submitting the form on blur (tabbing or clicking out of the field), which is odd and unintuitive."
Adam Silver
Form Design Patterns (2018)
"And this may work for radio buttons and checkboxes, but what if there were text boxes that could be used to enter a price range? When would users expect the form to submit? Submitting while typing is out of the question. This leaves submitting the form on blur (tabbing or clicking out of the field), which is odd and unintuitive."
Adam Silver
Form Design Patterns (2018)
"And this may work for radio buttons and checkboxes, but what if there were text boxes that could be used to enter a price range? When would users expect the form to submit? Submitting while typing is out of the question. This leaves submitting the form on blur (tabbing or clicking out of the field), which is odd and unintuitive."
Adam Silver
Form Design Patterns (2018)
"And this may work for radio buttons and checkboxes, but what if there were text boxes that could be used to enter a price range? When would users expect the form to submit? Submitting while typing is out of the question. This leaves submitting the form on blur (tabbing or clicking out of the field), which is odd and unintuitive."
Adam Silver
Form Design Patterns (2018)
INTERACTION DESIGNER:
Let me add a simple form
INTERACTION DESIGNER:
Let me add a simple form
SIMPLE FORM:
By Schalk Venter
Beyond read-only interfaces
🔧 Front-end Development / 🎨 UI Design / 🌍 Social Good / ❤️ Destigmatising mental illness