The Input Element

Input


The input element is by far the most lavish of all the form elements. It has a miriad of types and options.

All input types have one thing in common... they all collect or manipulate data. Even the buttons...

Keep in mind that the input tag is a closed element... because it has no data... that means there is no end or closing tag... you knew that.

CREATED 2020-09-12 10:44:16.0

010-00-02-CA

UPDATED 2020-09-12 10:44:28.0

Types


   <input type="button" value="Press My Button"/>

There are many input types... enough for all circumstances... you would think. This is a list of the types with an example for each. The types will render differently in each browser. Some types are not supported by all browsers... like month and week

Type Example
Button
CheckBox
Color
Date 📅
DateTime-local
email 📬
File 📂
Image value=alt
Month
Number
Password
Radio Radio Button
Range 😀
Reset
Search
Submit
Tel 📞
Text
Time
URL
Week

The value in the Type column goes in the type="type" attribute in the <input> tag. Here is an example of a button input tag:

Although the favored way to create a button is with the new <button> tag.

CREATED 2020-09-12 10:45:19.0

010-00-02-CB

UPDATED 2020-11-21 10:44:39.0

Attributes


The input tag has a mirriad of other attributes besides type. A lot of them are specialized i.e. they belong to only one type... for example the image tag has attributes width and height ... that other elements do not.

Most attributes belong to a select set of input types... In fact... there are only four (4) attributes that apply to all of them! Those are marked in blue...

CREATED 2020-09-12 11:45:53.0

010-00-02-DA

UPDATED 2020-11-21 10:44:47.0

Input Attributes Part I...


Name Values Description Type
accept file_extension
audio/*
video/*
image/*
media_type
File type filter for file picker file
alt text Alternative text or image (same as value) image
autocomplete on
off
Let the browser enter data checkbox
color
date
emailfile
number
radio
range
search
tel
text
url
autofocus none Focus on page load all
checked none Item is selected on load checkboxradio
dirname inputname.dir Text direction is sent with form data Text Elements
disabled none Element is disabled on load all exept image
form id form the element belongs to all

CREATED 2020-09-12 11:51:26.0

010-00-02-DB

UPDATED 2020-11-21 10:44:59.0

Input Attributes Part II (form Attributes)...


These attributes are specifically for the submit and image types. They will override the attributes of the form itself. For example the formaction attribute will override the forms action attribute.

Name Values Description Type
formaction URL Action to take when element is submitted. Overrides form action image
submit
formenctype application/x-www-form-urlencoded
multipart/form-data
text-plain
Type of encoding to use for the input conrol submit
image
formMethod GET
POST
Method of submission for the form submit
image
formnovalidate none Do not validate form elements Submit
formtarget _blank
_self
_parent
_top
framename
Where to display the results submit
image

CREATED 2020-09-14 11:46:09.0

010-00-02-EB

UPDATED 2020-11-21 10:50:42.0

Input Attributes Part III...


Name Values Description Type
height # Height of an image image
list name The id attribute of a datalist to link to. email
number
search
tel
text
max #
date
max VALUE allowed date
number
range
maxlength # max length of an input email
password
search
tel
text
url
min # Minimum value of an edit date
number
range
minlength # Minimum # chars of input required email
password
search
tel
text
url
multiple none Edit can have multiple values file
password
search
tel
name text Name of the element all
pattern regexp Input value is checked against email
password
search
tel
text
url
placeholder text Background text. Disapears when deta is entered. email
number
password
search
tel
text
url
readonly none Renders the element read only date
email
number
password
radio
search
tel
text
time
url
required none Indicates the value is required checkbox
date
email
file
month
number
radio
search
tel
text
time
url
week
size # width of an input element (in characters) email
number
password
search
tel
text
time
url

CREATED 2020-09-15 08:34:35.0

010-00-02-EA

UPDATED 2020-11-21 10:52:20.0

Input Attributes Part IV...


Name Values Description Type
src URL Source of an image image
step # Value to increment by number
range
type type Element type (see formInputTypes) all
value text The innerHTML of an input element. button
color
date
email
file
month
number
password
range
reset
search
submit
tel
text
time
url
week
width # Width of an image image

CREATED 2020-09-15 08:36:49.0

010-00-02-E9

UPDATED 2020-11-21 10:57:47.0

Element Groups


Element Groups
Type Elements
Checkable checkbox & radio
Data Elements checkbox, color, date, datetime-local, email, file, month, number, password, radio, range, search, tel, text, time, url, week
Graphic Elements button, checkbox, color, image, radio, range, reset, submit
Text Elements date, datetime-local, email, file, month, number, password, search, tel, text, time, url, week

CREATED 2020-09-12 12:30:29.0

010-00-02-EC

UPDATED 2020-11-21 10:59:15.0

Input Types and Their Attributes...


This is a chart of all the input types and the attributes that they can employ...

Type Attributes
button autofocus
disabled
value
checkbox autocomplete
autofocus
checked
disabled
required
color autofocus
autocomplete
disabled
value
date autofocus
autocomplete
disabled
min
max
readonly
required
value
datetime-local minimal support - not tested
email autofocus
autocomplete
disabled
list
maxlength
minlength
pattern
placeholder
required
readonly
size
value
file autofocus
autocomplete
disabled
accept
multiple
required
value
image autofocus
alt
height
src
width
value
month disabled
required
number autofocus
autocomplete
disabled
list
min
max
placeholder
readonly
required
size
value
password autofocus
disabled
minlength
maxlength
multiple
pattern
placeholder
readonly
required
size
value
radio autofocus
autocomplete
disabled
checked
required
range autofocus
autocomplete
disabled
min
max
step
value
reset autofocus
disabled
value
search autofocus
autocomplete
disabled
list
minlength
maxlength
multiple
pattern
placeholder
readonly
required
size
value
submit autofocus
disabled
formaction
formenctype
formMethod
formnovalidate
formtarget
required
value
tel autofocus
autocomplete
disabled
list
minlength
maxlength
multiple
pattern
placeholder
readonly
required
size
value
text autofocus
autocomplete
disabled
list
minlength
maxlength
pattern
placeholder
readonly
required
value
time autofocus
disabled
readonly
required
value
url autofocus
autocomplete
disabled
list
minlength
maxlength
pattern
placeholder
readonly
required
size
value
week autofocus
disabled
readonly
required

CREATED 2020-09-15 09:56:59.0

010-00-02-E8

UPDATED 2020-11-21 10:59:27.0

Knowledge

L
I
N
K
S

DBID: db.wam

Page Server: Ruger

©2012 Leistware Data Systems

      Hello anonymous