miniBill / elm-html-with-context / Html.WithContext.Attributes

manifest : String -> Html.WithContext.Attribute context msg

Specifies the URL of the cache manifest for an html tag.

scope : String -> Html.WithContext.Attribute context msg

Specifies the scope of a header cell th. Possible values are: col, row, colgroup, rowgroup.

rowspan : Basics.Int -> Html.WithContext.Attribute context msg

Defines the number of rows a table cell should span over. For td and th.

headers : String -> Html.WithContext.Attribute context msg

A space separated list of element IDs indicating which th elements are headers for this cell. For td and th.

colspan : Basics.Int -> Html.WithContext.Attribute context msg

The colspan attribute defines the number of columns a cell should span. For td and th.

start : Basics.Int -> Html.WithContext.Attribute context msg

Defines the first number of an ordered list if you want it to be something besides 1.

reversed : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates whether an ordered list ol should be displayed in a descending order instead of a ascending.

pubdate : String -> Html.WithContext.Attribute context msg

Indicates whether this date and time is the date of the nearest article ancestor element. For time.

datetime : String -> Html.WithContext.Attribute context msg

Indicates the date and time associated with the element. For del, ins, time.

rel : String -> Html.WithContext.Attribute context msg

Specifies the relationship of the target object to the link object. For a, area, link.

ping : String -> Html.WithContext.Attribute context 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.

media : String -> Html.WithContext.Attribute context msg

Specifies a hint of the target media of a a, area, link, source, or style.

hreflang : String -> Html.WithContext.Attribute context msg

Two-letter language code of the linked resource of an a, area, or link.

download : String -> Html.WithContext.Attribute context msg

Indicates that clicking an a and area will download the resource directly. The String argument determins the name of the downloaded file. Say the file you are serving is named hats.json.

download ""               -- hats.json
download "my-hats.json"   -- my-hats.json
download "snakes.json"    -- snakes.json

The empty String says to just name it whatever it was called on the server.

target : String -> Html.WithContext.Attribute context msg

Specify where the results of clicking an a, area, base, or form should appear. Possible special values include:

You can also give the name of any frame you have created.

href : String -> Html.WithContext.Attribute context msg

The URL of a linked resource, such as a, area, base, or link.

cite : String -> Html.WithContext.Attribute context msg

Contains a URI which points to the source of the quote or change in a blockquote, del, ins, or q.

align : String -> Html.WithContext.Attribute context msg

Specifies the horizontal alignment of a caption, col, colgroup, hr, iframe, img, table, tbody, td, tfoot, th, thead, or tr.

coords : String -> Html.WithContext.Attribute context 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.

shape : String -> Html.WithContext.Attribute context 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.

usemap : String -> Html.WithContext.Attribute context 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".

ismap : Basics.Bool -> Html.WithContext.Attribute context msg

When an img is a descendant 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.

wrap : String -> Html.WithContext.Attribute context msg

Indicates whether the text should be wrapped in a textarea. Possible values are "hard" and "soft".

rows : Basics.Int -> Html.WithContext.Attribute context msg

Defines the number of rows in a textarea.

cols : Basics.Int -> Html.WithContext.Attribute context msg

Defines the number of columns in a textarea.

step : String -> Html.WithContext.Attribute context msg

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

min : String -> Html.WithContext.Attribute context 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.

max : String -> Html.WithContext.Attribute context 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.

form : String -> Html.WithContext.Attribute context msg

Indicates the element ID of the form that owns this particular button, fieldset, input, label, meter, object, output, progress, select, or textarea.

for : String -> Html.WithContext.Attribute context msg

The element ID described by this label or the element IDs that are used for an output.

size : Basics.Int -> Html.WithContext.Attribute context msg

For input specifies the width of an input in characters.

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

required : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates whether this element is required to fill out or not. For input, select, and textarea.

readonly : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates whether an input or textarea can be edited.

pattern : String -> Html.WithContext.Attribute context msg

Defines a regular expression which an input's value will be validated against.

novalidate : Basics.Bool -> Html.WithContext.Attribute context msg

This attribute indicates that a form shouldn't be validated when submitted.

name : String -> Html.WithContext.Attribute context msg

Name of the element. For example used by the server to identify the fields in form submits. For button, form, fieldset, iframe, input, object, output, select, textarea, map, meta, and param.

multiple : Basics.Bool -> Html.WithContext.Attribute context 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.

method : String -> Html.WithContext.Attribute context msg

Defines which HTTP method to use when submitting a form. Can be GET (default) or POST.

maxlength : Basics.Int -> Html.WithContext.Attribute context msg

Defines the maximum number of characters allowed in an input or textarea.

minlength : Basics.Int -> Html.WithContext.Attribute context msg

Defines the minimum number of characters allowed in an input or textarea.

list : String -> Html.WithContext.Attribute context 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.

enctype : String -> Html.WithContext.Attribute context 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.

disabled : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates whether the user can interact with a button, fieldset, input, optgroup, option, select or textarea.

autofocus : Basics.Bool -> Html.WithContext.Attribute context msg

The element should be automatically focused after the page loaded. For button, input, select, and textarea.

autocomplete : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates whether a form or an input can have their values automatically completed by the browser.

action : String -> Html.WithContext.Attribute context msg

The URI of a program that processes the information submitted via a form.

acceptCharset : String -> Html.WithContext.Attribute context msg

List of supported charsets in a form.

accept : String -> Html.WithContext.Attribute context msg

List of types the server accepts, typically a file type. For form and input.

selected : Basics.Bool -> Html.WithContext.Attribute context msg

Defines which option will be selected on page load.

placeholder : String -> Html.WithContext.Attribute context msg

Provides a hint to the user of what can be entered into an input or textarea.

checked : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates whether an input of type checkbox is checked.

value : String -> Html.WithContext.Attribute context msg

Defines a default value which will be displayed in a button, option, input, li, meter, progress, or param.

type_ : String -> Html.WithContext.Attribute context msg

Defines the type of a button, input, embed, object, script, source, style, or menu.

srcdoc : String -> Html.WithContext.Attribute context 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.

sandbox : String -> Html.WithContext.Attribute context msg

A space separated list of security restrictions you'd like to lift for an iframe.

srclang : String -> Html.WithContext.Attribute context msg

A two letter language code indicating the language of the track text data.

kind : String -> Html.WithContext.Attribute context msg

Specifies the kind of text track.

default : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates that the track should be enabled unless the user's preferences indicate something different.

poster : String -> Html.WithContext.Attribute context msg

A URL indicating a poster frame to show until the user plays or seeks the video.

preload : String -> Html.WithContext.Attribute context msg

Control how much of an audio or video resource should be preloaded.

loop : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates whether the audio or video should start playing from the start when it's finished.

controls : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates whether the browser should show playback controls for the audio or video.

autoplay : Basics.Bool -> Html.WithContext.Attribute context msg

The audio or video should play as soon as possible.

alt : String -> Html.WithContext.Attribute context msg

Alternative text in case an image can't be displayed. Works with img, area, and input.

width : Basics.Int -> Html.WithContext.Attribute context msg

Declare the width of a canvas, embed, iframe, img, input, object, or video.

height : Basics.Int -> Html.WithContext.Attribute context msg

Declare the height of a canvas, embed, iframe, img, input, object, or video.

src : String -> Html.WithContext.Attribute context msg

The URL of the embeddable content. For audio, embed, iframe, img, input, script, source, track, and video.

tabindex : Basics.Int -> Html.WithContext.Attribute context msg

Overrides the browser's default tab order and follows the one specified instead.

spellcheck : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates whether spell checking is allowed for the element.

lang : String -> Html.WithContext.Attribute context msg

Defines the language used in the element.

itemprop : String -> Html.WithContext.Attribute context msg

dropzone : String -> Html.WithContext.Attribute context msg

Indicates that the element accept the dropping of content on it.

draggable : String -> Html.WithContext.Attribute context msg

Defines whether the element can be dragged.

dir : String -> Html.WithContext.Attribute context msg

Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).

contextmenu : String -> Html.WithContext.Attribute context msg

Defines the ID of a menu element which will serve as the element's context menu.

contenteditable : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates whether the element's content is editable.

accesskey : Char -> Html.WithContext.Attribute context msg

Defines a keyboard shortcut to activate or add focus to the element.

title : String -> Html.WithContext.Attribute context msg

Text to be displayed in a tooltip when hovering over the element.

id : String -> Html.WithContext.Attribute context msg

Often used with CSS to style a specific element. The value of this attribute must be unique.

hidden : Basics.Bool -> Html.WithContext.Attribute context msg

Indicates the relevance of an element.

class : String -> Html.WithContext.Attribute context msg

Often used with CSS to style elements with common properties.

Note: You can have as many class and classList attributes as you want. They all get applied, so if you say [ class "notice", class "notice-seen" ] you will get both classes!

map : (a -> b) -> Html.WithContext.Attribute context a -> Html.WithContext.Attribute context b

Transform the messages produced by an Attribute.

attribute : String -> String -> Html.WithContext.Attribute context msg

Create attributes, like saying domNode.setAttribute('class', 'greeting') in JavaScript.

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

Read more about the difference between properties and attributes here.

property : String -> Json.Encode.Value -> Html.WithContext.Attribute context 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)

Read more about the difference between properties and attributes here.

classList : List ( String, Basics.Bool ) -> Html.WithContext.Attribute context 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 ]

Note: You can have as many class and classList attributes as you want. They all get applied, so if you say [ class "notice", class "notice-seen" ] you will get both classes!

style : String -> String -> Html.WithContext.Attribute context msg

Specify a style.

greeting : Node msg
greeting =
  div
    [ style "background-color" "red"
    , style "height" "90px"
    , style "width" "100%"
    ]
    [ 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.