The Document Object Model, or DOM, represents the resulting structure of the web page. Using p5.js’s form elements, such as createInput(), createSelect(), and createRadio(), you can build different ways to take information submitted through a select, input, or radio button and update the DOM based on the information.
Form Elements: Created by Prof. WM Harris. Revised by Kasey Lichtlyter. From 2024 onwards, edited and maintained by p5.js Contributors and Processing Foundation. Licensed under CC BY-NC-SA 4.0.
You can find the code history of these examples here: pre-2023 code, 2023 code. You can suggest improvements by contributing to the current website!
Related Examples
A grey background with white text reading "Drag an image file onto the canvas."
Image Drop
Display an image that the page visitor dragged and dropped.
An input field with a submit button, labeled "Hello, p5!"
Input and Button
Use text input from the page visitor.
A survey on a yellow background, consisting of an input field, radio buttons, and a dropdown.
Form Elements
Create a form and respond to the results.