4. User Input

The Lona standard library provides HTML nodes like lona.html.TextInput or lona.html.CheckBox to handle user input.

Unlike in traditional frameworks, you don't have to submit a whole form of data to retrieve user input, because every input node from the standard library synchronizes its value with the server automatically, using events. These events get handled in the background by default, but if you want to get notified on changes set bubble_up=True in any input node.

If a view is a daemon view, all input values get synchronized across all connected browsers.

This example shows a view with an input and a button. When the button is clicked, the value of the input gets accessed by the view. Before clicking "Submit" the value of the input is always synchronized with the value that is present in the browser. That means all intermediate states of a not completed input are always sent to the server, even if "Submit" never gets clicked.

from lona_picocss.html import InlineButton, TextInput, HTML, H1
from lona_picocss import install_picocss

from lona import View, App

app = App(__file__)

install_picocss(app, debug=True)


@app.route('/')
class Index(View):
    def handle_button_click(self, input_event):
        with self.html.lock:
            self.html[0].set_text(f'Hello {self.name.value}')
            self.name.remove()
            self.submit.remove()

    def handle_request(self, request):
        self.name = TextInput(placeholder='Name')

        self.submit = InlineButton(
            'Submit',
            handle_click=self.handle_button_click,
        )

        self.html = HTML(
            H1('Enter Your Name'),
            self.name,
            self.submit,
        )

        self.show(self.html)


if __name__ == '__main__':
    app.run()