# How to assign HTML input forms to p5 variables?

**URL:** https://discourse.processing.org/t/how-to-assign-html-input-forms-to-p5-variables/29915
**Category:** Coding Questions
**Created:** [May 6, 2021, 3:33pm UTC](https://discourse.processing.org/t/how-to-assign-html-input-forms-to-p5-variables/29915 "2021-05-06T15:33:07Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Gershy13](https://avatars.discourse-cdn.com/v4/letter/g/a183cd/32.png) [@Gershy13](https://discourse.processing.org/u/Gershy13)
#### Post date: [May 6, 2021, 3:33pm UTC](https://discourse.processing.org/t/how-to-assign-html-input-forms-to-p5-variables/29915/1 "2021-05-06T15:33:07Z")

</div>

Hi, so ive just integrated my p5 sketch into my website which already has the gui made (buttons, sliders, color pickers etc) using HTML5/ standard HTML input modes.

Im trying to figure out a way to link those inputs to variables or something in p5js?

So for instance the html5 color picker can i assign it to the fill color of a shape?  
And a slider can i assign it to a number (say between 0 and 1) stored in a variable?

Can someone help me out with this?

Thanks  
Gersh

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [May 6, 2021, 3:43pm UTC](https://discourse.processing.org/t/how-to-assign-html-input-forms-to-p5-variables/29915/2 "2021-05-06T15:43:56Z")

</div>

Hi! Welcome to the forum!

You can choose an element from HTML with `select` and then `value` to get the value (not sure if it works with a color picker though)

[https://p5js.org/reference/#/p5/select](https://p5js.org/reference/#/p5/select)

[https://p5js.org/reference/#/p5.Element/value](https://p5js.org/reference/#/p5.Element/value)

if you have more detailed questions I recommend you to post the code 🙂

---

<div class="post-metadata">

### Author: ![Gershy13](https://avatars.discourse-cdn.com/v4/letter/g/a183cd/32.png) [@Gershy13](https://discourse.processing.org/u/Gershy13)
#### Post date: [May 7, 2021, 12:30am UTC](https://discourse.processing.org/t/how-to-assign-html-input-forms-to-p5-variables/29915/3 "2021-05-07T00:30:16Z")

</div>

Thanks!!! It worked perfectly, only thing is it outputted a hex value so i had to add ’ quotes to the fill part, but otherwise worked perfectly!