▪The following commoninputp434
element content attributes, IDL attributes, and methodsapplyp437
to the element:autocompletep516
,listp469
,maxp467
,minp467
,
placeholderp471
,readonlyp464
,requiredp464
, andstepp468
content attributes;listp475
,valuep472
, andvalueAsNumberp473
IDL attributes;select()p529
,
stepDown()p474
, andstepUp()p474
methods.
▪Thevaluep472
IDL attribute is in modevaluep473
.
▪Theinputp1154
andchangep1154
eventsapplyp437
.
▪The following content attributes must not be specified anddo not applyp437
to the element:acceptp457
,altp460
,checkedp439
,dirnamep510
,formactionp512
,
formenctypep513
,formmethodp512
,formnovalidatep513
,formtargetp513
,heightp393
,inputmodep515
,maxlengthp463
,minlengthp463
,multiplep465
,patternp466
,
sizep463
,srcp460
, andwidthp393
.
▪The following IDL attributes and methodsdo not applyp437
to the element:checkedp473
,filesp473
,selectionStartp529
,selectionEndp530
,selectionDirectionp530
,
valueAsDatep473
,valueLowp474
, andvalueHighp474
IDL attributes;setRangeText()p530
, andsetSelectionRange()p530
methods.
4.10.5.1.13Rangestate (type=range)
When aninputp434
element'stypep436
attribute is in theRangep451
state, the rules in this section apply.
How theRangep451
state operates depends on whether themultiplep465
attribute is specified or not.
When themultiplep465
attribute is not specified on the element
Theinputp434
elementrepresentsp112
a control for setting the element'svaluep508
to a string representing a number, but with the caveat
that the exact value is not important, letting UAs provide a simpler interface than they do for theNumberp450
state.
If the element ismutablep508
, the user agent should allow the user to change the number represented by itsvaluep508
, as obtained from
applying therules for parsing floating-point number valuesp67
to it. User agents must not allow the user to set thevaluep508
to a string that
is not avalid floating-point numberp67
. If the user agent provides a user interface for selecting a number, then thevaluep508
must be set to
abest representation of the number representing the user's selection as a floating-point numberp67
. User agents must not allow the user
to set thevaluep508
to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to avalid floating-point numberp67
, the
control issuffering from bad inputp532
.
Thevaluep438
attribute, if specified, must have a value that is avalid floating-point numberp67
.
Thevalue sanitization algorithmp438
is as follows: If thevaluep508
of the element is not avalid floating-point numberp67
, then set it to
thebest representation, as a floating-point numberp67
, of thedefault valuep451
.
Thedefault valueis theminimump467
plus half the difference between theminimump467
and themaximump467
, unless themaximump467
is
less than theminimump467
, in which case thedefault valuep451
is theminimump467
.
When the element issuffering from an underflowp532
, the user agent must set the element'svaluep508
to thebest representation, as a
floating-point numberp67
, of theminimump467
.
When the element issuffering from an overflowp532
, if themaximump467
is not less than theminimump467
, the user agent must set the
element'svaluep508
to avalid floating-point numberp67
that represents themaximump467
.
Here is an example of using a numeric input control:
<label>How much do you want to charge? $<input type=number min=0 step=0.01 name=price></label>
As described above, a user agent might support numeric input in the user's local format, converting it to the format required for
submission as described above. This might include handling grouping separators (as in "872,000,000,000") and various decimal
separators (such as "3,99" vs "3.99") or using local digits (such as those in Arabic, Devanagari, Persian, and Thai).
Example
Thetype=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For
example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to usetype=number
is to consider whether it would make sense for the input control to have a spinbox interface (e.g. with "up" and "down" arrows). Getting a
credit card number wrong by 1 in the last digit isn't a minor mistake, it's as wrong as getting every digit incorrect. So it would not make
sense for the user to select a credit card number using "up" and "down" buttons. When a spinbox interface is not appropriate,type=text
is probably the right choice (possibly with apatternp466
attribute).
Note
Support:
Chrome
4+
Chrome for Android
50+
UC Browser for Android 9.9+
iOS Safari
5.0-5.1+
Firefox
23+
IE
10+
Opera Mini
None
Android Browser
4.2-4.3+
Edge
12+
Safari
3.1+
Opera
9+
IE Mobile
10+
Source:caniuse.com
451
Pdf data extraction open source - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
extracting data from pdf to excel; how to type into a pdf form in reader
Pdf data extraction open source - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
extract data from pdf; exporting pdf data to excel
When the element issuffering from a step mismatchp532
, the user agent must round the element'svaluep508
to the nearest number for
which the element would notsuffer from a step mismatchp532
, and which is greater than or equal to theminimump467
, and, if the
maximump467
is not less than theminimump467
, which is less than or equal to themaximump467
, if there is a number that matches these
constraints. If two numbers match these constraints, then user agents must use the one nearest to positive infinity.
For example, the markup<input type="range" " min=0 max=100 step=20 value=50>results in a range control
whose initial value is 60.
Example
Here is an example of a range control using an autocomplete list with thelistp469
attribute. This could be useful if there are
values along the full range of the control that are especially important, such as preconfigured light levels or typical speed
limits in a range control used as a speed control. The following markup fragment:
<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
<option value="0">
<option value="-30">
<option value="30">
<option value="++50">
</datalist>
...with the following style sheet applied:
input { height: 75px; width: 49px; background: #D5CCBB; color: black; }
...might render as:
Note how the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width
properties. The colours were similarly derived from the style sheet. The tick marks, however, were derived from the markup.
In particular, thestepp468
attribute has not affected the placement of tick marks, the UA deciding to only use the author-
specified completion values and then adding longer tick marks at the extremes.
Note also how the invalid value++50 was completely ignored.
Example
For another example, consider the following markup fragment:
<input name=x type=range min=100 max=700 step=9.09090909 value=509.090909>
A user agent could display in a variety of ways, for instance:
Or, alternatively, for instance:
The user agent could pick which one to display based on the dimensions given in the style sheet. This would allow it to
maintain the same resolution for the tick marks, despite the differences in width.
Example
Finally, here is an example of a range control with two labeled values:
Example
452
C# PDF Text Extract Library: extract text content from PDF file in
using RasterEdge.XDoc.PDF; Please have a quick test by using the following C# example code for text extraction from PDF page. // Open a document.
pdf form save in reader; how to make pdf editable form reader
VB.NET PDF Page Extract Library: copy, paste, cut PDF pages in vb.
Except provides PDF page extraction method in VB.NET, this page also gives VB This VB.NET code below can help you extract all images from PDF. ' Open a document
pdf form data extraction; pdf data extraction open source
When themultiplep465
attributeisspecified on the element
Theinputp434
elementrepresentsp112
a control for setting the element'svaluesp508
to two strings representing numbers, but with the
caveat that the exact values are not important, enabling UAs provide a graphical interface rather than requiring the user to type the
numbers directly.
If the element ismutablep508
, the user agent should allow the user to change either the first or second number represented by its
valuesp508
, as obtained from applying therules for parsing floating-point number valuesp67
to them, and ensuring that the first value is
never larger than the second value. User agents must not allow the user to set either the first or second of thevaluesp508
to a string that
is not avalid floating-point numberp67
. If the user agent provides a user interface for selecting a number, then thesevaluesp508
must be
set to thebest representations of the numbers representing the user's selections as floating-point numbersp67
. User agents must not
allow the user to set thevaluesp508
to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a pair ofvalid floating-point
numbersp67
, the control issuffering from bad inputp532
.
Thevaluep438
attribute, if specified, must have a value that is a pair ofvalid floating-point numbersp67
separated by a single U+002C
COMMA character (,).
Thevalue sanitization algorithmp438
is as follows:
1. Split on commasp85
the element'svaluep508
.
2. If there are not exactly two values, or if either value is not avalid floating-point numberp67
, then let the element'svaluesp508
be
a pair of values consisting ofa best representation, as a floating-point numberp67
, of the element'sminimump467
and the
element'smaximump467
, with the smaller value first.
3. Otherwise, let the element'svaluesp508
be the two values, with the smaller value first.
4. Let the element'svaluep508
be the result of concatenating the element'svaluesp508
, separating them by a single U+002C
COMMA character (,), with the lower value coming first.
Whenever the user changes the element'svaluesp508
, the user agent must set the element'svaluep508
to the result of concatenating the
element'svaluesp508
, separating them by a single U+002C COMMA character (,), with the lower value coming first.
When the element issuffering from an underflowp532
, the user agent must set either of the element'svaluesp508
that represent values less
than theminimump467
to thebest representation, as a floating-point numberp67
, of theminimump467
.
When the element issuffering from an overflowp532
, if themaximump467
is not less than theminimump467
, the user agent must set either
of the element'svaluesp508
that represent values greater than themaximump467
to avalid floating-point numberp67
that represents the
maximump467
.
When the element issuffering from a step mismatchp532
, the user agent must round the values represented by the element'svaluesp508
to, in each case, the nearest number for which the element would notsuffer from a step mismatchp532
, and which is greater than or equal
<input type="range" name="a" list="a-values">
<datalist id="a-values">
<option value="10" label="Low">
<option value="90" label="High">
</datalist>
With styles that make the control draw vertically, it might look as follows:
453
VB.NET PDF Text Extract Library: extract text content from PDF
'Please have a quick test by using the following example code for text extraction from PDF file in VB.NET program. ' Open a document.
extract data from pdf form; extracting data from pdf into excel
VB.NET PDF Image Extract Library: Select, copy, paste PDF images
below. DLLs for PDF Image Extraction in VB.NET. Document. Sample for extracting all images from PDF in VB.NET program. ' Open a document.
extract data from pdf forms; using pdf forms to collect data
to theminimump467
, and, if themaximump467
is not less than theminimump467
, which is less than or equal to themaximump467
, if there is a
number that matches these constraints. If two numbers match these constraints, then user agents must use the one nearest to positive
infinity.
Whenever the user agent changes the element'svaluesp508
according to the three previous paragraphs, the user agent must set the
element'svaluep508
to the result of concatenating the element'svaluesp508
, separating them by a single U+002C COMMA character (,),
with the lower value coming first.
When themultiplep465
attribute is set or removed, the user agent must run thevalue sanitization algorithmp438
.
Theminp467
attribute, if specified, must have a value that is avalid floating-point numberp67
. Thedefault minimump467
is 0. Themaxp467
attribute, if
specified, must have a value that is avalid floating-point numberp67
. Thedefault maximump467
is 100.
Thestep scale factorp468
is 1. Thedefault stepp468
is 1 (allowing only integers, unless theminp467
attribute has a non-integer value).
Thealgorithm to convert a string to a numberp438
, given a stringinput, is as follows: If applying therules for parsing floating-point number
valuesp67
toinputresults in an error, then return an error; otherwise, return the resulting number.
Thealgorithm to convert a number to a stringp438
, given a numberinput, is as follows: Return thebest representation, as a floating-point
numberp67
, ofinput.
Bookkeeping details
▪The following commoninputp434
element content attributes, IDL attributes, and methodsapplyp437
to the element:autocompletep516
,listp469
,maxp467
,minp467
,
multiplep465
, andstepp468
content attributes;listp475
,valuep472
, andvalueAsNumberp473
IDL attributes;stepDown()p474
andstepUp()p474
methods.
▪The following commoninputp434
IDL attributeappliesp437
to the element if themultiplep465
content attribute is not specified:valueAsNumberp473
.
▪The following commoninputp434
IDL attributesapplyp437
to the element if themultiplep465
content attributeisspecified:valueLowp474
andvalueHighp474
.
▪Thevaluep472
IDL attribute is in modevaluep473
.
▪Theinputp1154
andchangep1154
eventsapplyp437
.
▪The following content attributes must not be specified anddo not applyp437
to the element:acceptp457
,altp460
,checkedp439
,dirnamep510
,formactionp512
,
formenctypep513
,formmethodp512
,formnovalidatep513
,formtargetp513
,heightp393
,inputmodep515
,maxlengthp463
,minlengthp463
,patternp466
,
placeholderp471
,readonlyp464
,requiredp464
,sizep463
,srcp460
, andwidthp393
.
▪The following IDL attributes and methodsdo not applyp437
to the element:checkedp473
,filesp473
,selectionStartp529
,selectionEndp530
,selectionDirectionp530
,
valueAsDatep473
,valueLowp474
, andvalueHighp474
IDL attributes;select()p529
,setRangeText()p530
, andsetSelectionRange()p530
methods.
▪The following commoninputp434
IDL attributesdo not applyp437
to the element if themultiplep465
content attribute is not specified:valueLowp474
andvalueHighp474
.
Consider a user interface that filters possible flights by departure and arrival time:
<form ...>
<fieldset>
<legend>Outbound flight time</legend>
<select ...>
<option>Departure
<option>Arrival
</select>
<p><output name=o1>00:00</output> – <output name=o2>24:00</output></p>
<input type=range multiple min=0 max=24 value=0,24 step=1.0 ...
oninput="o1.value = valueLow + ':00'; o2.value = valueHigh + ':00'">
</fieldset>
...
</form>
With appropriate styling, this might look like:
Example
In this state, the range and step constraints are enforced even during user input, and there is no way to set the value to the empty string.
Note
454
C# PDF Image Extract Library: Select, copy, paste PDF images in C#
C# Project: DLLs for PDF Image Extraction. In Document. C# programming sample for extracting all images from PDF. // Open a document.
online form pdf output; extract data from pdf to excel online
C# PDF File Merge Library: Merge, append PDF files in C#.net, ASP.
Merge Microsoft Office Word, Excel and PowerPoint data to PDF form. PDF document splitting, PDF page reordering and PDF page image and text extraction.
extract table data from pdf; sign pdf form reader
▪The following commoninputp434
IDL attributedoes not applyp437
to the element if themultiplep465
content attributeisspecified:valueAsNumberp473
.
4.10.5.1.14Colourstate (type=color)
When aninputp434
element'stypep436
attribute is in theColourp455
state, the rules in this section apply.
Theinputp434
elementrepresentsp112
a colour well control, for setting the element'svaluep508
to a string representing asimple colourp83
.
If the element ismutablep508
, the user agent should allow the user to change the colour represented by itsvaluep508
, as obtained from applying the
rules for parsing simple colour valuesp83
to it. User agents must not allow the user to set thevaluep508
to a string that is not avalid lowercase simple
colourp83
. If the user agent provides a user interface for selecting a colour, then thevaluep508
must be set to the result of using therules for
serialising simple colour valuesp83
to the user's selection. User agents must not allow the user to set thevaluep508
to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to avalid lowercase simple colourp83
, the control
issuffering from bad inputp532
.
Thevaluep438
attribute, if specified and not empty, must have a value that is avalid simple colourp83
.
Thevalue sanitization algorithmp438
is as follows: If thevaluep508
of the element is avalid simple colourp83
, then set it to thevaluep508
of the
elementconverted to ASCII lowercasep63
; otherwise, set it to the string "#000000".
Bookkeeping details
▪The following commoninputp434
element content attributes and IDL attributesapplyp437
to the element:autocompletep516
andlistp469
content attributes;listp475
and
valuep472
IDL attributes;select()p529
method.
▪Thevaluep472
IDL attribute is in modevaluep473
.
▪Theinputp1154
andchangep1154
eventsapplyp437
.
▪The following content attributes must not be specified anddo not applyp437
to the element:acceptp457
,altp460
,checkedp439
,dirnamep510
,formactionp512
,
formenctypep513
,formmethodp512
,formnovalidatep513
,formtargetp513
,heightp393
,inputmodep515
,maxp467
,maxlengthp463
,minp467
,minlengthp463
,
multiplep465
,patternp466
,placeholderp471
,readonlyp464
,requiredp464
,sizep463
,srcp460
,stepp468
, andwidthp393
.
▪The following IDL attributes and methodsdo not applyp437
to the element:checkedp473
,filesp473
,selectionStartp529
,selectionEndp530
,selectionDirectionp530
,
valueAsDatep473
,valueAsNumberp473
,valueLowp474
, andvalueHighp474
IDL attributes;setRangeText()p530
,setSelectionRange()p530
,stepDown()p474
, and
stepUp()p474
methods.
4.10.5.1.15Checkboxstate (type=checkbox)
When aninputp434
element'stypep436
attribute is in theCheckboxp455
state, the rules in this section apply.
Theinputp434
elementrepresentsp112
a two-state control that represents the element'scheckednessp508
state. If the element'scheckednessp508
state is true, the control represents a positive selection, and if it is false, a negative selection. If the element'sindeterminatep439
IDL attribute is
set to true, then the control's selection should be obscured as if the control was in a third, indeterminate, state.
If the element ismutablep508
, then: Thepre-click activation stepsp710
consist of setting the element'scheckednessp508
to its opposite value (i.e. true if
it is false, false if it is true), and of setting the element'sindeterminatep439
IDL attribute to false. Thecanceled activation stepsp710
consist of
setting thecheckednessp508
and the element'sindeterminatep439
IDL attribute back to the values they had before thepre-click activation
stepsp710
were run. Theactivation behaviourp710
is tofire a simple eventp854
that bubbles namedinputp1154
at the element and thenfire a simple
eventp854
that bubbles namedchangep1154
at the element.
If the element is notmutablep508
, it has noactivation behaviourp710
.
Constraint validation: If the element isrequiredp464
and itscheckednessp508
is false, then the element issuffering from being missingp532
.
In this state, there is always a colour picked, and there is no way to set the value to the empty string.
Note
The control is never a true tri-state control, even if the element'sindeterminatep439
IDL attribute is set to true. Theindeterminatep439
IDL attribute only gives the appearance of a third state.
Note
Note
Support:
Chrome
20+
Chrome for Android
50+
UC Browser for Android
(limited)
9.9+
iOS Safari
None
Firefox
29+
IE
None
Opera Mini
None
Android Browser
4.4+
Edge
14+
Safari
TP+
Opera
17+
IE Mobile
None
Source:caniuse.com
455
C# PDF Page Extract Library: copy, paste, cut PDF pages in C#.net
document processing SDK supports PDF page extraction, copying and The portable document format, known as PDF document, is file that allows users to open & read
how to extract data from pdf file using java; extract pdf form data to excel
C# PDF Password Library: add, remove, edit PDF file password in C#
PDFDocument doc = PDFDocument.Open(intputFilePath, userPassword); // Define IsFillForm = true; // Content extraction is allowed true; // Add password to PDF file
fill in pdf form reader; exporting data from excel to pdf form
Bookkeeping details
▪The following commoninputp434
element content attributes and IDL attributesapplyp437
to the element:checkedp439
, andrequiredp464
content attributes;checkedp473
and
valuep472
IDL attributes.
▪Thevaluep472
IDL attribute is in modedefault/onp473
.
▪Theinputp1154
andchangep1154
eventsapplyp437
.
▪The following content attributes must not be specified anddo not applyp437
to the element:acceptp457
,altp460
,autocompletep516
,dirnamep510
,formactionp512
,
formenctypep513
,formmethodp512
,formnovalidatep513
,formtargetp513
,heightp393
,inputmodep515
,listp469
,maxp467
,maxlengthp463
,minp467
,minlengthp463
,
multiplep465
,patternp466
,placeholderp471
,readonlyp464
,sizep463
,srcp460
,stepp468
, andwidthp393
.
▪The following IDL attributes and methodsdo not applyp437
to the element:filesp473
,listp475
,selectionStartp529
,selectionEndp530
,selectionDirectionp530
,
valueAsDatep473
,valueAsNumberp473
,valueLowp474
, andvalueHighp474
IDL attributes;select()p529
,setRangeText()p530
,setSelectionRange()p530
,
stepDown()p474
, andstepUp()p474
methods.
4.10.5.1.16Radio Buttonstate (type=radio)
When aninputp434
element'stypep436
attribute is in theRadio Buttonp456
state, the rules in this section apply.
Theinputp434
elementrepresentsp112
a control that, when used in conjunction with otherinputp434
elements, forms aradio button groupp456
in
which only one control can have itscheckednessp508
state set to true. If the element'scheckednessp508
state is true, the control represents the
selected control in the group, and if it is false, it indicates a control in the group that is not selected.
Theradio button groupthat contains aninputp434
elementaalso contains all the otherinputp434
elementsbthat fulfill all of the following
conditions:
• Theinputp434
elementb'stypep436
attribute is in theRadio Buttonp456
state.
• Eitheraandbhave the sameform ownerp508
, or they both have noform ownerp508
.
• Bothaandbare in the sametree
.
• They both have anamep510
attribute, theirnamep510
attributes are not empty, and the value ofa'snamep510
attribute is acompatibility
caselessp63
match for the value ofb'snamep510
attribute.
Atree
must not contain aninputp434
element whoseradio button groupp456
contains only that element.
When any of the following phenomena occur, if the element'scheckednessp508
state is true after the occurrence, thecheckednessp508
state of all the
other elements in the sameradio button groupp456
must be set to false:
• The element'scheckednessp508
state is set to true (for whatever reason).
• The element'snamep510
attribute is set, changed, or removed.
• The element'sform ownerp508
changes.
• A type change is signalledp439
for the element.
If the elementRismutablep508
, then: Thepre-click activation stepsp710
forRconsist of getting a reference to the element inR'sradio button
groupp456
that has itscheckednessp508
set to true, if any, and then settingR'scheckednessp508
to true. Thecanceled activation stepsp710
forR
consist of checking if the element to which a reference was obtained in thepre-click activation stepsp710
, if any, is still in what is nowR'sradio button
groupp456
, if it still has one, and if so, setting that element'scheckednessp508
to true; or else, if there was no such element, or that element is no
longer inR'sradio button groupp456
, or ifRno longer has aradio button groupp456
, settingR'scheckednessp508
to false. Theactivation behaviourp710
forRis tofire a simple eventp854
that bubbles namedinputp1154
atRand thenfire a simple eventp854
that bubbles namedchangep1154
atR.
If the element is notmutablep508
, it has noactivation behaviourp710
.
Constraint validation: If an element in theradio button groupp456
isrequiredp464
, and all of theinputp434
elements in theradio button groupp456
have acheckednessp508
that is false, then the element issuffering from being missingp532
.
input.indeterminatep439 [ =value]
When set, overrides the rendering ofcheckboxp455
controls so that the current value is not visible.
456
C# PDF - Extract Text from Scanned PDF Using OCR SDK
Field Data. Data: Auto Fill-in Field Data. Field: Insert Recognize scanned PDF document and output OCR result to class source code for ocr text extraction in .NET
extract pdf data to excel; extract data from pdf form to excel
C# TIFF: Use C#.NET Code to Extract Text from TIFF File
SDKs, C# users can easily add and perform text extraction functionality into Certainly, you may also render it to a PDF, Word or SVG Set the training data path
c# read pdf form fields; export pdf data to excel
Bookkeeping details
▪The following commoninputp434
element content attributes and IDL attributesapplyp437
to the element:checkedp439
andrequiredp464
content attributes;checkedp473
and
valuep472
IDL attributes.
▪Thevaluep472
IDL attribute is in modedefault/onp473
.
▪Theinputp1154
andchangep1154
eventsapplyp437
.
▪The following content attributes must not be specified anddo not applyp437
to the element:acceptp457
,altp460
,autocompletep516
,dirnamep510
,formactionp512
,
formenctypep513
,formmethodp512
,formnovalidatep513
,formtargetp513
,heightp393
,inputmodep515
,listp469
,maxp467
,maxlengthp463
,minp467
,minlengthp463
,
multiplep465
,patternp466
,placeholderp471
,readonlyp464
,sizep463
,srcp460
,stepp468
, andwidthp393
.
▪The following IDL attributes and methodsdo not applyp437
to the element:filesp473
,listp475
,selectionStartp529
,selectionEndp530
,selectionDirectionp530
,
valueAsDatep473
,valueAsNumberp473
,valueLowp474
, andvalueHighp474
IDL attributes;select()p529
,setRangeText()p530
,setSelectionRange()p530
,
stepDown()p474
, andstepUp()p474
methods.
4.10.5.1.17File Uploadstate (type=file)
When aninputp434
element'stypep436
attribute is in theFile Uploadp457
state, the rules in this section apply.
Theinputp434
elementrepresentsp112
a list ofselected files, each file consisting of a file name, a file type, and a file body (the contents of the file).
File names must not containpath componentsp457
, even in the case that a user has selected an entire directory hierarchy or multiple files with the
same name from different directories.Path components, for the purposes of theFile Uploadp457
state, are those parts of file names that are
separated by U+005C REVERSE SOLIDUS character (\) characters.
Unless themultiplep465
attribute is set, there must be no more than one file in the list ofselected filesp457
.
If the element ismutablep508
, then the element'sactivation behaviourp710
is to run the following steps:
1. If the algorithm is notallowed to show a popupp752
, then abort these steps without doing anything else.
2. Return, but continue running these stepsin parallelp42
.
3. Optionally, wait until any prior execution of this algorithm has terminated.
4. Display a prompt to the user requesting that the user specify some files. If themultiplep465
attribute is not set, there must be no more
than one file selected; otherwise, any number may be selected. Files can be from the filesystem or created on the fly, e.g. a picture
taken from a camera connected to the user's device.
5. Wait for the user to have made their selection.
6. Queue a taskp843
to first update the element'sselected filesp457
so that it represents the user's selection, thenfire a simple eventp854
that
bubbles namedinputp1154
at theinputp434
element, and finallyfire a simple eventp854
that bubbles namedchangep1154
at the
inputp434
element.
If the element ismutablep508
, the user agent should allow the user to change the files on the list in other ways also, e.g. adding or removing files by
drag-and-drop. When the user does so, the user agent mustqueue a taskp843
to first update the element'sselected filesp457
so that it represents the
user's new selection, thenfire a simple eventp854
that bubbles namedinputp1154
at theinputp434
element, and finallyfire a simple eventp854
that
bubbles namedchangep1154
at theinputp434
element.
If the element is notmutablep508
, it has noactivation behaviourp710
and the user agent must not allow the user to change the element's selection.
Constraint validation: If the element isrequiredp464
and the list ofselected filesp457
is empty, then the element issuffering from being missingp532
.
Theacceptattribute may be specified to provide user agents with a hint of what file types will be accepted.
If specified, the attribute must consist of aset of comma-separated tokensp85
, each of which must be anASCII case-insensitivep63
match for one of
the following:
The string "audio/*"
Indicates that sound files are accepted.
If none of the radio buttons in aradio button groupp456
are checked, then they will all be initially unchecked in the interface, until such time
as one of them is checked (either by the user or by script).
Note
Support:
Chrome
26+
Chrome for Android
(limited)
50+
UC Browser for
Android
None
iOS Safari
None
Firefox
37+
IE
10+
Opera Mini
None
Android Browser
None
Edge
None
Safari(limited)
6+
Opera
15+
IE Mobile(limited)
11+
Source:caniuse.com
457
The string "video/*"
Indicates that video files are accepted.
The string "image/*"
Indicates that image files are accepted.
Avalid MIME type with no parametersp43
Indicates that files of the specified type are accepted.
A string whose first character is a U+002E FULL STOP character (.)
Indicates that files with the specified file extension are accepted.
The tokens must not beASCII case-insensitivep63
matches for any of the other tokens (i.e. duplicates are not allowed). To obtain the list of tokens
from the attribute, the user agent mustsplit the attribute value on commasp85
.
User agents may use the value of this attribute to display a more appropriate user interface than a generic file picker. For instance, given the value
image/*, a user agent could offer the user the option of using a local camera or selecting a photograph from their photo collection; given the value
audio/*, a user agent could offer the user the option of recording a clip using a headset microphone.
User agents should prevent the user from selecting files that are not accepted by one (or more) of these tokens.
Authors are encouraged to specify both any MIME types and any corresponding extensions when looking for data in a specific format.
Note
For example, consider an application that converts Microsoft Word documents to Open Document Format files. Since Microsoft Word
documents are described with a wide variety of MIME types and extensions, the site can list several, as follows:
<input type="file" accept=".doc,.docx,.xml,application/msword,application/
vnd.openxmlformats-officedocument.wordprocessingml.document">
On platforms that only use file extensions to describe file types, the extensions listed here can be used to filter the allowed documents,
while the MIME types can be used with the system's type registration table (mapping MIME types to extensions used by the system), if
any, to determine any other extensions to allow. Similarly, on a system that does not have file names or extensions but labels
documents with MIME types internally, the MIME types can be used to pick the allowed files, while the extensions can be used if the
system has an extension registration table that maps known extensions to MIME types used by the system.
Example
Extensions tend to be ambiguous (e.g. there are an untold number of formats that use the ".dat" extension, and users
can typically quite easily rename their files to have a ".doc" extension even if they are not Microsoft Word documents),
and MIME types tend to be unreliable (e.g. many formats have no formally registered types, and many formats are in
practice labeled using a number of different MIME types). Authors are reminded that, as usual, data received from a
client should be treated with caution, as it may not be in an expected format even if the user is not hostile and the user
agent fully obeyed theacceptp457
attribute's requirements.
⚠Warning!
For historical reasons, thevaluep472
IDL attribute prefixes the file name with the string "C:\fakepath\". Some legacy user agents
actually included the full path (which was a security vulnerability). As a result of this, obtaining the file name from thevaluep472
IDL
attribute in a backwards-compatible way is non-trivial. The following function extracts the file name in a suitably compatible manner:
function extractFilename(path) {
if (path.substr(0, 12) == "C:\\fakepath\\")
return path.substr(12); // modern browser
var x;
x = path.lastIndexOf('/');
if (x >= 0) // Unix-based path
return path.substr(x+1);
x = path.lastIndexOf('\\');
if (x >= 0) // Windows-based path
return path.substr(x+1);
return path; // just the file name
}
This can be used as follows:
Example
458
Bookkeeping details
▪The following commoninputp434
element content attributes and IDL attributesapplyp437
to the element:acceptp457
,multiplep465
, andrequiredp464
content attributes;
filesp473
andvaluep472
IDL attributes;select()p529
method.
▪Thevaluep472
IDL attribute is in modefilenamep473
.
▪Theinputp1154
andchangep1154
eventsapplyp437
.
▪The following content attributes must not be specified anddo not applyp437
to the element:altp460
,autocompletep516
,checkedp439
,dirnamep510
,formactionp512
,
formenctypep513
,formmethodp512
,formnovalidatep513
,formtargetp513
,heightp393
,inputmodep515
,listp469
,maxp467
,maxlengthp463
,minp467
,minlengthp463
,
patternp466
,placeholderp471
,readonlyp464
,sizep463
,srcp460
,stepp468
, andwidthp393
.
▪The element'svaluep438
attribute must be omitted.
▪The following IDL attributes and methodsdo not applyp437
to the element:checkedp473
,listp475
,selectionStartp529
,selectionEndp530
,selectionDirectionp530
,
valueAsDatep473
,valueAsNumberp473
,valueLowp474
, andvalueHighp474
IDL attributes;setRangeText()p530
,setSelectionRange()p530
,stepDown()p474
, and
stepUp()p474
methods.
4.10.5.1.18Submit Buttonstate (type=submit)
When aninputp434
element'stypep436
attribute is in theSubmit Buttonp459
state, the rules in this section apply.
Theinputp434
elementrepresentsp112
a button that, when activated, submits the form. If the element has avaluep438
attribute, the button's label
must be the value of that attribute; otherwise, it must be an implementation-defined string that means "Submit" or some such. The element is a
buttonp429
, specifically asubmit buttonp429
.
If the element ismutablep508
, then the element'sactivation behaviourp710
is as follows: if the element has aform ownerp508
, and the element'snode
document
isfully activep749
,submitp537
theform ownerp508
from theinputp434
element; otherwise, do nothing.
If the element is notmutablep508
, it has noactivation behaviourp710
.
Theformactionp512
,formenctypep513
,formmethodp512
,formnovalidatep513
, andformtargetp513
attributes areattributes for form
submissionp512
.
Bookkeeping details
▪The following commoninputp434
element content attributes and IDL attributesapplyp437
to the element:formactionp512
,formenctypep513
,formmethodp512
,
formnovalidatep513
, andformtargetp513
content attributes;valuep472
IDL attribute.
▪Thevaluep472
IDL attribute is in modedefaultp473
.
▪The following content attributes must not be specified anddo not applyp437
to the element:acceptp457
,altp460
,autocompletep516
,checkedp439
,dirnamep510
,heightp393
,
inputmodep515
,listp469
,maxp467
,maxlengthp463
,minp467
,minlengthp463
,multiplep465
,patternp466
,placeholderp471
,readonlyp464
,requiredp464
,sizep463
,
srcp460
,stepp468
, andwidthp393
.
▪The following IDL attributes and methodsdo not applyp437
to the element:checkedp473
,filesp473
,listp475
,selectionStartp529
,selectionEndp530
,
selectionDirectionp530
,valueAsDatep473
,valueAsNumberp473
,valueLowp474
, andvalueHighp474
IDL attributes;select()p529
,setRangeText()p530
,
setSelectionRange()p530
,stepDown()p474
, andstepUp()p474
methods.
▪Theinputp1154
andchangep1154
eventsdo not applyp437
.
<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>The name of the file you picked is: <span id="filename">(none)</span></p>
<script>
function updateFilename(path) {
var name = extractFilename(path);
document.getElementById('filename').textContent = name;
}
</script>
Since the default label is implementation-defined, and the width of the button typically depends on the button's label, the button's width can
leak a few bits of fingerprintable information. These bits are likely to be strongly correlated to the identity of the user agent and the user's
locale.
Note
Theformnovalidatep513
attribute can be used to make submit buttons that do not trigger the constraint validation.
Note
p30
459
4.10.5.1.19Image Buttonstate (type=image)
When aninputp434
element'stypep436
attribute is in theImage Buttonp460
state, the rules in this section apply.
Theinputp434
elementrepresentsp112
either an image from which a user can select a coordinate and submit the form, or alternatively a button from
which the user can submit the form. The element is abuttonp429
, specifically asubmit buttonp429
.
The image is given by thesrcattribute. Thesrcp460
attribute must be present, and must contain avalid non-empty URL potentially surrounded by
spacesp86
referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.
When any of the these events occur
• theinputp434
element'stypep436
attribute is first set to theImage Buttonp460
state (possibly when the element is first created), and the
srcp460
attribute is present
• theinputp434
element'stypep436
attribute is changed back to theImage Buttonp460
state, and thesrcp460
attribute is present, and its
value has changed since the last time thetypep436
attribute was in theImage Buttonp460
state
• theinputp434
element'stypep436
attribute is in theImage Buttonp460
state, and thesrcp460
attribute is set or changed
then unless the user agent cannot support images, or its support for images has been disabled, or the user agent only fetches images on demand,
or thesrcp460
attribute's value is the empty string, the user agent mustparsep87
the value of thesrcp460
attribute value, relative to the element's
node document
, and if that is successful, run these substeps:
1. Letrequestbe a newrequest
whoseurl
is theresulting URL recordp87
,client
is the element'snode document
'srelevant settings
objectp837
,type
is "image",destination
is "subresource",omit-Origin-header flag
is set,credentials mode
is "include", and whose
use-URL-credentials flag
is set.
2. Fetch
request.
Fetching the image mustdelay the load eventp1042
of the element'snode document
until thetaskp842
that isqueuedp843
by thenetworking task
sourcep846
once the resource has been fetched (defined below) has been run.
If the image was successfully obtained, with no network errors, and the image's type is a supported image type, and the image is a valid image of
that type, then the image is said to beavailable. If this is true before the image is completely downloaded, eachtaskp842
that isqueuedp843
by the
networking task sourcep846
while the image is being fetched must update the presentation of the image appropriately.
The user agent should apply theimage sniffing rules
to determine the type of the image, with the image'sassociated Content-Type headersp88
giving theofficial type. If these rules are not applied, then the type of the image must be the type given by the image'sassociated Content-Type
headersp88
.
User agents must not support non-image resources with theinputp434
element. User agents must not run executable code embedded in the image
resource. User agents must only display the first page of a multipage resource. User agents must not allow the resource to act in an interactive
fashion, but should honor any animation in the resource.
Thetaskp842
that isqueuedp843
by thenetworking task sourcep846
once the resource has been fetched, must, if the download was successful and the
image isavailablep460
,queue a taskp843
tofire a simple eventp854
namedloadp1154
at theinputp434
element; and otherwise, if the fetching process
fails without a response from the remote server, or completes but the image is not a valid or supported image,queue a taskp843
tofire a simple
eventp854
namederrorp1154
on theinputp434
element.
Thealtattribute provides the textual label for the button for users and user agents who cannot use the image. Thealtp460
attribute must be
present, and must contain a non-empty string giving the label that would be appropriate for an equivalent button if the image was unavailable.
Theinputp434
element supportsdimension attributesp393
.
The coordinate is sent to the serverduring form submissionp540
by sending two entries for the element, derived from the name of the
control but with ".x" and ".y" appended to the name with thexandycomponents of the coordinate respectively.
Note
460
Documents you may be interested
Documents you may be interested