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.