Html.Attributes

Primitives

style : List (String, String) -> Attribute msg
Specify a list of styles.
myStyle : Attribute msg
myStyle =
  style
    [ ("backgroundColor", "red")
    , ("height", "90px")
    , ("width", "100%")
    ]

greeting : Html msg greeting = div [ myStyle ] [ text "Hello!" ]
There is no Html.Styles module because best practices for working with HTML suggest that this should primarily be specified in CSS files. So the general recommendation is to use this function lightly.

property : String -> Value -> Attribute msg
Create properties, like saying domNode.className = 'greeting' in JavaScript.

import Json.Encode as Encode

class : String -> Attribute msg
class name = property "className" (Encode.string name)

attribute : String -> String -> Attribute msg
Create attributes, like saying domNode.setAttribute('class', 'greeting') in JavaScript.

class : String -> Attribute msg
class name = attribute "class" name

map : (a -> msg) -> Attribute a -> Attribute msg
Transform the messages produced by an Attribute.

Super Common Attributes

class : String -> Attribute msg
Often used with CSS to style elements with common properties.

classList : List (String, Bool) -> Attribute msg
This function makes it easier to build a space-separated class attribute. Each class can easily be added and removed depending on the boolean value it is paired with. For example, maybe we want a way to view notices:

viewNotice : Notice -> Html msg
viewNotice notice =
  div
    [ classList
        [ ("notice", True)
        , ("notice-important", notice.isImportant)
        , ("notice-seen", notice.isSeen)
        ]
    ]
    [ text notice.content ]

id : String -> Attribute msg
Often used with CSS to style a specific element. The value of this attribute must be unique.

title : String -> Attribute msg
Text to be displayed in a tooltip when hovering over the element.

hidden : Bool -> Attribute msg
Indicates the relevance of an element.

Inputs

type_ : String -> Attribute msg
Defines the type of a button, input, embed, object, script, source, style, or menu.

value : String -> Attribute msg
Defines a default value which will be displayed in a button, option, input, li, meter, progress, or param.

defaultValue : String -> Attribute msg
Defines an initial value which will be displayed in an input when that input is added to the DOM. Unlike value, altering defaultValue after the input element has been added to the DOM has no effect.

checked : Bool -> Attribute msg
Indicates whether an input of type checkbox is checked.

placeholder : String -> Attribute msg
Provides a hint to the user of what can be entered into an input or textarea.

selected : Bool -> Attribute msg
Defines which option will be selected on page load.

Input

accept : String -> Attribute msg
List of types the server accepts, typically a file type. For form and input.

acceptCharset : String -> Attribute msg
List of supported charsets in a form.

action : String -> Attribute msg
The URI of a program that processes the information submitted via a form.

autocomplete : Bool -> Attribute msg
Indicates whether a form or an input can have their values automatically completed by the browser.

autofocus : Bool -> Attribute msg
The element should be automatically focused after the page loaded. For button, input, keygen, select, and textarea.

disabled : Bool -> Attribute msg
Indicates whether the user can interact with a button, fieldset, input, keygen, optgroup, option, select or textarea.

enctype : String -> Attribute msg
How form data should be encoded when submitted with the POST method. Options include: application/x-www-form-urlencoded, multipart/form-data, and text/plain.

formaction : String -> Attribute msg
Indicates the action of an input or button. This overrides the action defined in the surrounding form.

list : String -> Attribute msg
Associates an input with a datalist tag. The datalist gives some pre-defined options to suggest to the user as they interact with an input. The value of the list attribute must match the id of a datalist node. For input.

maxlength : Int -> Attribute msg
Defines the maximum number of characters allowed in an input or textarea.

minlength : Int -> Attribute msg
Defines the minimum number of characters allowed in an input or textarea.

method : String -> Attribute msg
Defines which HTTP method to use when submitting a form. Can be GET (default) or POST.

multiple : Bool -> Attribute msg
Indicates whether multiple values can be entered in an input of type email or file. Can also indicate that you can select many options.

name : String -> Attribute msg
Name of the element. For example used by the server to identify the fields in form submits. For button, form, fieldset, iframe, input, keygen, object, output, select, textarea, map, meta, and param.

novalidate : Bool -> Attribute msg
This attribute indicates that a form shouldn't be validated when submitted.

pattern : String -> Attribute msg
Defines a regular expression which an input's value will be validated against.

readonly : Bool -> Attribute msg
Indicates whether an input or textarea can be edited.

required : Bool -> Attribute msg
Indicates whether this element is required to fill out or not. For input, select, and textarea.

size : Int -> Attribute msg
For input specifies the width of an input in characters.

For select specifies the number of visible options in a drop-down list.

for : String -> Attribute msg
The element ID described by this label or the element IDs that are used for an output.

form : String -> Attribute msg
Indicates the element ID of the form that owns this particular button, fieldset, input, keygen, label, meter, object, output, progress, select, or textarea.

Input Ranges

max : String -> Attribute msg
Indicates the maximum value allowed. When using an input of type number or date, the max value must be a number or date. For input, meter, and progress.

min : String -> Attribute msg
Indicates the minimum value allowed. When using an input of type number or date, the min value must be a number or date. For input and meter.

step : String -> Attribute msg
Add a step size to an input. Use step "any" to allow any floating-point number to be used in the input.

Input Text Areas

cols : Int -> Attribute msg
Defines the number of columns in a textarea.

rows : Int -> Attribute msg
Defines the number of rows in a textarea.

wrap : String -> Attribute msg
Indicates whether the text should be wrapped in a textarea. Possible values are "hard" and "soft".

Links and Areas

href : String -> Attribute msg
The URL of a linked resource, such as a, area, base, or link.

target : String -> Attribute msg
Specify where the results of clicking an a, area, base, or form should appear. Possible special values include:

  1. _blank — a new window or tab
  2. _self — the same frame (this is default)
  3. _parent — the parent frame
  4. _top — the full body of the window
You can also give the name of any frame you have created.

download : Bool -> Attribute msg
Indicates that clicking an a and area will download the resource directly.

downloadAs : String -> Attribute msg
Indicates that clicking an a and area will download the resource directly, and that the downloaded resource with have the given filename.

hreflang : String -> Attribute msg
Two-letter language code of the linked resource of an a, area, or link.

media : String -> Attribute msg
Specifies a hint of the target media of a a, area, link, source, or style.

ping : String -> Attribute msg
Specify a URL to send a short POST request to when the user clicks on an a or area. Useful for monitoring and tracking.

rel : String -> Attribute msg
Specifies the relationship of the target object to the link object. For a, area, link.

Maps

ismap : Bool -> Attribute msg
When an img is a descendent of an a tag, the ismap attribute indicates that the click location should be added to the parent a's href as a query string.

usemap : String -> Attribute msg
Specify the hash name reference of a map that should be used for an img or object. A hash name reference is a hash symbol followed by the element's name or id. E.g. "#planet-map".

shape : String -> Attribute msg
Declare the shape of the clickable area in an a or area. Valid values include: default, rect, circle, poly. This attribute can be paired with coords to create more particular shapes.

coords : String -> Attribute msg
A set of values specifying the coordinates of the hot-spot region in an area. Needs to be paired with a shape attribute to be meaningful.

Embedded Content

src : String -> Attribute msg
The URL of the embeddable content. For audio, embed, iframe, img, input, script, source, track, and video.

height : Int -> Attribute msg
Declare the height of a canvas, embed, iframe, img, input, object, or video.

width : Int -> Attribute msg
Declare the width of a canvas, embed, iframe, img, input, object, or video.

alt : String -> Attribute msg
Alternative text in case an image can't be displayed. Works with img, area, and input.

Audio and Video

autoplay : Bool -> Attribute msg
The audio or video should play as soon as possible.

controls : Bool -> Attribute msg
Indicates whether the browser should show playback controls for the audio or video.

loop : Bool -> Attribute msg
Indicates whether the audio or video should start playing from the start when it's finished.

preload : String -> Attribute msg
Control how much of an audio or video resource should be preloaded.

poster : String -> Attribute msg
A URL indicating a poster frame to show until the user plays or seeks the video.

default : Bool -> Attribute msg
Indicates that the track should be enabled unless the user's preferences indicate something different.

kind : String -> Attribute msg
Specifies the kind of text track.

srclang : String -> Attribute msg
A two letter language code indicating the language of the track text data.

iframes

sandbox : String -> Attribute msg
A space separated list of security restrictions you'd like to lift for an iframe.

seamless : Bool -> Attribute msg
Make an iframe look like part of the containing document.

srcdoc : String -> Attribute msg
An HTML document that will be displayed as the body of an iframe. It will override the content of the src attribute if it has been specified.

Ordered Lists

reversed : Bool -> Attribute msg
Indicates whether an ordered list ol should be displayed in a descending order instead of a ascending.

start : Int -> Attribute msg
Defines the first number of an ordered list if you want it to be something besides 1.

Tables

align : String -> Attribute msg
Specifies the horizontal alignment of a caption, col, colgroup, hr, iframe, img, table, tbody, td, tfoot, th, thead, or tr.

colspan : Int -> Attribute msg
The colspan attribute defines the number of columns a cell should span. For td and th.

rowspan : Int -> Attribute msg
Defines the number of rows a table cell should span over. For td and th.

headers : String -> Attribute msg
A space separated list of element IDs indicating which th elements are headers for this cell. For td and th.

scope : String -> Attribute msg
Specifies the scope of a header cell th. Possible values are: col, row, colgroup, rowgroup.

Header Stuff

async : Bool -> Attribute msg
Indicates that the script should be executed asynchronously.

charset : String -> Attribute msg
Declares the character encoding of the page or script. Common values include:

UTF-8 - Character encoding for Unicode ISO-8859-1 - Character encoding for the Latin alphabet For meta and script.

content : String -> Attribute msg
A value associated with http-equiv or name depending on the context. For meta.

defer : Bool -> Attribute msg
Indicates that a script should be executed after the page has been parsed.

httpEquiv : String -> Attribute msg
This attribute is an indicator that is paired with the content attribute, indicating what that content means. httpEquiv can take on three different values: content-type, default-style, or refresh. For meta.

language : String -> Attribute msg
Defines the script language used in a script.

scoped : Bool -> Attribute msg
Indicates that a style should only apply to its parent and all of the parents children.

Less Common Global Attributes

Attributes that can be attached to any HTML tag but are less commonly used.

accesskey : Char -> Attribute msg
Defines a keyboard shortcut to activate or add focus to the element.

contenteditable : Bool -> Attribute msg
Indicates whether the element's content is editable.

contextmenu : String -> Attribute msg
Defines the ID of a menu element which will serve as the element's context menu.

dir : String -> Attribute msg
Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).

draggable : String -> Attribute msg
Defines whether the element can be dragged.

dropzone : String -> Attribute msg
Indicates that the element accept the dropping of content on it.

itemprop : String -> Attribute msg
lang : String -> Attribute msg
Defines the language used in the element.

spellcheck : Bool -> Attribute msg
Indicates whether spell checking is allowed for the element.

tabindex : Int -> Attribute msg
Overrides the browser's default tab order and follows the one specified instead.

Key Generation

challenge : String -> Attribute msg
A challenge string that is submitted along with the public key in a keygen.

keytype : String -> Attribute msg
Specifies the type of key generated by a keygen. Possible values are: rsa, dsa, and ec.

Miscellaneous

cite : String -> Attribute msg
Contains a URI which points to the source of the quote or change in a blockquote, del, ins, or q.

datetime : String -> Attribute msg
Indicates the date and time associated with the element. For del, ins, time.

pubdate : String -> Attribute msg
Indicates whether this date and time is the date of the nearest article ancestor element. For time.

manifest : String -> Attribute msg
Specifies the URL of the cache manifest for an html tag.