HTML::O...:Shared(3)

📦 version 0.6.0, in alpine 3.24

🌸 NAME

HTML::Object::DOM::Element::Shared — aka the HTML Object DOM Form Shared Code page, from the User Contributed Perl Documentation section (HTML::O...:Shared(3), if you're squinting at the short version) 💖

✨ SYNOPSIS

use HTML::Object::DOM::Element::Shared qw( :input );

🎀 VERSION

v0.2.0

🦋 DESCRIPTION

Okay so bestie, listen 👑 — this module is literally the shared closet. It implements all the properties and methods that get passed around between several form elements, so every form element doesn't have to re-implement them from scratch. Iconic, honestly.

💅 PROPERTIES

🌈 accept

Set or return the element's accept attribute — it's the comma-separated list of file types the server will accept when type is file. Fr fr, it's just the "what snacks are allowed" list.

⭐ accessKey

Sets or gets the element's attribute representing a string containing a single character that switches input focus to the control when you press it. One character. Not two. Don't get greedy 💀

🍓 allowdirs

Set or get a boolean value. This does not do anything otherwise since this is not an attribute — so like, it's giving decorative, lowkey.

This is part of the Mozilla non-standard Directory Upload API. It indicates whether or not to allow directories and files both to be selected in the file list.

🧚 alt

Sets or returns the element's alt attribute, containing the alternative text to use when type is image. The understudy text, iykyk.

🫶 autocapitalize

Defines the capitalization behavior for user input. Valid values are "none", "off", "characters", "words", or "sentences". Pick your fighter.

💜 autocomplete

Set or returns a string that represents the element's autocomplete attribute, indicating whether the value of the control can be automatically completed by the browser.

Ignored if the value of the type attribute is "hidden", "checkbox", "radio", "file", or a "button" type ("button", "submit", "reset", "image"). So don't even try it with those, it's not going to happen 🙈

Possible values are:

  • on — the browser can autocomplete the value using previously stored value ✨
  • off — the user must explicity enter a value

🔥 autofocus

Set or returns a boolean value that represents the element's autofocus attribute, which specifies that a form control should have input focus when the page loads — unless the user overrides it, for example by typing in a different control. Main character energy, but only one of them gets it.

Only one form element in a document can have the autofocus attribute. And it cannot be applied if the type attribute is set to hidden — that is, you cannot automatically set focus to a hidden control. No sneaky focus for the invisible ones 💀

🩷 checked

Set or returns a boolean value the current state of the element when type is checkbox or radio.

🦋 crossOrigin

A string of a keyword specifying the CORS mode to use when fetching the image resource. If you do not specify crossOrigin, the underlying element is fetched without CORS (the fetch no-cors mode).

Permitted values are:

  • "anonymous" — Requests by the underlying element have their mode set to cors and their credentials mode set to same-origin. This means that CORS is enabled and credentials are sent if the underlying element is fetched from the same origin from which the document was loaded.
  • "use-credentials" — Requests by the HTML::Object::DOM::Element will use the cors mode and the include credentials mode; all underlying element requests by the element will use CORS, regardless of what domain the fetch is from.

If crossOrigin is an empty string (""), the anonymous mode is selected. Fun little default, love that for us 🎀

See Mozilla documentation for more information: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin

🌸 defaultChecked

Set or returns a boolean value that sets the default state of a radio button or checkbox as originally specified in HTML that created this object. It's the factory setting, the og vibe ✨

🧸 dirName

Sets or gets the directionality of the element.

💀 disabled

Set or returns a boolean value that represents the element's disabled attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also "readonly". It's benched. Not in the group chat anymore.

🍓 files

This returns a HTML::Object::DOM::FileList object.

Under JavaScript, this returns or accepts a "FileList" object, which contains a list of "File" objects representing the files selected for upload 📂

👑 form

The "form" HTML element represents a document section containing interactive controls for submitting information.

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

⭐ formAction

Is a string reflecting the URI of a resource that processes information submitted by the button. If specified, this property overrides the action attribute of the "<form"> element that owns this element.

This is used by HTML::Object::DOM::Element::Input

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/formAction

💜 formEnctype

Is a string reflecting the type of content that is used to submit the form to the server. If specified, this property overrides the enctype attribute of the "<form"> element that owns this element.

This is used by HTML::Object::DOM::Element::Input

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/formEnctype

🔥 formMethod

Is a string reflecting the HTTP method that the browser uses to submit the form. If specified, this property overrides the method attribute of the <form> element that owns this element.

This is used by HTML::Object::DOM::Element::Input

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/formMethod

🌈 formNoValidate

Is a boolean value indicating that the form is not to be validated when it is submitted. If specified, this property overrides the novalidate attribute of the <form> element that owns this element.

This is used by HTML::Object::DOM::Element::Input

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/formNoValidate

🎀 formTarget

Is a string reflecting a name or keyword indicating where to display the response that is received after submitting the form. If specified, this property overrides the target attribute of the <form> element that owns this element.

This is used by HTML::Object::DOM::Element::Input

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/formTarget

🧚 hash

The hash property of the Location interface returns a string containing a '#' followed by the fragment identifier of the URL — the ID on the page that the URL is trying to target. It's the "scroll to this bit" of the internet, periodt.

The fragment is not percent-decoded. If the URL does not have a fragment identifier, this property contains an empty string, "".

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/Location/hash

🫶 height

Sets or returns the element's height attribute, which defines the height of the image displayed for the button, if the value of type is image.

💖 host

The host property of the Location interface is a string containing the host, that is the hostname, and then, if the port of the URL is nonempty, a ':', and the port of the URL.

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/Location/host

🌸 hostname

The hostname property of the Location interface is a string containing the domain of the URL. Just the domain. No plus-one, no port.

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/Location/hostname

⭐ href

The href property of the Location interface is a stringifier that returns a string containing the whole URL, and allows the href to be updated. Yes bestie, it's both a getter and a setter — dual threat 💅

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/Location/href

🍓 indeterminate

Set or returns a boolean value that describes whether the checkbox or radio button is in indeterminate state.

For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). It does not affect the value of the checked attribute, and clicking the checkbox will set the value to false. The "I don't know her" state, honestly 😭

🦋 inputmode

Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Very "let them know which keyboard to bring" of it.

🧸 labels

Returns a list of "<label"> elements that are labels for this element, as an array object.

💜 list

Sets or returns the element pointed by the "list" attribute, which returns an ID. The property may be undef if no HTML element found in the same tree. Ghosted 🫥

🔥 max

Set or returns a string that represents the element's "max" attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.

🌈 maxLength

Set or returns an integer that represents the element's "maxlength" attribute, containing the maximum number of characters (in Unicode code points) that the value can have.

Side note: if you set this to a negative number, an exception will be thrown. So maybe don't 🙈

🎀 min

Set or returns a string that represents the element's "min" attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.

🧚 minLength

Set or returns an integer that represents the element's "minlength" attribute, containing the minimum number of characters (in Unicode code points) that the value can have.

Same warning, bestie: if you set this to a negative number, an exception will be thrown 💀

🫶 multiple

Sets or returns a boolean that represents the element's multiple attribute, indicating whether more than one value is possible (e.g., multiple files). Sharing is caring.

💖 name

Set or returns the element's name attribute, containing a name that identifies the element when submitting the form.

🌸 password

The password property of the Location interface is a string containing the password specified before the domain name. Don't go printing this one in public, mwah 💋

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/Location/password

⭐ pathname

The pathname property of the Location interface is a USVString containing the path of the URL for the location, which will be the empty string if there is no path.

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname

🍓 pattern

Set or returns a string that represents the element's "pattern" attribute, containing a regular expression that the control's value is checked against. Use the "title" attribute to describe the pattern to help the user — because nobody can read a regex, let's be real 😭

This attribute applies when the value of the type attribute is "text", "search", "tel", "url" or "email"; otherwise it is ignored.

🦋 placeholder

Set or returns a string that represents the element's "placeholder" attribute, containing a hint to the user of what can be entered in the control.

The "placeholder" text must not contain carriage returns or line-feeds. This attribute applies when the value of the type attribute is "text", "search", "tel", "url" or "email"; otherwise it is ignored.

  • readOnly — sets or returns a boolean for the element's readonly attribute, i.e. "bestie you literally cannot touch this value". Heads up tho: it's completely ignored if the type attribute is hidden, range, color, checkbox, radio, file, or any of the button types. Like, the universe just says no. 💀
  • rel — the rel attribute, which defines the relationship between a linked resource and the current document. It's giving "who are you to me" energy.

Also see the Mozilla documentation at https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel 🦋

  • required — sets or returns a boolean for the element's required attribute, indicating the user must fill in a value before submitting a form. No skipping, no shortcuts, no vibes-only submissions. 👑
  • search — the search property of the Location interface: a search string, also called a query string, aka a USVString containing a '?' followed by the parameters of the URL. That little ?whatever=thing era. ✨

Also see the Mozilla documentation at https://developer.mozilla.org/en-US/docs/Web/API/Location/search

  • selectionDirection — sets or returns a string representing the direction in which selection occurred. Possible values:
    • forward — if selection was performed in the start-to-end direction of the current locale
    • backward — for the opposite direction
    • none — if the direction is unknown
  • selectionEnd — sets or returns an integer representing the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position. Lowkey the "right where you left it" property. 🎀
  • selectionStart — sets or returns an integer representing the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element.
  • size — sets or returns an integer for the element's size attribute, containing the visual size of the control. This value is in pixels unless the value of type is text or password, in which case it's an integer number of characters. Applies only when type is set to text, search, tel, url, email, or password; otherwise it is ignored. Picky little icon. 💅
  • step — sets or returns the element's step attribute, which works with min and max to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this is not set to any, the control accepts only values at multiples of the step value greater than the minimum. Math girlies rise. 🔥
  • src — sets or returns the element's src attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of type is image; otherwise it is ignored. Main character image button only. 🌈
  • type — sets or returns the element's type attribute, indicating the type of control to display. See type attribute of "<input"> for possible values.
  • value — sets or returns the current value of the control. The whole point, honestly. ⭐
  • valueAsDate — sets or returns the value of the element, interpreted as a DateTime object, or undef if conversion is not possible.
  • valueAsNumber — returns the value of the element, interpreted as one of the following, in order:
    • A time value
    • A number
    • undef if conversion is impossible
  • validity — Read-only.

ValidityState object: returns the element's current validity state. It's giving "vibe check but for forms". 🧚

  • validationMessage — Read-only.

Sets or returns a localised message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. This value can be set by the setCustomValidity method. Custom apology letter, basically. 😭

  • webkitdirectory — a boolean value: returns the webkitdirectory attribute; if true, the file system picker interface only accepts directories instead of files. Folders only, no loose files, periodt. 📁

Also see the Mozilla documentation at https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

  • webkitEntries — this does nothing under perl, and returns undef. Rip. 🫶

Also see the Mozilla documentation at https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitEntries

  • width — sets or returns the element's width attribute, which defines the width of the image displayed for the button, if the value of type is image.
  • willValidate — Read-only.

Sets or returns a boolean value that describes whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a <datalist> ancestor; its disabled property is true. Not everyone gets to be a candidate, and that's okay. ⭐

💅 METHODS 💅

checkValidity

In perl, this always returns true, or whatever value you would have set. Slay, effortless. ✨

In a JavaScript environment, this returns true if the element's child controls are subject to constraint validation and satisfy those constraints; returns false if some controls do not satisfy their constraints. Fires an event named invalid at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to false. Yes bestie, that's you — you decide. 👑

Also see the Mozilla documentation on form at https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/checkValidity, and the Mozilla doc on input at https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity

reportValidity

In perl, this always returns true, or whatever value you would have set. 🎀

In a JavaScript environment, this returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user. It's giving "snitching, but helpfully". 🔔

Example:

$doc->forms->myform->addEventListener( submit => sub
{
    $doc->forms->myform->reportValidity();
}, { capture => 0 });

Also see the Mozilla documentation at https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity, and the Mozilla doc on input at https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity

🌸 AUTHOR 🌸

Jacques Deguest <jack@deguest.jp> — the icon who wrote all this. Respect. 🫶

🦋 SEE ALSO 🦋

The whole found family, no cap:

  • HTML::Object::DOM::Element
  • HTML::Object::DOM::Element::Anchor
  • HTML::Object::DOM::Element::Area
  • HTML::Object::DOM::Element::Audio
  • HTML::Object::DOM::Element::Base
  • HTML::Object::DOM::Element::Body
  • HTML::Object::DOM::Element::BR
  • HTML::Object::DOM::Element::Button
  • HTML::Object::DOM::Element::Canvas
  • HTML::Object::DOM::Element::DataList
  • HTML::Object::DOM::Element::Data
  • HTML::Object::DOM::Element::Details
  • HTML::Object::DOM::Element::Dialog
  • HTML::Object::DOM::Element::Directory
  • HTML::Object::DOM::Element::Div
  • HTML::Object::DOM::Element::DList
  • HTML::Object::DOM::Element::Embed
  • HTML::Object::DOM::Element::FieldSet
  • HTML::Object::DOM::Element::Form
  • HTML::Object::DOM::Element::Heading
  • HTML::Object::DOM::Element::Head
  • HTML::Object::DOM::Element::HR
  • HTML::Object::DOM::Element::HTML
  • HTML::Object::DOM::Element::IFrame
  • HTML::Object::DOM::Element::Image
  • HTML::Object::DOM::Element::Input
  • HTML::Object::DOM::Element::Label
  • HTML::Object::DOM::Element::Legend
  • HTML::Object::DOM::Element::Link
  • HTML::Object::DOM::Element::LI
  • HTML::Object::DOM::Element::Map
  • HTML::Object::DOM::Element::Marquee
  • HTML::Object::DOM::Element::Media
  • HTML::Object::DOM::Element::Menu
  • HTML::Object::DOM::Element::Meta
  • HTML::Object::DOM::Element::Meter
  • HTML::Object::DOM::Element::Mod
  • HTML::Object::DOM::Element::Object
  • HTML::Object::DOM::Element::OList
  • HTML::Object::DOM::Element::OptGroup
  • HTML::Object::DOM::Element::Option
  • HTML::Object::DOM::Element::Output
  • HTML::Object::DOM::Element::Paragraph
  • HTML::Object::DOM::Element::Param
  • HTML::Object::DOM::Element::Picture
  • HTML::Object::DOM::Element::Pre
  • HTML::Object::DOM::Element::Progress
  • HTML::Object::DOM::Element::Quote
  • HTML::Object::DOM::Element::Script
  • HTML::Object::DOM::Element::Select
  • HTML::Object::DOM::Element::Slot
  • HTML::Object::DOM::Element::Source
  • HTML::Object::DOM::Element::Span
  • HTML::Object::DOM::Element::Style
  • HTML::Object::DOM::Element::TableCaption
  • HTML::Object::DOM::Element::TableCell
  • HTML::Object::DOM::Element::TableCol
  • HTML::Object::DOM::Element::Table
  • HTML::Object::DOM::Element::TableRow
  • HTML::Object::DOM::Element::TableSection
  • HTML::Object::DOM::Element::Template
  • HTML::Object::DOM::Element::TextArea
  • HTML::Object::DOM::Element::Time
  • HTML::Object::DOM::Element::Title
  • HTML::Object::DOM::Element::Track
  • HTML::Object::DOM::Element::UList
  • HTML::Object::DOM::Element::Unknown
  • HTML::Object::DOM::Element::Video

Copyright(c) 2021 DEGUEST Pte. Ltd.

All rights reserved

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself. Free as in bestie, fr fr. 💖

Okay that's the whole page, you made it to the end! 🎉 This little masterpiece is perl v5.42.2, dated 2026-02-15 — go forth and validate your forms, you gorgeous creature. 💅✨

📦 where this page comes from