Text Inputs Methods of P5

There are multiple methods to get the text inputs from the user inside a webpage. Input or text area elements is most used. Using the p5.js library opens up new options for working with text inputs, which will also be explored.

Following are some input fields where the text is entered, and by click of the button the texts populate the HTML Page. This is all done by P5.js library, through the script that is running on this page.

Output Element selected

Enter your Food Ideas

Simplest Convertor

Learning happens when you try something completely different from what is thought to you. Lets see if we can build a simple length convertor from meter to feet.

Enter Length

File Input

Text files are the defacto mode source for many analysis activities. P5.js allows for loading the files that are already available in two ways.

• Automatically when Page loads
• When User takes an action

Following paragraphs were created from the preloaded file data

Click the below button to see the next part of the file populate the dom below.

Load Another TXT

Another method is to allow the user to select the file and the process it.

That brings us to the end of the various file input methods, that we will be using extensively.