HTML::O...t::Input(3)

📦 version 0.6.0, in alpine 3.24

💅 NAME

Okay so bestie, welcome to HTML::Object::DOM::Element::Input — the HTML Object DOM Input Class. (Your pager probably files it under HTML::O...t::Input(3) because terminals are dramatic about long names, but that's literally the same thing 🫶)

✨ SYNOPSIS ✨

use HTML::Object::DOM::Element::Input;
my $input = HTML::Object::DOM::Element::Input->new ||
    die( HTML::Object::DOM::Element::Input->error, "\n" );

🎀 VERSION 🎀

v0.2.2

🌸 DESCRIPTION 🌸

This interface is the whole vibe for <input> elements — it hands you the special properties and methods you need to mess with their options, their layout, and how they present themselves. No cap, it's giving main character energy for form controls. ✨

🦋 INHERITANCE 🦋

Look at this lineage, she's iconic 👑

+-----------------------+     +---------------------------+     +-------------------------+     +----------------------------+     +-----------------------------------+
| HTML::Object::Element | --> | HTML::Object::EventTarget | --> | HTML::Object::DOM::Node | --> | HTML::Object::DOM::Element | --> | HTML::Object::DOM::Element::Input |
+-----------------------+     +---------------------------+     +-------------------------+     +----------------------------+     +-----------------------------------+

💖 PROPERTIES 💖

She inherits properties from her parent HTML::Object::DOM::Element plus all the properties exported by HTML::Object::DOM::Element::Shared. Family perks, we love to see it 💅

🍓 accept

This one returns or sets the element's accept HTML attribute — that's the comma-separated list of file types the server will accept when type is file.

Mozilla docs for the curious: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept

🍓 accessKey

Returns a string holding a single character — press it and input focus jumps to the control. Keyboard magic ✨

Example:

<button accesskey="s">Some button</button>

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/accessKey and the accessKey attribute docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey

🍓 allowdirs

Sets or gets a boolean. Heads up: this is part of the non-standard Directory Upload API. It indicates whether or not to allow both directories and files to be selected in the file list. It's implemented only in Firefox and it's hidden behind a preference. So like… lowkey experimental, don't build your whole life on it 💀

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#instance_properties_that_apply_only_to_elements_of_type_file

🍓 alt

Returns or sets the element's alt attribute — the alternative text that shows up when type is image (aka when the image is a no-show 😭).

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#instance_properties_that_apply_only_to_elements_of_type_image

🍓 autocapitalize

Defines the capitalization behavior for user input. The valid values are none, off, characters, words, or sentences.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#instance_properties

🍓 autocomplete

Returns or sets the element's autocomplete attribute — that's the "can the browser fill this in for you" flag. It gets ignored if type is "hidden", "checkbox", "radio", "file", or any button type ("button", "submit", "reset", "image"). Possible values:

on — the browser can autocomplete the value using a previously stored value.
off — the user must explicitly enter a value.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete

🍓 autofocus

Returns or sets the element's autofocus attribute — it says this form control should have input focus when the page loads, unless the user overrides it (like by typing in a different control). Real talk: only one form element in a document can carry the autofocus attribute. And it cannot be applied if type is hidden — nope, you can't auto-focus a hidden control, nice try 🙈

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autofocus

🍓 checked

Returns a boolean representing the current state of the element when type is checkbox or radio.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checked

🍓 defaultChecked

Returns or sets a boolean representing the default state of a radio button or checkbox — as originally specified in the HTML that created this object.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/defaultChecked

🍓 defaultValue

Returns or sets the default value as originally specified in the HTML that created this object.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/defaultValue

🍓 dirName

Returns or sets a string representing the directionality of the element.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/dirName

🍓 disabled

Returns or sets a boolean representing the element's disabled attribute — meaning the control is not available for interaction, and the input values will not be submitted with the form. See also readonly.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/disabled

🍓 files

Returns or accepts a FileList object containing a list of File objects representing the files selected for upload. But bestie, this is a perl framework, so you'd have to set the object values yourself 🫠

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files

🍓 form

Read-only.

An HTML::Object::DOM::Element::Form object: this returns a reference to the parent <form> element.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/form

🍓 formAction

Returns or sets the element's formaction attribute, which contains the "URI" of a program that processes information submitted by the element. This overrides the action attribute of the parent form.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/formAction

🍓 formEnctype

Returns or sets the element's formenctype attribute, which contains the type of content used to submit the form to the server. This overrides the enctype attribute of the parent form.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/formEnctype

🍓 formMethod

Returns or sets the element's formmethod attribute, which contains the HTTP method the browser uses to submit the form. This overrides the method attribute of the parent form.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/formMethod

🍓 formNoValidate

Returns or sets a boolean representing the element's "formnovalidate" HTML attribute — it says the form is not to be validated when it's submitted. This overrides the "novalidate" attribute of the parent form.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/formNoValidate

🍓 formTarget

Returns or sets the element's formtarget attribute, which contains a name or keyword indicating where to display the response received after submitting the form. This overrides the target attribute of the parent form.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/formTarget

🍓 height

Returns or sets the element's height attribute, which defines the height of the image displayed for the button — but only if the value of type is image. iykyk 🖼️

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/height

🍓 indeterminate

Returns a boolean representing whether the checkbox or radio button is in an indeterminate state. For checkboxes the effect is that the checkbox looks obscured/greyed in some way to signal "not checked but not unchecked" — very much a vibe check in limbo 💀. It does not affect the value of the checked attribute, and clicking the checkbox will set the value to false.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate

🍓 inputmode

Provides a hint to browsers about the type of virtual keyboard configuration to use when editing this element or its contents.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/inputmode

🍓 labels

Read-only.

Returns an array object of "label" elements that are labels for this element. Obsessed with a good label era 🎀

Example:

<label id="label1" for="test">Label 1</label>
<input id="test" />
<label id="label2" for="test">Label 2</label>

window->addEventListener( DOMContentLoaded => sub
{
    my $input = $doc->getElementById( 'test' );
    for( my $i = 0; $i < $input->labels->length; $i++ )
    {
        say( $input->labels->[$i]->textContent ); # "Label 1" and "Label 2"
    }
});

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/labels

🍓 list

Read-only.

Returns the element pointed to by the list attribute. Heads up: the property may be "undef" if no HTML element is found in the same tree 🫠

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/list

🍓 max

Returns or sets a string representing 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.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/max

🍓 maxLength

Returns or sets a long representing the element's "maxlength" attribute, containing the maximum number of characters (in Unicode code points) the value can have. ⚠️ If you set this to a negative number, an exception will be thrown.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/maxLength

🍓 min

Returns or sets a string representing 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.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/min

🍓 minLength

Returns or sets a long representing the element's "minlength" attribute, containing the minimum number of characters (in Unicode code points) the value can have. ⚠️ If you set this to a negative number, an exception will be thrown.

Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/minLength

`multiple`

Gets/sets a boolean, and it's literally the element's multiple attribute — the one that says "yes bestie you can pick MORE than one value" (multiple files, for example 🗂️).

Example, because iykyk:

# $fileInput is a <input type=$file multiple>
my $fileInput = $doc->getElementById('myfileinput');

# If true
if( $fileInput->multiple )
{
    for( my $i = 0; $i < $fileInput->files->length; $i++ )
    {
        # Loop $fileInput->files
    }
}
# Only one $file available
else
{
    my $file = $fileInput->files->item(0);
}

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

`name`

Gets/sets a string, the element's name attribute — the lil name tag that identifies the element when the form gets submitted 📮.

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

`pattern`

Gets/sets a string, the element's pattern attribute — a regular expression that the control's value gets checked against 👀. Pro tip straight from the source: use the title attribute to describe the pattern so the user isn't just confused. This attribute only applies when the type attribute is "text", "search", "tel", "url" or "email"; otherwise it's ignored, no cap.

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

`placeholder`

Gets/sets a string, the element's placeholder attribute — the little hint text telling the user what they can type in there ✍️. Important: the placeholder text must not contain carriage returns or line-feeds, okay? This attribute applies when type is "text", "search", "tel", "url" or "email"; otherwise it is ignored.

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

`readOnly`

Gets/sets a boolean, the element's readonly HTML attribute — meaning the user literally cannot modify the value of the control 🔒. This one is ignored if type is hidden, range, color, checkbox, radio, file, or any button type.

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

`required`

Gets/sets a boolean, the element's required attribute — the "you SHALL NOT submit an empty form" flag 🙅‍♀️ — the user must fill in a value before submitting.

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

`selectionDirection`

Gets/sets a string — the direction in which the selection happened. Possible values, bestie:

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`

Gets/sets an unsigned long — the end index of the selected text. When there's no selection at all, it returns the offset of the character immediately following the current text input cursor position 🖱️.

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

`selectionStart`

Gets/sets an unsigned long — 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`

Gets/sets an unsigned long, the element's size attribute — the visual size of the control. Heads up: this value is in pixels, unless 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 ignored 💅.

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

`src`

Gets/sets a string, the element's src attribute — it specifies a URI for the location of an image to display on the graphical submit button, if type is image; otherwise it's ignored 🖼️.

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

`step`

Gets/sets a string, the element's step attribute — it works together 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 it's not set to any, the control accepts only values at multiples of the step value greater than the minimum 📏.

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/step, and the documentation on step attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step

`type`

Gets/sets a string, the element's type attribute — indicating the type of control to display. See type attribute of <input> for possible values 👑.

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

`validationMessage`

Read-only 🚨.

Gets/sets a string — a localised message describing the validation constraints that the control does not satisfy (if any). It's the empty string if the control isn't a candidate for constraint validation (willvalidate is false), or if it satisfies its constraints. This value can also be set by the setCustomValidity method.

`validity`

Read-only 🚨.

Gets/sets the element's current validity state object.

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

`value`

Gets/sets a string — the current value of the control 💖.

Note: if the user enters a value different from the value expected, this may return an empty string.

This interface does not enforce a proper value, so it's 100% on you to use the right one. For example, using a value of "2021-W55" for an input of type "week" is normally illegal, since the week number value should be a number between 1 and 53 🙈.

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

`valueAsDate`

Gets/sets a date — the value of the element interpreted as a date, or undef if conversion is not possible 📅.

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

`valueAsNumber`

Returns a double — the value of the element interpreted as one of the following, in this exact order:

A time value
A number
NaN (undef) if conversion is impossible

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

`webkitEntries`

This always returns undef under perl 💀.

Under JavaScript, it returns an Array of FileSystemEntry objects that describes the currently selected files or directories.

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

`webkitdirectory`

Gets/sets a boolean, the webkitdirectory HTML attribute — if true, the file system picker interface only accepts directories instead of files 📁✨.

Example:

<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>

$doc->getElementById( 'filepicker' )->addEventListener( change => sub
{
    my $output = $doc->getElementById( 'listing' );
    my $files = event->target->files;

    for( my $i=0; $i < $files->length; $i++ )
    {
        my $item = $doc->createElement( 'li' );
        $item->innerHTML = $files->[$i]->webkitRelativePath;
        $output->appendChild( $item );
    };
}, { capture => 0 });

`width`

Gets/sets a string, the element's width attribute — it defines the width of the image displayed for the button, if type is image 📐.

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

`willValidate`

Read-only 🚨.

Gets/sets a boolean — whether the element is a candidate for constraint validation. It's false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a datalist ancestor; or its disabled property is true 🚫.

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

✨ METHODS ✨

Okay so bestie, this is where the actual ✨doing stuff✨ happens. First up, the boring-but-important bit:

Inherits methods from its parent HTML::Object::DOM::Element 🫶

🎀 `mozGetFileNameArray`

So this one is a whole lot of nothing, ngl. Since this is a perl environment, this has no effect and always returns undef. That's it. That's the method. 💀

🎀 `mozSetFileArray`

Yeah… same vibe. Since this is a perl environment, this has no effect and always returns undef. Iconic in its uselessness, honestly. 🦋

🎀 `setCustomValidity`

Thee method for when you need to be like "bestie, this input is NOT valid" and you want to say it in your own words 💅

It sets a custom message to display if the input element's value is not valid.

See Mozilla documentation https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity

🎀 `stepDown`

Decrements the value by (step * n), where n defaults to 1 if not specified. So it's like going backwards down the number line, one lil step at a time 🎀

It returns an HTML::Object::InvalidStateError error in these situations:

if the method is not applicable to for the current type value,
if the value cannot be converted to a number or recognised as a DateTime object when applicable,
if the resulting value is above the max or below the min set by their respective HTML attribute.

And if the element has no step value, step defaults to 1.

Here's the tea on the supported types and their equivalent values 👑

date — unit is 1 (day).

<input type="date" min="2019-12-25" step="1" />

This defaults to 1970-01-01 if not value is set yet, but if a max value is set and stepDown is called, the initial value will be that of max and if min value is set and stepUp is called, the initial value will be that of min

month — unit is 1 (month).

<input type="month" min="2019-12" step="12" />

This defaults to 1970-01 if not value is set yet, but if a max value is set and stepDown is called, the initial value will be that of max and if min value is set and stepUp is called, the initial value will be that of min

week — unit is 1 (week).

<input type="week" min="2019-W23" step="2" />

This defaults to 1970-W1 if not value is set yet, but if a max value is set and stepDown is called, the initial value will be that of max and if min value is set and stepUp is called, the initial value will be that of min

time — unit is 60 (seconds).

<input type="time" min="09:00" step="900" />

This defaults to 00:00 if not value is set yet, but if a max value is set and stepDown is called, the initial value will be that of max and if min value is set and stepUp is called, the initial value will be that of min

datetime-local — unit is 1 (second).

<input type="datetime-local" min="2019-12-25T19:30:01" step="7" />

This defaults to 1970-01-01T00:00:00 if not value is set yet, but if a max value is set and stepDown is called, the initial value will be that of max and if min value is set and stepUp is called, the initial value will be that of min

This also supports the following format 2019-12-25T19:30, i.e. without seconds, and 2019-12-25T19, i.e. without minutes or seconds

number — unit is 1.

<input type="number" min="0" step="0.1" max="10" />

range — unit is 1.

<input type="range" min="0" step="2" max="10" />

Now here's the part that's genuinely so interesting, ok, listen up 🙈

Interestingly enough, if you have the following HTML:

<input type="time" min="17:00" step="900" />

and call stepUp, it will set the value the first time to 17:00, then the second time to 17:15.

However, the other way around is not true, i.e.

<input type="time" max="17:00" step="900" />

Then a call to stepDown will not yield the value 17:00, but instead 23:45, the second time to 17:00 and third time to 16:45. A bug report No 1749427 was filed to Mozilla https://bugzilla.mozilla.org/show_bug.cgi?id=1749427 and to Chromium https://bugs.chromium.org/p/chromium/issues/detail?id=1286160 on 2022-01-11 and is preemptively corrected here in this interface. 💀✨ (We fixed it first, no cap.)

Example:

<!--    decrements by intervals of 900 seconds (15 minute) -->
<input type="time" max="17:00" step="900" />

<!-- decrements by intervals of 7 days (one week) -->
<input type="date" max="2019-12-25" step="7" />

<!-- decrements by intervals of 12 months (one year) -->
<input type="month" max="2019-12" step="12" />

$element->stepDown( [ $stepDecrement ] );

Another example:

<p>
    <label>Enter a number between 0 and 400 that is divisible by 5:
        <input type="number" step="5" id="theNumber" min="0" max="400" />
    </label>
</p>
<p>
    <label>Enter how many values of step you would like to decrement by or leave it blank:
        <input type="number" step="1" id="decrementer" min="-2" max="15" />
    </label>
</p>
<input type="button" value="Decrement" id="theButton" />

# make the $button call the function
my $button = $doc->getElementById('theButton');
$button->addEventListener( click => sub
{
    &stepondown();
});

sub stepondown
{
    my $input = $doc->getElementById('theNumber');
    my $val = $doc->getElementById('decrementer')->value;

    # decrement with a parameter
    if( $val )
    {
        $input->stepDown( $val );
    }
    # or without a parameter. Try it with 0, 5, -2, etc.
    else
    {
        $input->stepDown();
    }
}

See also Mozilla documentation https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown, and Mozilla documentation on step https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step

🎀 `stepUp`

The opposite twin of stepDown, and honestly she's the main character 💖

Increments the value by (step * n), where n defaults to 1 if not specified. Returns an HTML::Object::InvalidStateError error in these cases:

if the method is not applicable to for the current type value.,
if the element has no step value,
if the value cannot be converted to a number,
if the resulting value is above the max or below the min.

Supported types and equivalent values are the same as for stepDown 👑 (scroll up bestie, they're all right there.)

Example:

<p>
    <label>Enter a number between 0 and 400 that is divisible by 5:
        <input type="number" step="5" id="theNumber" min="0" max="400" />
    </label>
</p>
<p>
    <label>Enter how many values of step you would like to increment by or leave it blank:
        <input type="number" step="1" id="incrementer" min="0" max="25" />
    </label>
</p>
<input type="button" value="Increment" id="theButton" />

# make the $button call the function
my $button = $doc->getElementById('theButton')
$button->addEventListener( click => sub
{
    &steponup();
})

sub steponup
{
    my $input = $doc->getElementById('theNumber');
    my $val = $doc->getElementById('incrementer')->value;
    # increment with a parameter
    if( $val )
    {
        $input->stepUp( $val );
    }
    # or without a parameter. Try it with 0
    else
    {
        $input->stepUp();
    }
}

Another example:

<input max="4096" min="1" name="size" step="2" type="number" value="4096" id="foo" />

See also Mozilla documentation https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp, and Mozilla documentation on step https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step

💖 EVENTS 💖

okay bestie, you can also find listeners for these events by prepending on before the event type — it's giving convenience 💅

For example, input event listeners can be set also with the oninput method:

$e->oninput(sub{ # do something });
# or as an lvalue method
$e->oninput = sub{ # do something };

🌸 input

Fires when the value of an input, select, or textarea element has been changed. Note that this is actually fired on the HTML::Object::DOM::Element interface and also applies to contenteditable elements, but we've listed it here because it is most commonly used with form input elements. Also available via the oninput event handler property.

Example:

<input placeholder="Enter some text" name="name" />
<p id="values"></p>

my $input = $doc->querySelector('input');
my $log = $doc->getElementById('values');

$input->addEventListener( input => \&updateValue );

sub updateValue
{
    my $e = shift( @_ );
    $log->textContent = $e->target->value;
}

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

🦋 invalid

Fired when an element does not satisfy its constraints during constraint validation. Also available via the oninvalid event handler property.

Example:

<form action="#">
    <ul>
        <li><label>Enter an integer between 1 and 10: <input type="number" min="1" max="10" required></label></li>
        <li><input type="submit" value="submit"></li>
    </ul>
</form>
<p id="log"></p>

my $input = $doc->querySelector('input');
my $log = $doc->getElementById('log');

$input->addEventListener( invalid => \&logValue );
sub logValue
{
    my $e = shift( @_ )l
    $log->textContent = $e->target->value;
}

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

🔎 search

Fired when a search is initiated on an <input> of type="search". Also available via the onsearch event handler property.

Example:

# addEventListener version
my $input = $doc->querySelector('input[type="search"]');

$input->addEventListener( search => sub
{
    say( "The term searched for was " . $input->value );
})

# onsearch version
my $input = $doc->querySelector( 'input[type="search"]' );

$input->onsearch = sub
{
    say( "The term searched for was " + $input->value );
})

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

selectionchange

Fires when the text selection in a input element has been changed.

Example:

<div>Enter and select text here:<br />
    <input id="mytext" rows="2" cols="20" />
/div>
<div>selectionStart: <span id="start"></span></div>
<div>selectionEnd: <span id="end"></span></div>
<div>selectionDirection: <span id="direction"></span></div>

my $myinput = $doc->getElementById( 'mytext' );

$myinput->addEventListener( selectionchange => sub
{
    $doc->getElementById( 'start' )->textContent = $myinput->selectionStart;
    $doc->getElementById( 'end' )->textContent = $myinput->selectionEnd;
    $doc->getElementById( 'direction' )->textContent = $myinput->selectionDirection;
});

💀 DEPRECATED PROPERTIES 💀

bestie, these are lowkey deprecated — don't make them your main character unless you truly have to 🫶

🌸 align

Provided with a string, and this sets or gets the HTML attribute that represents the alignment of the element. It is better to use CSS instead.

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

🗺️ useMap

A string reflecting the usemap HTML attribute, containing the page-local URL of the <map"> element describing the image map to use. The page-local URL is a pound (hash) symbol (#) followed by the ID of the <map"> element, such as #my-map-element. The <map"> in turn contains <area"> elements indicating the clickable areas in the image.

Example:

<map name="mainmenu-map">
    <area shape="circle" coords="25, 25, 75" href="/index.html" alt="Return to home page">
    <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="Shop">
</map>

<input usemap="#mainmenu-map" />

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

👑 AUTHOR 👑

Jacques Deguest — jack@deguest.jp

🦋 SEE ALSO 🦋

Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Mozilla documentation on input element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

📜 COPYRIGHT & LICENSE 📜

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.

okay bestie that's the whole page 💖 it's HTML::O...t::Input(3) from perl v5.42.2, dated 2026-02-15 — go forth and make something iconic 🫶✨

📦 where this page comes from

alpine 3.24: perl-html-object-doc 0.6.0-r1 · GPL-1.0-or-later OR Artistic-1.0-Perl
💖 girlified by deepseek-ai/DeepSeek-V4.1-Flash-1017 on 2026-11-04: a language model's rewrite of the original, under its terms

HTML::O...t::Input(3)

💅 NAME

✨ SYNOPSIS ✨

🎀 VERSION 🎀

🌸 DESCRIPTION 🌸

🦋 INHERITANCE 🦋

💖 PROPERTIES 💖

🍓 accept

🍓 accessKey

🍓 allowdirs

🍓 alt

🍓 autocapitalize

🍓 autocomplete

🍓 autofocus

🍓 checked

🍓 defaultChecked

🍓 defaultValue

🍓 dirName

🍓 disabled

🍓 files

🍓 form

🍓 formAction

🍓 formEnctype

🍓 formMethod

🍓 formNoValidate

🍓 formTarget

🍓 height

🍓 indeterminate

🍓 inputmode

🍓 labels

🍓 list

🍓 max

🍓 maxLength

🍓 min

🍓 minLength

multiple

name

pattern

placeholder

readOnly

required

selectionDirection

selectionEnd

selectionStart

size

src

step

type

validationMessage

validity

value

valueAsDate

valueAsNumber

webkitEntries

webkitdirectory

width

willValidate

✨ METHODS ✨

🎀 mozGetFileNameArray

🎀 mozSetFileArray

🎀 setCustomValidity

🎀 stepDown

🎀 stepUp

💖 EVENTS 💖

🌸 input

🦋 invalid

🔎 search

selectionchange

💀 DEPRECATED PROPERTIES 💀

🌸 align

🗺️ useMap

👑 AUTHOR 👑

🦋 SEE ALSO 🦋

📜 COPYRIGHT & LICENSE 📜

`multiple`

`name`

`pattern`

`placeholder`

`readOnly`

`required`

`selectionDirection`

`selectionEnd`

`selectionStart`

`size`

`src`

`step`

`type`

`validationMessage`

`validity`

`value`

`valueAsDate`

`valueAsNumber`

`webkitEntries`

`webkitdirectory`

`width`

`willValidate`

🎀 `mozGetFileNameArray`

🎀 `mozSetFileArray`

🎀 `setCustomValidity`

🎀 `stepDown`

🎀 `stepUp`