3.10 More on the <al-select> Tag

In the previous section we performed a direct translation of the standard HTML input tags to the equivalent Albatross tags. In addition to a direct translation from the HTML form, the <al-select> tag supports a dynamic form.

In all but the most simple web application you will occasionally need to define the options in a <select> tag from internal application values. In some ways the dynamic form of the <al-select> tag is easier to use than the static form.

The sample program from this section is supplied in the samples/templates/form3 directory and can be installed in your web server cgi-bin directory by running the following commands.

cd samples/templates/form3
python install.py

The form from section 3.9 has been modified to include two <al-select> tags, and as shown below.

<html>
 <head>
  <title>Display Form Input</title>
 </head>
 <body>
  Input some values to the following form and press the submit button.
  <form method="post" action="form.py">
   Text field: <al-input name="text"><br>
   Singleton checkbox: <al-input type="checkbox" name="singleton"><br>
   Checkbox group:
   <al-input type="checkbox" name="group" value="check1">
   <al-input type="checkbox" name="group" value="check2"><br>
   Radio buttons:
   <al-input type="radio" name="radio" value="radio1">
   <al-input type="radio" name="radio" value="radio2"><br>
   Option menu:
   <al-select name="select1" optionexpr="option_list1"/>
   <al-select name="select2" optionexpr="option_list2"/>
   <al-input type="submit" value="submit">
  </form>
  <al-include name="form-display.html">
 </body>
</html>

The <al-select> tags demonstrate the two ways that you can define option lists in your code using the optionexpr attribute. When converting the tag to HTML the expression in the optionexpr attribute is evaluated and the result is used to generate the option list that appears in the generated HTML.

The <form.py> program has been modified to supply lists of option values.

#!/usr/bin/python
import cgi
from albatross import SimpleContext

form = cgi.FieldStorage()
ctx = SimpleContext('.')

ctx.locals.option_list1 = ['option1', 'option2', 'option3']
ctx.locals.option_list2 = [(1, 'option1'), (2, 'option2'), (3, 'option3')]

ctx.locals.form = form
for name in form.keys():
    if type(form[name]) is type([]):
        value = []
        for elem in form[name]:
            value.append(elem.value)
    else:
        value = form[name].value
    setattr(ctx.locals, name, value)
templ = ctx.load_template('form.html')
templ.to_html(ctx)

print 'Content-Type: text/html'
print
ctx.flush_content()

You can see the program output by pointing your browser at http://www.object-craft.com.au/cgi-bin/alsamp/form3/form.py.

If you view the browser source produced by the two <al-select> tags you will see the difference between the way that both option list forms are handled. Note in particular that the tuples in option_list2 contain an integer value as the first element. This is converted to string when it is compared with the value stored in select2 to determine which option is selected.

The browser request sent to the application will always contain strings for field values.