Form Inputs in Google Colab

When creating data dashboards and user facing applications, it may be helpful to ask the user for inputs.

Besides capturing a textual inputs using the input function, we can use a form to capture a variety of other kinds of inputs.

To implement a form in Googl Colab, we can use Colab Form Inputs, or leverage the capabilities of the Jupyter Widgets package.

The input Function

symbol = input("Please enter a stock symbol (e.g. 'MSFT'): ")
print(symbol)

Please enter a stock symbol (e.g. 'MSFT'): NVDA
NVDA

The getpass Module

When using the input function in Python to capture user inputs, we end up seeing the resulting value as the user types it.

But what if we want to ask for more sensitive inputs, like secret passwords or credentials? We need a way to prevent them from showing up in the program’s output.

To hide or “mask” user-inputted values, we can use the getpass function from the getpass module instead:

from getpass import getpass

my_password = getpass("Please input your secret password: ")
print(my_password)

Please input your secret password: ··········
super-secret

Colab Form Inputs

One helpful way to create form inputs is to add the “Adding form fields” code snippet, which provides example form fields of various kinds. Adding the snippet yeilds the following example form:

# @title Example form fields
# @markdown Forms support many types of fields.

no_type_checking = ''  # @param
string_type = 'example'  # @param {type: "string"}
slider_value = 142  # @param {type: "slider", min: 100, max: 200}
number = 102  # @param {type: "number"}
date = '2024-06-23'  # @param {type: "date"}
pick_me = "monday"  # @param ['monday', 'tuesday', 'wednesday', 'thursday']
select_or_input = "apples" # @param ["apples", "bananas", "oranges"] {allow-input: true}
# @markdown ---

print(slider_value)
print(date)

142
2024-06-23

We see the form inputs are implemented by structured comments to the right of the variable assignment.

In practice, we’ll probably only need one or two of these, and we can copy the corresponding code snippet and adapt it to fit the use case.

For example, creating a drop-down menu prompting a user to select a stock symbol:

symbol = "NVDA" # @param ['MSFT', 'GOOGL', 'NVDA', 'SPOT', 'NFLX']
print(symbol)

NVDA

Note

To make the Colab form inputs work, we first choose an option from the form on the right. This updates the code cell contents on the left. Then we run the cell to store the selected value in memory.

Jupyter Widgets

You’ll notice the Colab form approach requires us to hard-code the selectable options in code comments. This may work in many cases, but there may be some situations where you would want to dynamically compile the list of options instead.

There’s another option for creating form inputs in a Python notebook, using the Jupyter Widgets (ipywidgets) package.

Compiling dropdown selections from a list:

symbols = ['MSFT', 'GOOGL', 'NVDA', 'SPOT', 'NFLX']
print(symbols)

['MSFT', 'GOOGL', 'NVDA', 'SPOT', 'NFLX']

from ipywidgets.widgets import Dropdown

# configure the dropdown menu:
dropdown = Dropdown(
    options=symbols,
    value=symbols[0], # default value
    description='Symbol: ',
    disabled=False,
)

# display the dropdown menu:
display(dropdown)

Using the selected value:

print(dropdown.value)

NVDA

Note

To make the Jupyter Widgets work in this simple use case, we first choose an option from the form. This updates the selected value displayed within the dropdown menu. Then we can reference the currently selected value.