Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

input

The <input> element is a versatile form control that enables a wide array of user interactivity and data intake mechanisms. The input element does not have to be used within a <form> element, although that is the most common application of it. Developers can establish stand-alone inputs that are tied to Ajax data processing or normal client side processes that require no parent form element.

The type attribute of the input element determines the type of control interface that will render. If the "type" attribute is missing from the input element it defaults to rendering the "text" type of input.

hidden - hidden value stow <input type="hidden" value="arbitrary string"> text - intake a single line of text <input type="text" name="fn"> <input type="text" name="ln" disabled> search - intake search queries <input type="search" name="q" required> tel intake a telephone number <input type="tel" name="t"> url - intake a URL <input type="url" name="u"> email - intake an email address <input type="email" name="e"> password - intake a password securely <input type="password" name="p"> datetime - intake year/month/day/hour/minute/second/second fraction <input type="datetime" name="dt"> date - intake year/month/day <input type="date" name="d"> month - intake month/year <input type="month" name="m"> week - intake week/year <input type="week" name="w"> time - intake hour/minute/second/second fraction <input type="time" name="t"> number - intake a number <input type="number" name="num1" min="0" max="20" value="0"> open in code editor range - intake a value that is between two specified values <input type="range" min="0" max="100" value="50" name="range1"> color - intake color choices <input type="color" name="c"> checkbox - checkbox control <input type="checkbox" name="cb1"> <input type="checkbox" name="cb2" checked> radio - radio button control <input type="radio" name="r1"> <input type="radio" name="r2" checked> file - open computer browse dialog and intake a file <input type="file" name="file1" accept="image/jpeg, image/png, image/gif" required> submit - initiate form submission <input type="submit" value="Submit Information"> image - initiate form submission with an image also passing x, y coordinates <input type="image" src="images/submit_button.png"> reset - reset form control <input type="reset" value="reset the form"> button - render a generic multipurpose button <input type="button" value="Click Me" onclick="alert('Thanks')">

Attributes

globals - the global attributes common to all elements possible values: see global attribute list accept - comma separated list of acceptable MIME types ( accept="image/jpeg, image/png, image/gif" ) possible values: "mime type list" alt - fallback text for missing images possible values: "string" autocomplete - toggle the browser ability to store and pre-fill form fields possible values: "on", "off" autofocus - give focus to the element when the document loads possible values: value not required checked - make checkbox and radio buttons checked by default possible values: value not required dirname - specify directionality of the text in the input element possible values: "input_name.dir=ltr", "input_name.dir=rtl" disabled - disables the element possible values: value not required form - associate the element to a form possible values: "form id" formaction - specify the action attribute for the element possible values: "path/to/parser" formenctype - specify the data encoding for the element possible values: "text/plain", "multipart/form-data", "application/x-www-form-urlencoded" formmethod - specify the http method for the element possible values: "get", "post", "dialog" formnovalidate - specify that the element is not meant to be validated possible values: value not required formtarget - specify the browsing context for the element possible values: "_blank", "_self", "_parent", "_top" height - specify the height of the element(consider using CSS height settings instead) possible values: "integer" inputmode - specify the most helpful content input mechanism possible values: "verbatim", "latin", "latin-name", "latin-prose", "full-width-latin", "kana", "kana-name", "katakana", "numeric", " tel ", "email", "url" list - associate a <datalist> with the element possible values: "datalist id" max - specify the maximum value in an allowed range possible values: "integer" maxlength - specify the maximum allowed character length in values possible values: "integer" min - specify the minimum value in an allowed range possible values: "integer" minlength - specify the minimum allowed character length in values possible values: "integer" multiple - specify that multiple values(or files) can be selected in the control interface possible values: value not required pattern - specify regular expression pattern matching on the element value possible values: "Regex Pattern" placeholder - specify placeholder text in the element possible values: "string" readonly - specify that the element value cannot be changed, only read possible values: value not required required - specify that the element value cannot be empty when form is submit possible values: value not required size - specify that the element's width matches a character amount possible values: "integer" src - specify the path to a file possible values: "path/to/filename" step - specify an amount a value can by increased or decreased by possible values: "integer", "any" type - specify the type of control that the element is to render possible values: "hidden", "text", "search", "tel", "url", "email", "password", " datetime", "date", "month", "week", "time", "number", "range", "color", "checkbox", "radio", "file", "submit", "image", "reset", "button" value - specify a default value for the element possible values: "string", "integer" width - specify the width of the element(consider using CSS width settings instead) possible values: "integer"

Official Documentation

http://www.w3.org/TR/html/forms.html#the-input-element

HTML

Elements

aabbraddressareaasidearticleaudiobbasebdobdiblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1 h2 h3 h4 h5 h6headheaderhrhtmliiframeimginputinskbdkeygenlabellegendlilinkmainmapmarkmetameternavnoscriptobjectoloptgroupoptionoutputpparampreprogressqrb rp rt rtc rubyssampscriptsectionselectsmallsourcespanstrongstylesub supsummarytabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbr