# Making an interactive Form Inputs on P5.js

**URL:** <https://discourse.processing.org/t/making-an-interactive-form-inputs-on-p5-js/1082>\
**Category:** p5.js\
**Created:** [June 19, 2018, 2:16pm UTC](https://discourse.processing.org/t/making-an-interactive-form-inputs-on-p5-js/1082 "2018-06-19T14:16:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Abbeysoft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/abbeysoft/32/494_2.png) [@Abbeysoft](https://discourse.processing.org/u/Abbeysoft)\
**Post date:** [June 19, 2018, 2:16pm UTC](https://discourse.processing.org/t/making-an-interactive-form-inputs-on-p5-js/1082/1 "2018-06-19T14:16:04Z")

</div>

Trust you are doing great!

I am an avid user of this javascript library of P5.js

Just to know if, how to create an interactive form inputs to generate objects (Circle, Rectangle, Lines) on a canvas, via the user’s form inputs.

I wanted an interface to prevent a non-technical user from writing codes, but input values on HTML Form, like **shape:** rectangle, or input **color** : red and automatically generate the object on a canvas.

I will appreciate your timely response.

Thank you.

Regards,  
ADEBAYO, ABIODUN F.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 19, 2018, 6:12pm UTC](https://discourse.processing.org/t/making-an-interactive-form-inputs-on-p5-js/1082/2 "2018-06-19T18:12:19Z")

</div>

> **[DatGuiTest](http://bl.ocks.org/GoSubRoutine/861b48f0b0118219c6a7cdd28309ee62)**
>
> GoSubRoutine’s Block 861b48f0b0118219c6a7cdd28309ee62

  

> **[Pulsing Equations](http://bl.ocks.org/GoSubRoutine/f9a0a94dcfee23a037b35f308b256d98)**
>
> GoSubRoutine’s Block f9a0a94dcfee23a037b35f308b256d98

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [June 19, 2018, 6:32pm UTC](https://discourse.processing.org/t/making-an-interactive-form-inputs-on-p5-js/1082/3 "2018-06-19T18:32:41Z")

</div>

@GoToLoop Can you please provide explanations when you post links?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [June 19, 2018, 6:39pm UTC](https://discourse.processing.org/t/making-an-interactive-form-inputs-on-p5-js/1082/4 "2018-06-19T18:39:00Z")

</div>

@Abbeysoft You might want to look into the [P5.dom](https://p5js.org/reference/#/libraries/p5.dom) library, especially the `createInput()` function.

Also note that since P5.js is just JavaScript, you can get the value of an HTML input element using normal JavaScript as well. Googling something like “javascript get value of input element” will return a ton of results.