Brython documentation

module browser.html

This module exposes the HTML tags. The tag name is in uppercase letters

The classes defined are :

HTML4 tags : A, ABBR, ACRONYM, ADDRESS, APPLET, AREA, B, BASE, BASEFONT, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I, IFRAME, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, META, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PARAM, PRE, Q, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, SVG, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR
HTML5 tags : ARTICLE, ASIDE, AUDIO, BDI, CANVAS, COMMAND, DATA, DATALIST, EMBED, FIGCAPTION, FIGURE, FOOTER, HEADER, KEYGEN, MAIN, MARK, MATH, METER, NAV, OUTPUT, PROGRESS, RB, RP, RT, RTC, RUBY, SECTION, SOURCE, SUMMARY, TEMPLATE, TIME, TRACK, VIDEO, WBR
HTML5.1 tags : DETAILS, DIALOG, MENUITEM, PICTURE, SUMMARY

In the following link you can find the index of HTML tags with references (DRAFT).

[Note: In the following examples we assume that the browser.html module has been imported as follows: from brower import html]

The syntax to create an object (e.g. a hyperlink) is :

A([content, [attributes]])

content is the child node of the the object ; it can be a Python object such as a string, a number, etc., or an instance of another class in the html module

If content is a string, it is interpreted as HTML code. To specify the text content of an element, set it as the value of property text.

attributes is a sequence of keywords corresponding to the attributes of the HTML tag. If the attribute contains a hyphen (-) it must be replaced by an underscore (_) : http_equiv and not http-equiv (the - would be interpreted as the minus sign). For more complex attribute names you can use the syntax

html.BUTTON("hello", **{"v-on:click": "count++"})

See also the function attribute_mapper below for more customization of the translation from Python keyword argument to HTML tag attribute.

If content is an iterable (other than a string), all the items in the iterable become children of the object. For instance :

html.UL(html.LI('item %s' %i) for i in range(5))

creates an unordered list with the <li> tags in the generator expression

For the style attribute, the value must be a dictionary :

d = html.DIV('Brython', style={'height':100, 'width':200})

d = html.DIV('Brython', style=dict(height=100, width=200))

The keyword arguments of style must be written by the Javascript syntax, not CSS : backgroundColor and not background-color.

To avoid conflicts with the Python keyword, the attribute class must be capitalized :

d = html.DIV('Brython', Class="container")

You can also create an object without argument, then build it up:

to add a child node, use the <= operator
to add attributes, use the syntax : object.attrs[key] = value (see section Attributes and methods)

Example :

link = html.A()
link <= html.B('connexion')
link.href = 'http://example.com'

You can also create multiple elements at the same level by using the plus (+) sign :

row = html.TR(html.TH('LastName') + html.TH('FirstName'))

and you can add all the items in an iterable :

from browser.html import *

t = TABLE()
t <= TR(TH('Number') + TH('Square'))
t <= (TR(TD(i)+TD(i * i)) for i in range(10))

Here is how to create a selection box from a list (by combining these operators and Python syntax) :

from browser import document
from browser.html import *

document <= SELECT(OPTION(elt, value=i)
    for i, elt in enumerate(['one', 'two', 'three']))

It is important to note that the creation of an instance of a class involves creating HTML from a single DOM object. If we assign the instance to a variable, you can not use it in several places. For example, with this code :

link = html.A('Python', href='http://www.python.org')
document <= 'Official Python Website: ' + link
document <= html.P() + 'I repeat: the site is ' + link

the link will only show in the second line. One solution is to clone the original object :

link = html.A('Python', href='http://www.python.org')
document <= 'Official Python Website: ' + link
document <= html.P() + 'I repeat: the site is ' + link.clone()

As a rule of thumb, instances of HTML classes have the same attribute names as the corresponding DOM objects. For example, it can retrieve the option selected by the selectedIndex attribute of the SELECT object. Brython adds a few things to make the manipulation a bit more Pythonic

Let's see a more complete example. The code below have created the structure in the blue panel. The blue panel is a div element with id="container" attribute.

We will use this div to create an 'ugly' html structure inside with a div, a table, a form and a HTML5 canvas:

# First of all, the import of some libraries
from browser import document
from browser import html

# All the elements will be inserted in the div with the "container" id
container = document['container']

# We create a new div element
newdiv = html.DIV(id = "new-div")
# Now we add some style
newdiv.style = {"padding": "5px",
               "backgroundColor": "#ADD8E6"}

# Now, lets add a table with a column with numbers and a
# column with a word on each cell
text = "Brython is really cool"
textlist = text.split()
table = html.TABLE()
for i, word in enumerate(textlist):
    table <= html.TR(html.TD(i + 1) +
                     html.TD(word))
# Now we add some style to the table
table.style = {"padding": "5px",
               "backgroundColor": "#aaaaaa",
               "width": "100%"}
# Now we add the table to the new div previously created
newdiv <= table + html.BR()

# a form? why not?
form = html.FORM()
input1 = html.INPUT(type="text", name="firstname", value="First name")
input2 = html.INPUT(type="text", name="lastname", value="Last name")
input3 = html.BUTTON("Button with no action!")
form <= input1 + html.BR() + input2 + html.BR() + input3

newdiv <= form + html.BR()

# Finally, we will add something more 'HTML5istic', a canvas with
# a color gradient in the newdiv previously created and below the form
canvas = html.CANVAS(width = 300, height = 300)
canvas.style = {"width": "100%"}
ctx = canvas.getContext('2d')
ctx.rect(0, 0, 300, 300)
grd = ctx.createRadialGradient(150, 150, 10, 150, 150, 150)
grd.addColorStop(0, '#8ED6FF')
grd.addColorStop(1, '#004CB3')
ctx.fillStyle = grd
ctx.fill()

newdiv <= canvas

# And finally we append the newdiv element
# to the parent, in this case the div with the "container" id
container <= newdiv

Creating new tags

The module exposes the function

maketag(name)

Creates a new class for a tag with the specified name. The class can be used like those associated with standard HTML tags :

p2 = maketag('P2')
document <= p2('test')

The module has a related attribute :

tags

Dictionary mapping tag names to the matching class. If new classes are added by function maketag(), they are also added to this dictionary.

Generating HTML attributes from Python keyword arguments

attribute_mapper(attr)

For all the classes defined in the module, this function is called to transform the keyword arguments into HTML tag attributes. For example:

import re
def f(attr):
    return re.sub("^v_(.*)_(.*)$", r"v-\1:\2", attr)

html.attribute_mapper = f
print(html.BUTTON("hello", v_on_click="count++").outerHTML)

By default, the function replaces underscores (_) by hyphens (-).

Introduction

Installation

Limitations of the "file" protocol

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

`import` implementation

Brython packages

Browser interface

Brython-specific built-in modules

Working with Brython

Cookbook

module browser.html

Creating new tags

Generating HTML attributes from Python keyword arguments