The QR
element is an image container whose source content is automatic generated from input text (e.g. text, URL, call, SMS, vCard… et.al).
QR Code (abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-dimensional code) first designed for the automotive industry [[!ISOIEC-18004-2006]]. More recently, the system has become popular outside the industry due to its fast readability and large storage capacity compared to standard UPC barcodes. Generally, the code consists of black modules (square dots) arranged in a square pattern on a white background. The information encoded can be made up of four standardized kinds ("modes") of data or through supported extensions, virtually any kind of data.
This first sample shows how to use the QR element with attirbutes.
Code Example: Here is an example of the use of QR element in an HTML document: <qr size="100" type="url" value=”http://qr.html5ok.kr”>
Code Example: This is another example to geological sharing of QR element in an HTML document: <qr size="100" type="url" value=”geo:36.381936,127.365105”>
Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation stage should join the aforementioned mailing lists and take part in the discussions.
The conformance requirements, conformance classes, definitions, dependencies, terminology, and typographical conventions described in the HTML5 specification apply to this specification. [[!HTML5]]
Interfaces are defined in terms of Web IDL. [[!WEBIDL]]
The following terms are used throughout this specification so they are gathered here for the readers convenience. The following list of terms is not exhaustive; other terms are defined throughout this specification.
The follow terms are defined by the [[!HTML5]] specification: img
element, fallback content.
There is only one class of product that can claim conformance to this specification: a user agent.
This specification has the same conformance requirements and applies to the same conformance classes as [[[!HTML5]].
Implementations that use ECMAScript to expose the APIs defined in this specification must implement them in a manner consistent with the ECMAScript Bindings defined in the [[!WEBIDL]] specification.
QR
elementtype
value
size
fgcolor
bgcolor
version
error
[NamedConstructor=QR] HTMLQRElement : HTMLElement{ attribute DOMString alt; attribute DOMString type; attribute DOMString value; attribute unsigned long size; attribute DOMString fgcolor; attribute DOMString bgcolor; attribute unsigned long version; attribute DOMString error; }
The qr
element represents a generated image.
The QR
element used for
displaying an generated image that can come from a range of types (including the
type
and value
attributes). Which image
the user agent displays depends on the algorithm for encoding the value. The value of
the alt
attribute provides equivalent
content for those who cannot process images or who have image loading disabled.
The requirements on the alt
attribute's value are described
in the
img
section.
note:
Thetype
attribute controls the data type (and associated control) of the element. It is an enumerated attribute. The following table lists the keywords and states for the attribute — the keywords in the left column map to the states in the cell in the second column on the same row as the keyword.
Keyword | State | Data type | Control type |
---|---|---|---|
text
| Text | Text with no line breaks | A text field |
url
| URL | An absolute URL | A text field |
contact
| An e-mail address or list of e-mail addresses | A text field | |
calendar
| Calendar | An Calendar information includes event information (e.g. event name, location, description, start date, end date, end time… et.al) | A text field |
type=text
) stateThe text attribute specifies the text data that encoded in QR code. QR Code is capable of handling all types of data, such as numeric and alphabetic characters, 2 byte characters and symbols. Up to 7,089 characters can be encoded in one symbol.
When an QR
element's type
attribute is in the Text state, the rules in this section apply.
type=url
)The url attribute specifies the URLs (include URIs, URNs) that encoded in QR code. A URL is that provides the destination of the hyperlink. If the href attribute is not specified, the element represents a placeholder hyperlink. [[!RFC2397]],[[!RFC3406]],[[!RFC3966]],[[!RFC3986]],[[!RFC3987]]
mailto:hollobit@etri.re.kr tel:+82-111-1111-1111 sms:<number> mms:<number> geo:40.71872,-73.98905,100 market://details?id=org.example.foo youtube://ID WIFI:T:WPA;S:mynetwork;P:mypass;; facetime:<number> skype:<username|number>?query irc://<url>:query aim:query?<username> ymsgr:query?<email|number> gtalk:query?<email>
When an QR
element's type
attribute is in the URL state, the rules in this
section apply.
The value
attribute, if
specified and not empty, must have a value that is a valid URL
potentially surrounded by spaces that is also an
absolute URL.
The value sanitization algorithm is as follows: Strip line breaks from the value, then strip leading and trailing whitespace from the value.
Constraint validation: While the value of the element is neither the empty string nor a valid absolute URL, the element is suffering from a type mismatch.
type=contact
)The contact attribute specifies the contact information that encoded in QR code. Contact information includes personal contact information (e.g. name, company, phone number… et.al). Contact information’s format is stored in a plain text file which is formatted according to the dedicated specification (e.g. vCard. MECARD, Bizcard specification). [[!RFC4770]], [[!RFC2426]]
BIZCARD:N:Jonathan;X:Jeon;T:Software Engineer;C:ETRI;A:76 9th Avenue, New York, NY 10011;B:+12125551212;E:someone@etri.re.kr;;
MECARD:N:Jonathan,Jeon;ADR:161, Kajong-Dong, YuSong-Gu, Daejeon, South Korea 305-350;TEL:+82-10-1111-1111;EMAIL:hollobit@etri.re.kr;;
When an QR
element's type
attribute is in the Contact state, the rules in this section apply.
type=calendar
)The calendar attribute specifies the calendar event information that encoded in QR code. Calendar information includes event information (e.g. event name, location, description, start date, end date, end time… et.al). It can also specify the URL of event file (e.g. vCal, iCalendar). [[!RFC2445]]
BEGIN:VCALENDAR VERSION:2.0 PRODID:-//hacksw/handcal//NONSGML v1.0//EN BEGIN:VEVENT UID:uid1@example.com DTSTAMP:20130714T170000Z ORGANIZER;CN=Jonathan Jeon:MAILTO:hollobit@example.com DTSTART:20130714T170000Z DTEND:20130715T035959Z SUMMARY:WG F2F meeting END:VEVENT END:VCALENDAR
@@ TBW - vCal example
When an QR
element's type
attribute is in the Calendar state, the rules in this section apply.
The value attribute specifies the data string that encoded in QR code.
The size attribute specifies the visible width of an
The fgcolor attribute specifies the foreground color of an
The bgcolor attribute specifies the background color of an
The version attribute specifies the symbol versions of QR Code range from Version 1 to Version 40.
Each version has a different module configuration or number of modules. (The module refers to the black and white dots that make up QR Code.)
"Module configuration" refers to the number of modules contained in a symbol, commencing with Version 1 (21 × 21 modules) up to Version 40 (177 × 177 modules). Each higher version number comprises 4 additional modules per side.
The error attribute specifies the error correction capability to restore data if the code is dirty or damaged. Four error correction levels (Low, Medium, Quartile, High) are available for users to choose according to the operating environment. Raising this level improves error correction capability but also increases the amount of data QR Code size.
Low : 7% of codewords can be restored. Medium : 15% of codewords can be restored. Quartile : 25% of codewords can be restored. High : 30% of codewords can be restored.
Today QR codes are used in many digital signage applications. The QR code allows the advertiser to provide the audience with fast access to information, promotion and coupons, without the need to memorize any coupon codes, website or contact information. Even if signage system is not connected to network, QR element in HTML can provide to generate QR code with various web contents.
Some of the reasons they are more useful than a standard barcode is that they can store much more data, including URL links, geo coordinates, VCard, SMS, etc. Another key feature of QR Codes is that many modern cell phones can scan them.
QR code based data sharing between mobile devices allow the sharing of contacts, web links, directions, and other small pieces of information by displaying/scanning two QR enabled devices front to back. If mobile browser can provide decode/encode functionality, user can make a QR code for data sharing between devices.
TBW