File Coverage

lib/HTML/Object/DOM/Element/Input.pm
Criterion Covered Total %
statement 162 260 62.3
branch 74 228 32.4
condition 68 135 50.3
subroutine 17 24 70.8
pod 5 9 55.5
total 326 656 49.7


line stmt bran cond sub pod time code
1             ##----------------------------------------------------------------------------
2             ## HTML Object - ~/lib/HTML/Object/DOM/Element/Input.pm
3             ## Version v0.2.0
4             ## Copyright(c) 2021 DEGUEST Pte. Ltd.
5             ## Author: Jacques Deguest <jack@deguest.jp>
6             ## Created 2021/12/23
7             ## Modified 2022/09/18
8             ## All rights reserved
9             ##
10             ##
11             ## This program is free software; you can redistribute it and/or modify it
12             ## under the same terms as Perl itself.
13             ##----------------------------------------------------------------------------
14             package HTML::Object::DOM::Element::Input;
15             BEGIN
16             {
17 4     4   5245 use strict;
  4         14  
  4         136  
18 4     4   32 use warnings;
  4         8  
  4         150  
19 4     4   23 use parent qw( HTML::Object::DOM::Element );
  4         9  
  4         25  
20 4     4   325 use vars qw( $VERSION );
  4         9  
  4         209  
21 4     4   567 use HTML::Object::DOM::Element::Shared qw( :input );
  4         7  
  4         1782  
22 4     4   32 use Nice::Try;
  4         9  
  4         47  
23 4     4   4804723 use POSIX ();
  4         13  
  4         207  
24 4     4   105 our $VERSION = 'v0.2.0';
25             };
26              
27 4     4   27 use strict;
  4         9  
  4         118  
28 4     4   24 use warnings;
  4         8  
  4         12288  
29              
30             sub init
31             {
32 12     12 1 1229 my $self = shift( @_ );
33 12         522 $self->{_init_strict_use_sub} = 1;
34 12 50       94 $self->SUPER::init( @_ ) || return( $self->pass_error );
35 12 50       70 $self->{tag} = 'input' if( !CORE::length( "$self->{tag}" ) );
36 12         175 return( $self );
37             }
38              
39             # Note: property accept is inherited
40              
41             # Note: property accessKey is inherited
42              
43             # Note: deprecated property align is inherited
44              
45             # Note: property allowdirs is inherited
46              
47             # Note: property alt is inherited
48              
49             # Note: property autocapitalize is inherited
50              
51             # Note: property autocomplete is inherited
52              
53             # Note: property autofocus is inherited
54              
55             # Note: property checked is inherited
56              
57             # Note: property defaultChecked is inherited
58              
59             # Note: property defaultValue is inherited
60              
61             # Note: property dirName is inherited
62              
63             # Note: property disabled is inherited
64              
65             # Note: property files is inherited
66              
67             # Note: property form read-only is inherited
68              
69             # Note: property formAction is inherited
70              
71             # Note: property formEnctype is inherited
72              
73             # Note: property formMethod is inherited
74              
75             # Note: property formNoValidate is inherited
76              
77             # Note: property formTarget is inherited
78              
79             # Note: property height is inherited
80              
81             # Note: property indeterminate is inherited
82              
83             # Note: property inputmode is inherited
84              
85             # Note: property labels read-only is inherited
86              
87             # Note: property list read-only is inherited
88              
89             # Note: property max is inherited
90              
91             # Note: property maxLength is inherited
92              
93             # Note: property min is inherited
94              
95             # Note: property minLength is inherited
96              
97 0     0 1 0 sub mozGetFileNameArray { return; }
98              
99 0     0 1 0 sub mozSetFileArray { return; }
100              
101             # Note: property multiple is inherited
102              
103             # Note: property name is inherited
104              
105 0     0 0 0 sub oninput : lvalue { return( shift->on( 'input', @_ ) ); }
106              
107 0     0 0 0 sub oninvalid : lvalue { return( shift->on( 'invalid', @_ ) ); }
108              
109 0     0 0 0 sub onsearch : lvalue { return( shift->on( 'search', @_ ) ); }
110              
111 0     0 0 0 sub onselectionchange : lvalue { return( shift->on( 'selectionchange', @_ ) ); }
112              
113             # Note: property pattern is inherited
114              
115             # Note: property placeholder is inherited
116              
117             # Note: property readOnly is inherited
118              
119             # Note: property required is inherited
120              
121             # Note: property selectionDirection is inherited
122              
123             # Note: property selectionEnd is inherited
124              
125             # Note: property selectionStart is inherited
126              
127             # Note: property size is inherited
128              
129             # Note: property src is inherited
130              
131             # Note: property step is inherited
132              
133 21     21 1 38158 sub stepDown { return( shift->_set_up_down( { direction => 'down' }, @_ ) ); }
134              
135 14     14 1 26987 sub stepUp { return( shift->_set_up_down( { direction => 'up' }, @_ ) ); }
136              
137             # Note: property type is inherited
138              
139             # Note: deprecated property useMap is inherited
140              
141             # Note: property validationMessage read-only is inherited
142              
143             # Note: property validity read-only is inherited
144              
145             # Note: property value is inherited
146              
147             # Note: property valueAsDate is inherited
148              
149             # Note: property valueAsNumber is inherited
150              
151             # Note: property webkitEntries is inherited
152              
153             # Note: property webkitdirectory is inherited
154              
155             # Note: property width is inherited
156              
157             # Note: property willValidate read-only is inherited
158              
159             # date 1 (day) <input type="date" min="2019-12-25" step="1" />
160             # month 1 (month) <input type="month" min="2019-12" step="12" />
161             # week 1 (week) <input type="week" min="2019-W23" step="2" />
162             # time 60 (seconds) <input type="time" min="09:00" step="900" />
163             # datetime-local 1 (day) <input type="datetime-local" min="2019-12-25T19:30" step="7" />
164             # number 1 <input type="number" min="0" step="0.1" max="10" />
165             # range 1 <input type="range" min="0" step="2" max="10" />
166             #
167             # HTML::Object::InvalidStateError
168             sub _set_up_down
169             {
170 35     35   102 my $self = shift( @_ );
171 35         78 my $opts = shift( @_ );
172 35         73 my $incr = shift( @_ );
173 35 100 66     225 $incr = 1 if( !defined( $incr ) || !CORE::length( "$incr" ) );
174 35 50       137 return( $self->error( "First argument must be an hash reference of parameters." ) ) if( ref( $opts ) ne 'HASH' );
175 35 50       145 return( $self->error({
176             message => "Incremental value provided ($incr) is not a valid number.",
177             class => 'HTML::Object::SyntaxError',
178             }) ) if( !$self->_is_number( $incr ) );
179             # "If the value is a float, the value will increment as if Math.floor(stepDecrement) was passed. If the value is negative, the value will be incremented instead of decremented. "
180             # <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown>
181 35         8187 $incr = POSIX::floor( "$incr" );
182 35   50     166 my $dir = $opts->{direction} // 'down';
183 35         145 my $val = $self->value;
184 35 50       27733 $self->_load_class( 'DateTime' ) || return( $self->pass_error );
185 35 50       537880 $self->_load_class( 'DateTime::Format::Strptime' ) || return( $self->pass_error );
186 35 50       228066 $self->_load_class( 'DateTime::Duration' ) || return( $self->pass_error );
187 35         2814 my $type2unit =
188             {
189             date => { unit => 'day', pattern => '%Y-%m-%d', default => '1970-01-01', step_re => qr/^\d+$/ },
190             month => { unit => 'month', pattern => '%Y-%m', default => '1970-01', step_re => qr/^\d+$/ },
191             week => { unit => 'week', pattern => '%Y-W%W', default => '1970-W1', step_re => qr/^\d+$/ },
192             'time' => { unit => 'second', pattern => ['%H:%M:%S','%H:%M'], default => '00:00:00', step_re => qr/^\d+$/, dt_format => '%02d:%02d', format => '%H:%M:%S' },
193             'datetime-local' => { unit => 'second', pattern => ['%Y-%m-%dT%H:%M:%S','%Y-%m-%dT%H:%M','%Y-%m-%dT%H'], default => '1970-01-01T00:00', step_re => qr/^\d+$/, format => '%Y-%m-%dT%H:%M:%S' },
194             number => { unit => 1, default => 0, step_re => qr/^\d+(?:\.\d+)?$/ },
195             range => { unit => 1, default => 0, step_re => qr/^\d+(?:\.\d+)?$/ },
196             };
197 35   50     175 my $type = $self->attr( 'type' ) || return( $self->error({
198             message => "This input type has no type attribute.",
199             class => 'HTML::Object::SyntaxError',
200             }) );
201 35   50     23187 my $def = $type2unit->{ $type } || return( $self->error({
202             message => "This input type \"$type\" is unsupported for " . ( $dir eq 'up' ? 'stepUp' : 'stepDown' ),
203             class => 'HTML::Object::InvalidStateError',
204             }) );
205 35         126 my $min = $self->attr( 'min' );
206 35         21903 my $max = $self->attr( 'max' );
207 35         22661 my $step = $self->attr( 'step' );
208 35 50 33     22662 $step = 1 if( !defined( $step ) || !CORE::length( "$step" ) || lc( "$step" ) eq 'any' || "$step" !~ /$def->{step_re}/ );
      33        
      33        
209 35 50       184 return( $self->error({
210             message => "This input step value provided ($step) is not a proper number.",
211             class => 'HTML::Object::SyntaxError',
212             }) ) if( !$self->_is_number( "$step" ) );
213            
214 35         6976 my $parse;
215             $parse = sub
216             {
217 31     31   85 my $this = shift( @_ );
218 31 100 100     282 return( $this ) if( $type eq 'week' || $type eq 'number' || $type eq 'range' );
      66        
219 28         52 my( $fmt, $dt );
220 28 100       115 if( ref( $def->{pattern} ) eq 'ARRAY' )
221             {
222 12         28 foreach my $pat ( @{$def->{pattern}} )
  12         36  
223             {
224 19         95 $fmt = DateTime::Format::Strptime->new( pattern => $pat );
225 19         28027 $dt = $fmt->parse_datetime( "$this" );
226 19 100       10799 last if( $dt );
227             }
228             }
229             else
230             {
231 16         123 $fmt = DateTime::Format::Strptime->new( pattern => $def->{pattern} );
232 16         25283 $dt = $fmt->parse_datetime( "$this" );
233             }
234 28 50       13784 if( !defined( $dt ) )
235             {
236 0         0 return( $self->error({
237             message => "Unable to parse $type value \"$this\"': " . $fmt->errmsg,
238             class => 'HTML::Object::InvalidStateError',
239             }) );
240             }
241            
242 28 100       111 if( $def->{format} )
243             {
244 12         72 $dt->set_formatter( DateTime::Format::Strptime->new( pattern => $def->{format} ) );
245             }
246             else
247             {
248 16         73 $dt->set_formatter( $fmt );
249             }
250 28         17335 return( $dt );
251 35         304 };
252            
253 35   100     174 $max //= '';
254 35 100 66     230 if( !defined( $val ) || !CORE::length( "$val" ) )
255             {
256             # If min is provided and we are told to go up, min is our starting value and we return immediately.
257             # However, the reverse is not true, i.e. if we go down and max is defined, we do not start at max value. We would start at 00:00
258 10 100 66     155 if( $dir eq 'up' && defined( $min ) && CORE::length( "$min" ) )
    50 66        
      33        
      33        
259             {
260 4 50       22 if( exists( $type2unit->{ $type } ) )
261             {
262 4         12 my $this = $parse->( $min );
263             # return( $self->error({
264             # message => "Unable to parse $type minimum value \"$min\"': " . $fmt->errmsg,
265             # class => 'HTML::Object::InvalidStateError',
266             # }) ) if( !defined( $this ) );
267 4 50       22 return( $self->pass_error ) if( !defined( $this ) );
268 4         14 $min = $this;
269             }
270             # $self->value = $min;
271 4         19 $self->value( $min );
272 4         1176 return( $self );
273             }
274             elsif( $dir eq 'down' && defined( $max ) && CORE::length( "$max" ) )
275             {
276 6 50       34 if( exists( $type2unit->{ $type } ) )
277             {
278 6         20 my $this = $parse->( $max );
279             # return( $self->error({
280             # message => "Unable to parse $type maximum value \"$max\"': " . $fmt->errmsg,
281             # class => 'HTML::Object::InvalidStateError',
282             # }) ) if( !defined( $this ) );
283 6 50       38 return( $self->pass_error ) if( !defined( $this ) );
284 6         17 $max = $this;
285             }
286             # $self->value = $max;
287 6         34 $self->value( $max );
288 6         1533 return( $self );
289             }
290             else
291             {
292 0         0 $val = $def->{default};
293             }
294             }
295            
296 25 50 33     1387 try
  25         49  
  25         56  
  25         117  
  0         0  
  25         39  
  25         82  
  25         51  
297 25     25   43 {
298 25         32 my $new;
299 25 100 66     175 if( $type eq 'number' || $type eq 'range' )
    100          
300             {
301 5 100       26 $new = ( $dir eq 'up' )
302             ? ( $val + ( $step * $incr ) )
303             : ( $val - ( $step * $incr ) );
304 5 100 33     70 if( ( defined( $max ) && CORE::length( "$max" ) && $dir eq 'up' && $new > $max ) ||
      66        
      100        
      33        
      66        
      100        
      100        
305             ( defined( $min ) && CORE::length( "$min" ) && $dir eq 'down' && $new < $min ) )
306             {
307 2         8 return( $self );
308             }
309             }
310             # We manage it ourself, i.e. without using DateTime::Format::Strptime, beecause
311             # the parser does not seem capable of recognising format like 2021-W23 even with
312             # the proper pattern
313             elsif( $type eq 'week' )
314             {
315 5 50       44 if( $val =~ /^(\d{1,})-W(\d{1,2})$/ )
316             {
317 5         24 my( $y, $w ) = ( $1, $2 );
318 5 50       23 return( $self->error({
319             message => "Week number found \"$w\" is higher than the maximum possible 52",
320             class => 'HTML::Object::InvalidStateError',
321             }) ) if( int( $w ) > 52 );
322 5 50       13 return( $self->error({
323             message => "Week number found \"$w\" is lower than the minimum possible 1",
324             class => 'HTML::Object::InvalidStateError',
325             }) ) if( int( $w ) < 1 );
326 5         37 my $dt = DateTime->from_day_of_year( year => $y, day_of_year => ( $w * 7 ) );
327 5         2492 my $fmt = DateTime::Format::Strptime->new( pattern => $def->{pattern} );
328 5         7974 $dt->set_formatter( $fmt );
329            
330 5 100       366 if( $dir eq 'up' )
331             {
332 2         18 $dt->add( weeks => ( $step * $incr ) );
333             }
334             else
335             {
336 3         24 $dt->subtract( weeks => ( $step * $incr ) );
337             }
338            
339 5 100 100     7335 if( $dir eq 'down' && defined( $min ) && CORE::length( "$min" ) )
    50 66        
      66        
      66        
340             {
341 1         10 my( $min_year, $min_week );
342 1 50       20 if( $min =~ /^(\d{1,})-W(\d{1,2})$/ )
343             {
344 1         5 ( $min_year, $min_week ) = ( $1, $2 );
345 1 50       8 return( $self->error({
346             message => "Minimum week number found \"$min_week\" is higher than the maximum possible 52",
347             class => 'HTML::Object::InvalidStateError',
348             }) ) if( int( $min_week ) > 52 );
349 1 50       4 return( $self->error({
350             message => "Minimum week number found \"$min_week\" is lower than the minimum possible 1",
351             class => 'HTML::Object::InvalidStateError',
352             }) ) if( int( $min_week ) < 1 );
353 1         6 my $dt_min = DateTime->from_day_of_year( year => $min_year, day_of_year => ( $min_week * 7 ) );
354 1         356 $dt_min->set_formatter( $fmt );
355 1 50       60 if( $dt < $dt_min )
356             {
357             # Silently refuse to comply, as browsers do
358 1         185 return( $self );
359             }
360             }
361             else
362             {
363 0         0 return( $self->error({
364             message => "Unable to parse $type minimum value \"$min\"': unsupported format. It should be 2021-W20 for example.",
365             class => 'HTML::Object::InvalidStateError',
366             }) );
367             }
368             }
369             elsif( $dir eq 'up' && defined( $max ) && CORE::length( "$max" ) )
370             {
371 0         0 my( $max_year, $max_week );
372 0 0       0 if( $max =~ /^(\d{1,})-W(\d{1,2})$/ )
373             {
374 0         0 ( $max_year, $max_week ) = ( $1, $2 );
375 0 0       0 return( $self->error({
376             message => "Maximum week number found \"$max_week\" is higher than the maximum possible 52",
377             class => 'HTML::Object::InvalidStateError',
378             }) ) if( int( $max_week ) > 52 );
379 0 0       0 return( $self->error({
380             message => "Maximum week number found \"$max_week\" is lower than the minimum possible 1",
381             class => 'HTML::Object::InvalidStateError',
382             }) ) if( int( $max_week ) < 1 );
383 0         0 my $dt_max = DateTime->from_day_of_year( year => $max_year, day_of_year => ( $max_week * 7 ) );
384 0         0 $dt_max->set_formatter( $fmt );
385 0 0       0 if( $dt > $dt_max )
386             {
387             # Silently refuse to comply, as browsers do
388 0         0 return( $self );
389             }
390             }
391             else
392             {
393 0         0 return( $self->error({
394             message => "Unable to parse $type maximum value \"$max\"': unsupported format. It should be 2021-W20 for example.",
395             class => 'HTML::Object::InvalidStateError',
396             }) );
397             }
398             }
399 4         20 $new = "$dt";
400             }
401             else
402             {
403 0         0 return( $self->error({
404             message => "Unable to parse $type value \"$val\"': unsupported format. It should be 2021-W20 for example.",
405             class => 'HTML::Object::InvalidStateError',
406             }) );
407             }
408             }
409             else
410             {
411 15         46 my $dt = $parse->( $val );
412 15 50       79 return( $self->pass_error ) if( !defined( $dt ) );
413             # We can pass negative number to duration
414 15         183 my $interval = DateTime::Duration->new( "$def->{unit}s" => ( $step * $incr ) );
415 15 100       2270 if( $dir eq 'up' )
416             {
417 6         39 $dt->add_duration( $interval );
418             }
419             else
420             {
421 9         71 $dt->subtract_duration( $interval );
422             }
423            
424            
425 15 100 100     19388 if( $dir eq 'down' && defined( $min ) && CORE::length( "$min" ) )
    100 66        
      66        
      100        
426             {
427 3         14 my $dt_min = $parse->( "$min" );
428 3 50       40 if( !defined( $dt_min ) )
429             {
430             # return( $self->error({
431             # message => "Unable to parse $type minimum value \"$min\"': " . $fmt->errmsg,
432             # class => 'HTML::Object::InvalidStateError',
433             # }) );
434 0         0 return( $self->pass_error );
435             }
436             # $dt_min->set_formatter( $fmt );
437 3 50       19 if( $dt < $dt_min )
438             {
439             # Silently refuse to comply, as browsers do
440 3         561 return( $self );
441             }
442             }
443             elsif( $dir eq 'up' && defined( $max ) && CORE::length( "$max" ) )
444             {
445 3         14 my $dt_max = $parse->( "$max" );
446 3 50       22 if( !defined( $dt_max ) )
447             {
448             # return( $self->error({
449             # message => "Unable to parse $type maximum value \"$max\"': " . $fmt->errmsg,
450             # class => 'HTML::Object::InvalidStateError',
451             # }) );
452 0         0 return( $self->pass_error );
453             }
454             # $dt_max->set_formatter( $fmt );
455 3 50       16 if( $dt > $dt_max )
456             {
457             # Silently refuse to comply, as browsers do
458 3         644 return( $self );
459             }
460             }
461 9         40 $new = "$dt";
462             }
463             # $self->value = $new;
464 16         3718 $self->value( $new );
465 16         3650 return( $self );
466             }
467 25 0 0     285 catch( $e )
  0 0 33     0  
  0 0       0  
  25 0       68  
  25 0       42  
  25 0       47  
  25 0       53  
  25 0       135  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 50       0  
  0 50       0  
  0 100       0  
  0 50       0  
  0 50       0  
  0 50       0  
  0 0       0  
  0 50       0  
  0         0  
  0         0  
  0         0  
  25         95  
  0         0  
  20         42  
  5         17  
  5         37  
  25         138  
  25         139  
  25         82  
  25         73  
  0         0  
  0         0  
  0         0  
  0         0  
468 0     0   0 {
469             return( $self->error({
470 0 0       0 message => "Error " . ( $opts->{direction} ? 'increasing' : 'decreasing' ) . " the input value: $e",
471             class => 'HTML::Object::InvalidStateError',
472             }) );
473 4 0 0 4   37 }
  4 0 0     43  
  4 0 66     997  
  0 0 66     0  
  0 0 33     0  
  0 0 33     0  
  0 0 33     0  
  0 0 0     0  
  0 0 0     0  
  0 0 0     0  
  0 0 0     0  
  0 0 0     0  
  0 0 0     0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 50       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  25 0       126  
  0 0       0  
  25 50       543  
  25 50       160  
  25 50       98  
  0 0       0  
  0 50       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0 0       0  
  0         0  
  0         0  
  0         0  
  0         0  
  0         0  
  0         0  
  0         0  
  25         1613  
  0            
  0            
  0            
  0            
  0            
  0            
  0            
474             }
475              
476             1;
477             # NOTE: POD
478             __END__
479              
480             =encoding utf-8
481              
482             =head1 NAME
483              
484             HTML::Object::DOM::Element::Input - HTML Object DOM Input Class
485              
486             =head1 SYNOPSIS
487              
488             use HTML::Object::DOM::Element::Input;
489             my $input = HTML::Object::DOM::Element::Input->new ||
490             die( HTML::Object::DOM::Element::Input->error, "\n" );
491              
492             =head1 VERSION
493              
494             v0.2.0
495              
496             =head1 DESCRIPTION
497              
498             This interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements.
499              
500             =head1 INHERITANCE
501              
502             +-----------------------+ +---------------------------+ +-------------------------+ +----------------------------+ +-----------------------------------+
503             | HTML::Object::Element | --> | HTML::Object::EventTarget | --> | HTML::Object::DOM::Node | --> | HTML::Object::DOM::Element | --> | HTML::Object::DOM::Element::Input |
504             +-----------------------+ +---------------------------+ +-------------------------+ +----------------------------+ +-----------------------------------+
505              
506             =head1 PROPERTIES
507              
508             Inherits properties from its parent L<HTML::Object::DOM::Element> and the properties exported by L<HTML::Object::DOM::Element::Shared>
509              
510             =head2 accept
511              
512             This returns or sets the element's accept HTML attribute, containing comma-separated list of file types accepted by the server when type is file.
513              
514             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/accept>
515              
516             =head2 accessKey
517              
518             This returns a string containing a single character that switches input focus to the control when pressed.
519              
520             Example:
521              
522             <button accesskey="s">Some button</button>
523              
524             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/accessKey>, L<accessKey attribute documentation|https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey>
525              
526             =head2 allowdirs
527              
528             This sets or gets a boolean value. This is part of the non-standard Directory Upload API; indicates whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.
529              
530             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/allowdirs>
531              
532             =head2 alt
533              
534             This returns or sets the element's alt attribute, containing alternative text to use when type is image.
535              
536             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/alt>
537              
538             =head2 autocapitalize
539              
540             This defines the capitalization behavior for user input. Valid values are none, off, characters, words, or sentences.
541              
542             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/autocapitalize>
543              
544             =head2 autocomplete
545              
546             This returns or sets 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 C<hidden>, C<checkbox>, C<radio>, C<file>, or a button type (C<button>, C<submit>, C<reset>, C<image>). Possible values are:
547              
548             =over 4
549              
550             =item on
551              
552             The browser can autocomplete the value using previously stored value
553              
554             =item off
555              
556             The user must explicitly enter a value
557              
558             =back
559              
560             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/autocomplete>
561              
562             =head2 autofocus
563              
564             This returns or sets 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. Only one form element in a document can have the autofocus attribute. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
565              
566             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/autofocus>
567              
568             =head2 checked
569              
570             This returns a boolean value, which represents the current state of the element when type is checkbox or radio.
571              
572             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/checked>
573              
574             =head2 defaultChecked
575              
576             This returns or sets a boolean value, which represents the default state of a radio button or checkbox as originally specified in HTML that
577             created this object.
578              
579             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/defaultChecked>
580              
581             =head2 defaultValue
582              
583             This returns or sets the default value as originally specified in the HTML that created this object.
584              
585             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/defaultValue>
586              
587             =head2 dirName
588              
589             This returns or sets a string, which represents the directionality of the element.
590              
591             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/dirName>
592              
593             =head2 disabled
594              
595             This returns or sets a boolean value, which 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.
596              
597             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/disabled>
598              
599             =head2 files
600              
601             This returns or accepts a L<FileList|HTML::Object::DOM::FileList> object, which contains a list of File objects representing the files selected for upload. However, this being a perl framework, you would have to set the object values yourself.
602              
603             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/files>
604              
605             =head2 form
606              
607             Read-only.
608              
609             L<HTML::Object::DOM::Element::Form> object: this returns a reference to the parent <form> element.
610              
611             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/form>
612              
613             =head2 formAction
614              
615             This returns or sets the element's formaction attribute, containing the C<URI> of a program that processes information submitted by the element. This overrides the action attribute of the parent form.
616              
617             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/formAction>
618              
619             =head2 formEnctype
620              
621             This returns or sets the element's formenctype attribute, containing the type of content that is used to submit the form to the server. This overrides the enctype attribute of the parent form.
622              
623             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/formEnctype>
624              
625             =head2 formMethod
626              
627             This returns or Sets the element's formmethod attribute, containing the HTTP method that the browser uses to submit the form. This overrides the method attribute of the parent form.
628              
629             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/formMethod>
630              
631             =head2 formNoValidate
632              
633             This returns or sets a boolean value, which represents the element's C<formnovalidate> HTML attribute, indicating that the form is not to be validated when it is submitted. This overrides the C<novalidate> attribute of the parent form.
634              
635             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/formNoValidate>
636              
637             =head2 formTarget
638              
639             This returns or sets the element's formtarget attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the target attribute of the parent form.
640              
641             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/formTarget>
642              
643             =head2 height
644              
645             This returns or sets the element's height attribute, which defines the height of the image displayed for the button, if the value of type is image.
646              
647             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/height>
648              
649             =head2 indeterminate
650              
651             This returns a boolean value, which represents 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). Does not affect the value of the checked attribute, and clicking the checkbox will set the value to false.
652              
653             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/indeterminate>
654              
655             =head2 inputmode
656              
657             This provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
658              
659             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/inputmode>
660              
661             =head2 labels
662              
663             Read-only.
664              
665             This returns an L<array object|Module::Generic::Array> of C<label> elements that are labels for this element.
666              
667             Example:
668              
669             <label id="label1" for="test">Label 1</label>
670             <input id="test" />
671             <label id="label2" for="test">Label 2</label>
672              
673             window->addEventListener( DOMContentLoaded => sub
674             {
675             my $input = $doc->getElementById( 'test' );
676             for( my $i = 0; $i < $input->labels->length; $i++ )
677             {
678             say( $input->labels->[$i]->textContent ); # "Label 1" and "Label 2"
679             }
680             });
681              
682             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/labels>
683              
684             =head2 list
685              
686             Read-only.
687              
688             This returns the L<element|HTML::Object::DOM::Element> pointed by the list attribute. The property may be C<undef> if no HTML element found in the same tree.
689              
690             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/list>
691              
692             =head2 max
693              
694             This returns or sets a string, which 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.
695              
696             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/max>
697              
698             =head2 maxLength
699              
700             This returns or sets a long, which represents the element's C<maxlength> attribute, containing the maximum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
701              
702             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/maxLength>
703              
704             =head2 min
705              
706             This returns or sets a string, which 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.
707              
708             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/min>
709              
710             =head2 minLength
711              
712             This returns or sets a long, which represents the element's C<minlength> attribute, containing the minimum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
713              
714             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/minLength>
715              
716             =head2 multiple
717              
718             This returns or sets a boolean value, which represents the element's multiple attribute, indicating whether more than one value is possible (e.g., multiple files).
719              
720             Example:
721              
722             # $fileInput is a <input type=$file multiple>
723             my $fileInput = $doc->getElementById('myfileinput');
724              
725             # If true
726             if( $fileInput->multiple )
727             {
728             for( my $i = 0; $i < $fileInput->files->length; $i++ )
729             {
730             # Loop $fileInput->files
731             }
732             }
733             # Only one $file available
734             else
735             {
736             my $file = $fileInput->files->item(0);
737             }
738              
739             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/multiple>
740              
741             =head2 name
742              
743             This returns or sets a string, which represents the element's name attribute, containing a name that identifies the element when submitting the form.
744              
745             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/name>
746              
747             =head2 pattern
748              
749             This returns or sets a string, which 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. This attribute applies when the value of the type attribute is C<text>, C<search>, C<tel>, C<url> or C<email>; otherwise it is ignored.
750              
751             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/pattern>
752              
753             =head2 placeholder
754              
755             This returns or sets a string, which 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 C<text>, C<search>, C<tel>, C<url> or C<email>; otherwise it is ignored.
756              
757             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/placeholder>
758              
759             =head2 readOnly
760              
761             This returns or sets a boolean value, which represents the element's readonly HTML attribute, indicating that the user cannot modify the value of the control.This is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type.
762              
763             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/readOnly>
764              
765             =head2 required
766              
767             This returns or sets a boolean value, which represents the element's required attribute, indicating that the user must fill in a value before submitting a form.
768              
769             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/required>
770              
771             =head2 selectionDirection
772              
773             This returns or sets a string, which represents the direction in which selection occurred. Possible values are:forward if selection was performed in the start-to-end direction of the current localebackward for the opposite directionnone if the direction is unknown
774              
775             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/selectionDirection>
776              
777             =head2 selectionEnd
778              
779             This returns or sets an unsigned long, which represents 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.
780              
781             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/selectionEnd>
782              
783             =head2 selectionStart
784              
785             This returns or sets an unsigned long, which represents the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the C<input> element.
786              
787             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/selectionStart>
788              
789             =head2 size
790              
791             This returns or sets an unsigned long, which represents the element's size attribute, containing visual size of the control. This value is in pixels unless the value of type is text or password, in which case, it is an integer number of characters. Applies only when type is set to C<text>, C<search>, C<tel>, C<url>, C<email>, or C<password>; otherwise it is ignored.
792              
793             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/size>
794              
795             =head2 src
796              
797             This returns or sets a string, which represents the element's src attribute, which specifies a C<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.
798              
799             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/src>
800              
801             =head2 step
802              
803             This returns or sets a string, which represents 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.
804              
805             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/step>, L<documentation on step attribute|https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step>
806              
807             =head2 type
808              
809             This returns or sets a string, which represents the element's type attribute, indicating the type of control to display. See type attribute of <input> for possible values.
810              
811             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/type>
812              
813             =head2 validationMessage
814              
815             Read-only.
816              
817             This returns or sets a string, which represents 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 also be set by the L</setCustomValidity> method.
818              
819             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/validationMessage>
820              
821             =head2 validity
822              
823             Read-only.
824              
825             This returns or sets the element's current L<validity state object|HTML::Object::DOM::ValidityState>.
826              
827             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/validity>
828              
829             =head2 value
830              
831             This returns or sets a string, which represents the current value of the control.
832              
833             Note: If the user enters a value different from the value expected, this may return an empty string.
834              
835             This interface does not enforce proper value, so it is up to you to use the right one. For example, using a value of C<2021-W55> for an input of type C<week> is normally illegal since the week number value should be a number between 1 and 53.
836              
837             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/value>
838              
839             =head2 valueAsDate
840              
841             This returns or sets a date, which represents the value of the element, interpreted as a date, or C<undef> if conversion is not possible.
842              
843             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/valueAsDate>
844              
845             =head2 valueAsNumber
846              
847             This returns a double, which represents the value of the element, interpreted as one of the following, in order:
848              
849             =over 4
850              
851             =item A time value
852              
853             =item A number
854              
855             =item NaN (C<undef>) if conversion is impossible
856              
857             =back
858              
859             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/valueAsNumber>
860              
861             =head2 webkitEntries
862              
863             This always returns C<undef> under perl.
864              
865             Under JavaScript, this returns an Array of C<FileSystemEntry> objects that describes the currently selected files or directories.
866              
867             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitEntries>
868              
869             =head2 webkitdirectory
870              
871             This returns or sets a boolean value, which represents the C<webkitdirectory> HTML attribute; if true, the file system picker interface only accepts directories instead of files.
872              
873             Example:
874              
875             <input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
876             <ul id="listing"></ul>
877              
878             $doc->getElementById( 'filepicker' )->addEventListener( change => sub
879             {
880             my $output = $doc->getElementById( 'listing' );
881             my $files = event->target->files;
882              
883             for( my $i=0; $i < $files->length; $i++ )
884             {
885             my $item = $doc->createElement( 'li' );
886             $item->innerHTML = $files->[$i]->webkitRelativePath;
887             $output->appendChild( $item );
888             };
889             }, { capture => 0 });
890              
891             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory>
892              
893             =head2 width
894              
895             This returns or sets a string, which represents the element's width attribute, which defines the width of the image displayed for the button, if the value of type is image.
896              
897             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/width>
898              
899             =head2 willValidate
900              
901             Read-only.
902              
903             This returns or sets a boolean value, which represents 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 C<datalist> ancestor; its disabled property is true.
904              
905             See also L<Mozilla documentation|https://pr11904.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLInputElement/willValidate>
906              
907             =head1 METHODS
908              
909             Inherits methods from its parent L<HTML::Object::DOM::Element>
910              
911             =head2 mozGetFileNameArray
912              
913             Since this is a perl environment, this has no effect and always returns C<undef>.
914              
915             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/mozGetFileNameArray>
916              
917             =head2 mozSetFileArray
918              
919             Since this is a perl environment, this has no effect and always returns C<undef>.
920              
921             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/mozSetFileArray>
922              
923             =head2 setCustomValidity
924              
925             Sets a custom message to display if the input element's value is not valid.
926              
927             See L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity>
928              
929             =head2 stepDown
930              
931             Decrements the value by (step * n), where n defaults to 1 if not specified. Returns an C<HTML::Object::InvalidStateError> error:
932              
933             =over 4
934              
935             =item * if the method is not applicable to for the current type value,
936              
937             =item * if the value cannot be converted to a number or recognised as a L<DateTime> object when applicable,
938              
939             =item * if the resulting value is above the L</max> or below the L</min> set by their respective HTML attribute.
940              
941             =back
942              
943             If the element has no C<step> value, C<step> defaults to C<1>.
944              
945             Supported types and equivalent values are:
946              
947             =over 4
948              
949             =item * date
950              
951             Unit is 1 (day).
952              
953             <input type="date" min="2019-12-25" step="1" />
954              
955             This defaults to C<1970-01-01> if not value is set yet, but if a C<max> value is set and L</stepDown> is called, the initial value will be that of C<max> and if C<min> value is set and L</stepUp> is called, the initial value will be that of C<min>
956              
957             =item * month
958              
959             Unit is 1 (month).
960              
961             <input type="month" min="2019-12" step="12" />
962              
963             This defaults to C<1970-01> if not value is set yet, but if a C<max> value is set and L</stepDown> is called, the initial value will be that of C<max> and if C<min> value is set and L</stepUp> is called, the initial value will be that of C<min>
964              
965             =item * week
966              
967             Unit is 1 (week).
968              
969             <input type="week" min="2019-W23" step="2" />
970              
971             This defaults to C<1970-W1> if not value is set yet, but if a C<max> value is set and L</stepDown> is called, the initial value will be that of C<max> and if C<min> value is set and L</stepUp> is called, the initial value will be that of C<min>
972              
973             =item * time
974              
975             Unit is 60 (seconds).
976              
977             <input type="time" min="09:00" step="900" />
978              
979             This defaults to C<00:00> if not value is set yet, but if a C<max> value is set and L</stepDown> is called, the initial value will be that of C<max> and if C<min> value is set and L</stepUp> is called, the initial value will be that of C<min>
980              
981             =item * datetime-local
982              
983             Unit is 1 (second).
984              
985             <input type="datetime-local" min="2019-12-25T19:30:01" step="7" />
986              
987             This defaults to C<1970-01-01T00:00:00> if not value is set yet, but if a C<max> value is set and L</stepDown> is called, the initial value will be that of C<max> and if C<min> value is set and L</stepUp> is called, the initial value will be that of C<min>
988              
989             This also supports the following format C<2019-12-25T19:30>, i.e. without seconds, and C<2019-12-25T19>, i.e. without minutes or seconds
990              
991             =item * number
992              
993             Unit is 1.
994              
995             <input type="number" min="0" step="0.1" max="10" />
996              
997             =item * range
998              
999             Unit is 1.
1000              
1001             <input type="range" min="0" step="2" max="10" />
1002              
1003             =back
1004              
1005             Interestingly enough, if you have the following HTML:
1006              
1007             <input type="time" min="17:00" step="900" />
1008              
1009             and call C<stepUp>, it will set the value the first time to C<17:00>, then the second time to C<17:15>.
1010              
1011             However, the other way around is not true, i.e.
1012              
1013             <input type="time" max="17:00" step="900" />
1014              
1015             Then a call to C<stepDown> will not yield the value C<17:00>, but instead C<23:45>, the second time to C<17:00> and third time to C<16:45>. A L<bug report No 1749427 was filed to Mozilla|https://bugzilla.mozilla.org/show_bug.cgi?id=1749427> and L<to Chromium|https://bugs.chromium.org/p/chromium/issues/detail?id=1286160> on 2022-01-11 and is preemptively corrected here in this interface.
1016              
1017             Example:
1018              
1019             <!-- decrements by intervals of 900 seconds (15 minute) -->
1020             <input type="time" max="17:00" step="900" />
1021              
1022             <!-- decrements by intervals of 7 days (one week) -->
1023             <input type="date" max="2019-12-25" step="7" />
1024              
1025             <!-- decrements by intervals of 12 months (one year) -->
1026             <input type="month" max="2019-12" step="12" />
1027              
1028             $element->stepDown( [ $stepDecrement ] );
1029              
1030             Another example:
1031              
1032             <p>
1033             <label>Enter a number between 0 and 400 that is divisible by 5:
1034             <input type="number" step="5" id="theNumber" min="0" max="400" />
1035             </label>
1036             </p>
1037             <p>
1038             <label>Enter how many values of step you would like to decrement by or leave it blank:
1039             <input type="number" step="1" id="decrementer" min="-2" max="15" />
1040             </label>
1041             </p>
1042             <input type="button" value="Decrement" id="theButton" />
1043              
1044             # make the $button call the function
1045             my $button = $doc->getElementById('theButton');
1046             $button->addEventListener( click => sub
1047             {
1048             &stepondown();
1049             });
1050              
1051             sub stepondown
1052             {
1053             my $input = $doc->getElementById('theNumber');
1054             my $val = $doc->getElementById('decrementer')->value;
1055              
1056             # decrement with a parameter
1057             if( $val )
1058             {
1059             $input->stepDown( $val );
1060             }
1061             # or without a parameter. Try it with 0, 5, -2, etc.
1062             else
1063             {
1064             $input->stepDown();
1065             }
1066             }
1067              
1068             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown>, and L<Mozilla documentation on step|https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step>
1069              
1070             =head2 stepUp
1071              
1072             Increments the value by (step * n), where n defaults to 1 if not specified. Returns an C<HTML::Object::InvalidStateError> error:
1073              
1074             =over 4
1075              
1076             =item * if the method is not applicable to for the current type value.,
1077              
1078             =item * if the element has no step value,
1079              
1080             =item * if the value cannot be converted to a number,
1081              
1082             =item * if the resulting value is above the max or below the min.
1083              
1084             =back
1085              
1086             Supported types and equivalent values are the same as for L</stepDown>:
1087              
1088             Example:
1089              
1090             <p>
1091             <label>Enter a number between 0 and 400 that is divisible by 5:
1092             <input type="number" step="5" id="theNumber" min="0" max="400" />
1093             </label>
1094             </p>
1095             <p>
1096             <label>Enter how many values of step you would like to increment by or leave it blank:
1097             <input type="number" step="1" id="incrementer" min="0" max="25" />
1098             </label>
1099             </p>
1100             <input type="button" value="Increment" id="theButton" />
1101              
1102             # make the $button call the function
1103             my $button = $doc->getElementById('theButton')
1104             $button->addEventListener( click => sub
1105             {
1106             &steponup();
1107             })
1108              
1109             sub steponup
1110             {
1111             my $input = $doc->getElementById('theNumber');
1112             my $val = $doc->getElementById('incrementer')->value;
1113             # increment with a parameter
1114             if( $val )
1115             {
1116             $input->stepUp( $val );
1117             }
1118             # or without a parameter. Try it with 0
1119             else
1120             {
1121             $input->stepUp();
1122             }
1123             }
1124              
1125             Another example:
1126              
1127             <input max="4096" min="1" name="size" step="2" type="number" value="4096" id="foo" />
1128              
1129             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp>, and L<Mozilla documentation on step|https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step>
1130              
1131             =head1 EVENTS
1132              
1133             Event listeners for those events can also be found by prepending C<on> before the event type:
1134              
1135             For example, C<input> event listeners can be set also with C<oninput> method:
1136              
1137             $e->oninput(sub{ # do something });
1138             # or as an lvalue method
1139             $e->oninput = sub{ # do something };
1140              
1141             =head2 input
1142              
1143             Fires when the value of an C<input>, C<select>, or C<textarea> element has been changed. Note that this is actually fired on the L<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 C<oninput> event handler property.
1144              
1145             Example:
1146              
1147             <input placeholder="Enter some text" name="name" />
1148             <p id="values"></p>
1149              
1150             my $input = $doc->querySelector('input');
1151             my $log = $doc->getElementById('values');
1152              
1153             $input->addEventListener( input => \&updateValue );
1154              
1155             sub updateValue
1156             {
1157             my $e = shift( @_ );
1158             $log->textContent = $e->target->value;
1159             }
1160              
1161             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event>
1162              
1163             =head2 invalid
1164              
1165             Fired when an element does not satisfy its constraints during constraint validation. Also available via the oninvalid event handler property.
1166              
1167             Example:
1168              
1169             <form action="#">
1170             <ul>
1171             <li><label>Enter an integer between 1 and 10: <input type="number" min="1" max="10" required></label></li>
1172             <li><input type="submit" value="submit"></li>
1173             </ul>
1174             </form>
1175             <p id="log"></p>
1176              
1177             my $input = $doc->querySelector('input');
1178             my $log = $doc->getElementById('log');
1179              
1180             $input->addEventListener( invalid => \&logValue );
1181             sub logValue
1182             {
1183             my $e = shift( @_ )l
1184             $log->textContent = $e->target->value;
1185             }
1186              
1187             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event>
1188              
1189             =head2 search
1190              
1191             Fired when a search is initiated on an <input> of type="search". Also available via the onsearch event handler property.
1192              
1193             Example:
1194              
1195             # addEventListener version
1196             my $input = $doc->querySelector('input[type="search"]');
1197              
1198             $input->addEventListener( search => sub
1199             {
1200             say( "The term searched for was " . $input->value );
1201             })
1202              
1203             # onsearch version
1204             my $input = $doc->querySelector( 'input[type="search"]' );
1205              
1206             $input->onsearch = sub
1207             {
1208             say( "The term searched for was " + $input->value );
1209             })
1210              
1211             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/search_event>
1212              
1213             =head2 selectionchange
1214              
1215             Fires when the text selection in a C<input> element has been changed.
1216              
1217             Example:
1218              
1219             <div>Enter and select text here:<br />
1220             <input id="mytext" rows="2" cols="20" />
1221             /div>
1222             <div>selectionStart: <span id="start"></span></div>
1223             <div>selectionEnd: <span id="end"></span></div>
1224             <div>selectionDirection: <span id="direction"></span></div>
1225              
1226             my $myinput = $doc->getElementById( 'mytext' );
1227              
1228             $myinput->addEventListener( selectionchange => sub
1229             {
1230             $doc->getElementById( 'start' )->textContent = $myinput->selectionStart;
1231             $doc->getElementById( 'end' )->textContent = $myinput->selectionEnd;
1232             $doc->getElementById( 'direction' )->textContent = $myinput->selectionDirection;
1233             });
1234              
1235             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionchange_event>
1236              
1237             =head1 DEPRECATED PROPERTIES
1238              
1239             =head2 align
1240              
1241             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.
1242              
1243             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/align>
1244              
1245             =head2 useMap
1246              
1247             A string reflecting the usemap HTML attribute, containing the page-local URL of the C<<map>> element describing the image map to use. The page-local URL is a pound (hash) symbol (#) followed by the ID of the C<<map>> element, such as #my-map-element. The C<<map>> in turn contains C<<area>> elements indicating the clickable areas in the image.
1248              
1249             Example:
1250              
1251             <map name="mainmenu-map">
1252             <area shape="circle" coords="25, 25, 75" href="/index.html" alt="Return to home page">
1253             <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="Shop">
1254             </map>
1255              
1256             <input usemap="#mainmenu-map" />
1257              
1258             See also L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/useMap>
1259              
1260             =head1 AUTHOR
1261              
1262             Jacques Deguest E<lt>F<jack@deguest.jp>E<gt>
1263              
1264             =head1 SEE ALSO
1265              
1266             L<Mozilla documentation|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement>, L<Mozilla documentation on input element|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input>
1267              
1268             =head1 COPYRIGHT & LICENSE
1269              
1270             Copyright(c) 2021 DEGUEST Pte. Ltd.
1271              
1272             All rights reserved
1273              
1274             This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.
1275              
1276             =cut