Introduce Colab-like Forms in Notebooks

[indirivacua]

I would like to suggest implementing Colab-like Forms for Notebooks in VSCode. These forms can be used as input serializers, providing a more aesthetically way to set the values to variables in a code cell.

Here is the reference from Google: https://colab.research.google.com/notebooks/forms.ipynb.

Colab forms work by rendering the content of a cell input using a top comment followed by a @title tag. indicating that the code cell should be interpreted as a form-like structure. Each customizable variable is designated with a comment containing the @param tag, followed by its corresponding argument or configuration enclosed in curly brackets. Also you can use the @markdown tag which allows the inclusion of Markdown-formatted text between each value.

Here's an example:

# @title Example of Colab Forms { display-mode: "form", run: "auto" }
# the run: "auto" config makes that after running this cell manually, it will auto-run if you change the selected value.

# @markdown ---
# @markdown ### Enter a text value:
text = 'value' # @param {type:"string"}
# @markdown ---
# @markdown ### Enter a number value:
number_input = 10.0 # @param {type:"number"}
# @markdown ---
# @markdown ### Enter an integer value:
integer_input = 10 # @param {type:"integer"}
# @markdown ---
# @markdown ### Check a boolean value:
boolean_checkbox = True # @param {type:"boolean"}
# @markdown ---
# @markdown ### Enter a date value:
date_input = '2018-03-22' # @param {type:"date"}
# @markdown ---
# @markdown ### Enter a raw value:
raw_input = None # @param {type:"raw"}
# @markdown ---
# @markdown ### Select a number within a range:
number_slider = 0 # @param {type:"slider", min:-1, max:1, step:0.1}
# @markdown ---
# @markdown ### Select a text value from a dropdown or enter a custom one:
text_and_dropdown = 'value' # @param ["1st option", "2nd option", "3rd option"] {allow-input: true}
# @markdown ---

[vscodenpa]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[vs-code-engineering[bot]]

:slightly_smiling_face: This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!