Helper functions for HTML attributes. They are organized roughly by
category. Each attribute is labeled with the HTML tags it can be used with, so
just search the page for video
if you want video stuff.
style : String -> String -> Batchable.Html.Attribute 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.
property : String -> Json.Encode.Value -> Batchable.Html.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)
Read more about the difference between properties and attributes here.
attribute : String -> String -> Batchable.Html.Attribute 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.
map : (a -> msg) -> Batchable.Html.Attribute a -> Batchable.Html.Attribute msg
Transform the messages produced by an Attribute
.
batch : List (Batchable.Html.Attribute msg) -> Batchable.Html.Attribute msg
Batch bunch of attributes. It is especially usefull to create Mixins.
none : Batchable.Html.Attribute msg
An attribute that does nothing.
class : String -> Batchable.Html.Attribute 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!
classList : List ( String, Basics.Bool ) -> Batchable.Html.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 ]
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!
id : String -> Batchable.Html.Attribute msg
Often used with CSS to style a specific element. The value of this attribute must be unique.
title : String -> Batchable.Html.Attribute msg
Text to be displayed in a tooltip when hovering over the element.
hidden : Basics.Bool -> Batchable.Html.Attribute msg
Indicates the relevance of an element.
type_ : String -> Batchable.Html.Attribute msg
Defines the type of a button
, input
, embed
, object
, script
,
source
, style
, or menu
.
value : String -> Batchable.Html.Attribute msg
Defines a default value which will be displayed in a button
, option
,
input
, li
, meter
, progress
, or param
.
checked : Basics.Bool -> Batchable.Html.Attribute msg
Indicates whether an input
of type checkbox is checked.
placeholder : String -> Batchable.Html.Attribute msg
Provides a hint to the user of what can be entered into an input
or
textarea
.
selected : Basics.Bool -> Batchable.Html.Attribute msg
Defines which option
will be selected on page load.
accept : String -> Batchable.Html.Attribute msg
List of types the server accepts, typically a file type.
For form
and input
.
acceptCharset : String -> Batchable.Html.Attribute msg
List of supported charsets in a form
.
action : String -> Batchable.Html.Attribute msg
The URI of a program that processes the information submitted via a form
.
autocomplete : Basics.Bool -> Batchable.Html.Attribute msg
Indicates whether a form
or an input
can have their values automatically
completed by the browser.
autofocus : Basics.Bool -> Batchable.Html.Attribute msg
The element should be automatically focused after the page loaded.
For button
, input
, select
, and textarea
.
disabled : Basics.Bool -> Batchable.Html.Attribute msg
Indicates whether the user can interact with a button
, fieldset
,
input
, optgroup
, option
, select
or textarea
.
enctype : String -> Batchable.Html.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.
list : String -> Batchable.Html.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 : Basics.Int -> Batchable.Html.Attribute msg
Defines the maximum number of characters allowed in an input
or
textarea
.
minlength : Basics.Int -> Batchable.Html.Attribute msg
Defines the minimum number of characters allowed in an input
or
textarea
.
method : String -> Batchable.Html.Attribute msg
Defines which HTTP method to use when submitting a form
. Can be GET
(default) or POST.
multiple : Basics.Bool -> Batchable.Html.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 -> Batchable.Html.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
,
object
, output
, select
, textarea
, map
, meta
, and param
.
novalidate : Basics.Bool -> Batchable.Html.Attribute msg
This attribute indicates that a form
shouldn't be validated when
submitted.
pattern : String -> Batchable.Html.Attribute msg
Defines a regular expression which an input
's value will be validated
against.
readonly : Basics.Bool -> Batchable.Html.Attribute msg
Indicates whether an input
or textarea
can be edited.
required : Basics.Bool -> Batchable.Html.Attribute msg
Indicates whether this element is required to fill out or not.
For input
, select
, and textarea
.
size : Basics.Int -> Batchable.Html.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 -> Batchable.Html.Attribute msg
The element ID described by this label
or the element IDs that are used
for an output
.
form : String -> Batchable.Html.Attribute msg
Indicates the element ID of the form
that owns this particular button
,
fieldset
, input
, label
, meter
, object
, output
, progress
,
select
, or textarea
.
max : String -> Batchable.Html.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 -> Batchable.Html.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 -> Batchable.Html.Attribute msg
Add a step size to an input
. Use step "any"
to allow any floating-point
number to be used in the input.
cols : Basics.Int -> Batchable.Html.Attribute msg
Defines the number of columns in a textarea
.
rows : Basics.Int -> Batchable.Html.Attribute msg
Defines the number of rows in a textarea
.
wrap : String -> Batchable.Html.Attribute msg
Indicates whether the text should be wrapped in a textarea
. Possible
values are "hard" and "soft".
href : String -> Batchable.Html.Attribute msg
The URL of a linked resource, such as a
, area
, base
, or link
.
target : String -> Batchable.Html.Attribute 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.
download : String -> Batchable.Html.Attribute 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.
hreflang : String -> Batchable.Html.Attribute msg
Two-letter language code of the linked resource of an a
, area
, or link
.
media : String -> Batchable.Html.Attribute msg
Specifies a hint of the target media of a a
, area
, link
, source
,
or style
.
ping : String -> Batchable.Html.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 -> Batchable.Html.Attribute msg
Specifies the relationship of the target object to the link object.
For a
, area
, link
.
ismap : Basics.Bool -> Batchable.Html.Attribute 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.
usemap : String -> Batchable.Html.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 -> Batchable.Html.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 -> Batchable.Html.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.
src : String -> Batchable.Html.Attribute msg
The URL of the embeddable content. For audio
, embed
, iframe
, img
,
input
, script
, source
, track
, and video
.
height : Basics.Int -> Batchable.Html.Attribute msg
Declare the height of a canvas
, embed
, iframe
, img
, input
,
object
, or video
.
width : Basics.Int -> Batchable.Html.Attribute msg
Declare the width of a canvas
, embed
, iframe
, img
, input
,
object
, or video
.
alt : String -> Batchable.Html.Attribute msg
Alternative text in case an image can't be displayed. Works with img
,
area
, and input
.
autoplay : Basics.Bool -> Batchable.Html.Attribute msg
The audio
or video
should play as soon as possible.
controls : Basics.Bool -> Batchable.Html.Attribute msg
Indicates whether the browser should show playback controls for the audio
or video
.
loop : Basics.Bool -> Batchable.Html.Attribute msg
Indicates whether the audio
or video
should start playing from the
start when it's finished.
preload : String -> Batchable.Html.Attribute msg
Control how much of an audio
or video
resource should be preloaded.
poster : String -> Batchable.Html.Attribute msg
A URL indicating a poster frame to show until the user plays or seeks the
video
.
default : Basics.Bool -> Batchable.Html.Attribute msg
Indicates that the track
should be enabled unless the user's preferences
indicate something different.
kind : String -> Batchable.Html.Attribute msg
Specifies the kind of text track
.
srclang : String -> Batchable.Html.Attribute msg
A two letter language code indicating the language of the track
text data.
sandbox : String -> Batchable.Html.Attribute msg
A space separated list of security restrictions you'd like to lift for an
iframe
.
srcdoc : String -> Batchable.Html.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.
reversed : Basics.Bool -> Batchable.Html.Attribute msg
Indicates whether an ordered list ol
should be displayed in a descending
order instead of a ascending.
start : Basics.Int -> Batchable.Html.Attribute msg
Defines the first number of an ordered list if you want it to be something besides 1.
align : String -> Batchable.Html.Attribute msg
Specifies the horizontal alignment of a caption
, col
, colgroup
,
hr
, iframe
, img
, table
, tbody
, td
, tfoot
, th
, thead
, or
tr
.
colspan : Basics.Int -> Batchable.Html.Attribute msg
The colspan attribute defines the number of columns a cell should span.
For td
and th
.
rowspan : Basics.Int -> Batchable.Html.Attribute msg
Defines the number of rows a table cell should span over.
For td
and th
.
headers : String -> Batchable.Html.Attribute msg
A space separated list of element IDs indicating which th
elements are
headers for this cell. For td
and th
.
scope : String -> Batchable.Html.Attribute msg
Specifies the scope of a header cell th
. Possible values are: col, row,
colgroup, rowgroup.
Attributes that can be attached to any HTML tag but are less commonly used.
accesskey : Char -> Batchable.Html.Attribute msg
Defines a keyboard shortcut to activate or add focus to the element.
contenteditable : Basics.Bool -> Batchable.Html.Attribute msg
Indicates whether the element's content is editable.
contextmenu : String -> Batchable.Html.Attribute msg
Defines the ID of a menu
element which will serve as the element's
context menu.
dir : String -> Batchable.Html.Attribute msg
Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).
draggable : String -> Batchable.Html.Attribute msg
Defines whether the element can be dragged.
dropzone : String -> Batchable.Html.Attribute msg
Indicates that the element accept the dropping of content on it.
itemprop : String -> Batchable.Html.Attribute msg
lang : String -> Batchable.Html.Attribute msg
Defines the language used in the element.
spellcheck : Basics.Bool -> Batchable.Html.Attribute msg
Indicates whether spell checking is allowed for the element.
tabindex : Basics.Int -> Batchable.Html.Attribute msg
Overrides the browser's default tab order and follows the one specified instead.
cite : String -> Batchable.Html.Attribute msg
Contains a URI which points to the source of the quote or change in a
blockquote
, del
, ins
, or q
.
datetime : String -> Batchable.Html.Attribute msg
Indicates the date and time associated with the element.
For del
, ins
, time
.
pubdate : String -> Batchable.Html.Attribute msg
Indicates whether this date and time is the date of the nearest article
ancestor element. For time
.
manifest : String -> Batchable.Html.Attribute msg
Specifies the URL of the cache manifest for an html
tag.