Your first form - Learn web development
we will use the following html elements: <form>, <label>, <input>, <textarea>, and <button>.
... the <label>, <input>, and <textarea> elements our contact form is not complex: the data entry portion contains three text fields, each with a corresponding <label>: the input field for the name is a single-line text field.
... the input field for the message is a <textarea>; a multiline text field.
...And 6 more matches

Capabilities, constraints, and settings - Web APIs
below all of that, you'll see the video itself.</p> <p>click the "start" button to begin.</p> <h3>constrainable properties available:</h3> <ul id="supportedconstraints"> </ul> <div id="startbutton" class="button"> start </div> <div class="wrapper"> <div class="trackrow"> <div class="leftside"> <h3>requested video constraints:</h3> <textarea id="videoconstrainteditor" cols=32 rows=8></textarea> </div> <div class="rightside"> <h3>actual video settings:</h3> <textarea id="videosettingstext" cols=32 rows=8 disabled></textarea> </div> </div> <div class="trackrow"> <div class="leftside"> <h3>requested audio constraints:</h3> <textarea id="audioconstrainteditor" cols=32 rows=8></textarea> </d...
...iv> <div class="rightside"> <h3>actual audio settings:</h3> <textarea id="audiosettingstext" cols=32 rows=8 disabled></textarea> </div> </div> <div class="button" id="applybutton"> apply constraints </div> </div> <video id="video" autoplay></video> <div class="button" id="stopbutton"> stop video </div> <div id="log"> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 150px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } .wrapper { margin-bottom: 10px; width: 600px; } .trackrow { height: 200px; } .leftside { float: left; ...
... width: calc(calc(100%/2) - 10px); } .rightside { float: right; width: calc(calc(100%/2) - 10px); } textarea { padding: 8px; } h3 { margin-bottom: 3px; } #supportedconstraints { column-count: 2; -moz-column-count: 2; } #log { padding-top: 10px; } javascript content now let's take a look at the javascript code that makes everything work.
...And 6 more matches

Images in HTML - Learn web development
if you get really stuck, press the show solution button to see an answer: playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> <img> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10...
...px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); ...
...var htmlsolution = '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.
...And 5 more matches

Content categories - Developer guides
<footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and text.
... elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
...elements that belong to this category include: <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>.
...And 5 more matches

panel - Archive of obsolete content
the panel just contains a <textarea> element: when the user presses the return key, the contents of the <textarea> is sent to the main add-on code.
...var textarea = document.getelementbyid("edit-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline.
... text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); self.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code.
...And 4 more matches

ARIA: textbox role - Accessibility
whenever possible, rather than using this role, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input.
...to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true".
... <label for="txtbox">enter your five-digit zipcode</label> <input type="text" placeholder="5-digit zipcode" id="txtbox"/> <!-- multi-line text area --> <label for="txtboxmultiline">enter the tags for the article</label> <textarea id="txtboxmultiline" required></textarea> where a text field is read-only, indicated this by setting aria-readonly="true" on the element.
...And 4 more matches

Constraint validation - Developer guides
ange, number a valid number the value must be less than or equal to the value rangeoverflow constraint violation date, month, week a valid date datetime, datetime-local, time a valid date and time required text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the <select> and <textarea> elements none as it is a boolean attribute: its presence means true, its absence means false there must be a value (if set).
... stepmismatch constraint violation month an integer number of months week an integer number of weeks datetime, datetime-local, time an integer number of seconds range, number an integer minlength text, search, url, tel, email, password; also on the <textarea> element an integer length the number of characters (code points) must not be less than the value of the attribute, if non-empty.
... all newlines are normalized to a single character (as opposed to crlf pairs) for <textarea>.
...And 3 more matches

Images, media, and form elements - Learn web development
there are some additional elements, such as <textarea> for multiline text input, and also elements used to contain and label parts of forms such as <fieldset> and <legend>.
... styling text input elements elements that allow for text input, such as <input type="text">, specific types such as <input type="email">, and the <textarea> element are quite easy to style and tend to behave just like other boxes on your page.
... button, input, select, textarea { font-family : inherit; font-size : 100%; } form elements and box-sizing across browsers form elements use different box sizing rules for different widgets.
...And 2 more matches

Adding vector graphics to the Web - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 200px;"> <svg width="100%" height="100%"> <rect width="100%" height="100%" fill="red" /> <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> <polygon points="120,0 240,225 0,225" fill="green"/> <text x="50" y="100" font-family="verdana" font-size="55" fill="white" stroke="black" stroke-width="2"> ...
... </text> </svg> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution" disabled> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; useren...
...try = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = ''; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; functi...
...And 2 more matches

DocumentOrShadowRoot.activeElement - Web APIs
often activeelement will return a htmlinputelement or htmltextareaelement object if it has the text selection at the time.
... example html <p>select some text from one of the text areas below:</p> <form> <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">this is text area one.
...donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea> <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">this is text area two.
...And 2 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
:placeholder-shown element that is currently displaying placeholder text, including <input> and <textarea> elements with the placeholder attribute present that has, as of yet, no value.
... :required <input>, <select>, or <textarea> element that has the required attribute set on it.
... :optional <input>, <select>, or <textarea> element that does not have the required attribute set on it.
...And 2 more matches

Display a Popup - Archive of obsolete content
the panel just contains a <textarea> element: when the user presses the return key, the contents of the <textarea> is sent to the main add-on code.
...var textarea = document.getelementbyid("edit-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline.
... text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); self.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code.
...self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png try it out: "index.js" is saved in the top level, and the other five files go in your add-on's data directory: my-addon/ da...

Client-side form validation - Learn web development
note: the <textarea> element doesn't support the pattern attribute.
... constraining the length of your entries you can constrain the character length of all text fields created by <input> or <textarea> by using the minlength and maxlength attributes.
...<datalist id="l1"> <option>banana</option> <option>cherry</option> <option>apple</option> <option>strawberry</option> <option>lemon</option> <option>orange</option> </datalist> </p> <p> <label for="t2">what's your e-mail address?</label> <input type="email" id="t2" name="email"> </p> <p> <label for="t3">leave a short message</label> <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> </p> <p> <button>submit</button> </p> </form> and now some css to style the html: form { font: 1em sans-serif; max-width: 320px; } p > label { display: block; } input[type="text"], input[type="email"], input[type="number"], textarea, fieldset { width : 100%; border: 1px solid #333; box-sizing: border-box; } input:i...
... constraint validation api, which consists of a set of methods and properties available on the following form element dom interfaces: htmlbuttonelement (represents a <button> element) htmlfieldsetelement (represents a <fieldset> element) htmlinputelement (represents an <input> element) htmloutputelement (represents an <output> element) htmlselectelement (represents a <select> element) htmltextareaelement (represents a <textarea> element) the constraint validation api makes the following properties available on the above elements.

From object to iframe — other embedding technologies - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 250px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 100px;"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; ...
...background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); });...
...</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos...
... = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } update...

KeyboardEvent.key - Web APIs
if the key produces a character key that would result in a character being inserted into possibly an <input>, <textarea> or an element with htmlelement.contenteditable set to true, the beforeinput and input event types are fired in that order.
... html <div class="fx"> <div> <textarea rows="5" name="test-target" id="test-target"></textarea> <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button> </div> <div class="flex"> <pre id="console-log"></pre> </div> </div> css .fx { -webkit-display: flex; display: flex; margin-left: -20px; margin-right: -20px; } .fx > div { padding-left: 20px; padding-right: 20px; } .fx...
... > div:first-child { width: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10px; } javascript let textarea = document.getelementbyid('test-target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(`key "${e.key}" pressed [event: keydown]`); else logmessage(`key "${e.key}" repeating [event: keydown]`); }); textarea.addeventlistener('beforeinput', (e) => { logmessage(`key "${e.data}" about to be input [event: beforeinput]`); }); textarea.addeventlistener('input', (e...
...) => { logmessage(`key "${e.data}" input [event: input]`); }); textarea.addeventlistener('keyup', (e) => { logmessage(`key "${e.key}" released [event: keyup]`); }); btnclearconsole.addeventlistener('click', (e) => { let child = consolelog.firstchild; while (child) { consolelog.removechild(child); child = consolelog.firstchild; } }); result note: on browsers that don't fully implement the inputevent interface which is used for the beforeinput and input events, you may get incorrect output on those lines of the log output.

:read-only - CSS: Cascading Style Sheets
the :read-only css pseudo-class represents an element (such as input or textarea) that is not editable by the user.
... input:read-only, textarea:read-only { background-color: #ccc; } p:read-only { background-color: #ccc; } syntax :read-only examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user.

:read-write - CSS: Cascading Style Sheets
the :read-write css pseudo-class represents an element (such as input or textarea) that is editable by the user.
... input:read-write, textarea:read-write { background-color: #bbf; } p:read-write { background-color: #bbf; } syntax :read-write examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it.

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
syntax /* css basic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as geck...
...v> firefox chrome safari edge slider-horizontal div{ color: black; -webkit-appearance: slider-horizontal; } <div>lorem</div> chrome safari edge square-button div{ color: black; -moz-appearance: square-button; -webkit-appearance: square-button; } <div>lorem</div> chrome safari edge textarea div{ color: black; -webkit-appearance: textarea; } <div>lorem</div> firefox chrome safari edge non-standard keywords the following values are implemented only for one or both of the prefixed properties, but not on the standard appearance property.
...> chrome safari edge sliderthumb-vertical div{ color: black; -webkit-appearance: slider-thumb-vertical; } <div>lorem</div> chrome safari edge textfield-multiline div { color: black; -moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; } <div>lorem</div> firefox use textarea instead.
... formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | auto | button | textfield | menulist-button | <compat-auto>where <compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar examples the following would make an element look like a menulist button: .exampleone { appearance: menulist-button; } see also this jsfiddle for an example showing how you might use appearance: none to apply custom styling to radio buttons and checkboxes.

Audio and video manipulation - Developer guides
code <video id="my-video" controls="true" width="480" height="270"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2;</textarea> var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setplaybackrate() { eval(textarea.value); } reset.addeventlistener('click', function() { textare...
...a.value = code; setplaybackrate(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setplaybackrate); window.addeventlistener('load', setplaybackrate); note: try the playbackrate example live.
...eo" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</textarea> var context = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); var textarea = document.getelem...
...entbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setfilter() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setfilter(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setfilter); window.addeventlistener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code.

The HTML autocomplete attribute - HTML: Hypertext Markup Language
the html autocomplete attribute is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements.
... if an <input>, <select> or <textarea> element has no autocomplete attribute, then browsers use the autocomplete attribute of the element's form owner, which is either the <form> element that the element is a descendant of, or the <form> whose id is specified by the form attribute of the element.
... in order to provide autocompletion, user-agents might require <input>/<select>/<textarea> elements to: have a name and/or id attribute be descendants of a <form> element the form to have a submit button values "off" the browser is not permitted to automatically enter or select a value for this field.
... note: the autocomplete attribute also controls whether firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> element, <textarea> element, or entire <form> across page loads.

HTML documentation index - HTML: Hypertext Markup Language
41 html attribute: maxlength attribute, attributes, constraint validation the maxlength attribute defines the maximum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>.
... 43 html attribute: minlength attribute, input, reference, minlength, textarea the minlength attribute defines the minimum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>.
... 51 the html autocomplete attribute addresses, attribute, email addresses, forms, html, input, phone numbers, reference, select, text, usernames, autocomplete, form, passwords, textarea autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.
... 206 <textarea> element, forms, html, html forms, reference, web, textarea the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

UI pseudo-classes - Learn web development
<input>, <select>, and <textarea> elements have a required attribute available which, when set, means that you have to fill in that control before the form will successfully submit.
...we've styled the form controls using the :read-only and :read-write pseudo-classes, like so: input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } firefox only supported these pseudo-classes with a prefix up to version 78; at which point it started to support the unprefixed version.
... the :placeholder-shown pseudo-class matches <input> and <textarea> elements that have their placeholder showing (i.e.

Example - Learn web development
a simple form html content <form action="/my-handling-form-page" method="post"> <div> <label for="name">name:</label> <input type="text" id="name" name="user_name"> </div> <div> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </div> <div> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">send your message</button> </div> </form> css content form { /* just to center the form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div + div { margin-top: 1em; } label { /* to...
... make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height: 5em; /* to allow users t...
...o resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra magin represent the same space as the space between the labels and their text fields */ margin-left: .5em; } result ...

IME handling guide
e.g., when an editable element such as <input type="text">, <textarea> or <foo contentediable> has focus.
...this state is set only when <input type="password"> (ime-mode: auto;), <input type="text" style="ime-mode: disabled;"> or <textarea style="ime-mode: disabled;">.
... "textarea" when a <textarea> element gets focus, the value is "textarea".

GlobalEventHandlers.onselect - Web APIs
the select event only fires after text inside an <input type="text"> or <textarea> is selected.
... examples this example logs the text you select inside a <textarea> element.
... html <textarea>try selecting some text in this element.</textarea> <p id="log"></p> javascript function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const textarea = document.queryselector('textarea'); textarea.onselect = logselection; result specification specification status comment html living standardthe definition of 'onselect' in that specification.

HTMLElement - Web APIs
input events beforeinput fired when the value of an <input>, <select>, or <textarea> element is about to be modified.
... input fired when the value of an <input>, <select>, or <textarea> element has been changed.
... change fired when the value of an <input>, <select>, or <textarea> element has been changed and committed by the user.

HTMLFormElement - Web APIs
elements that are considered form controls the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
...method extract information from a <form> element and set some of its attributes: <form name="forma" action="/cgi-bin/test" method="post"> <p>press "info" for form details, or "set" to change those details.</p> <p> <button type="button" onclick="getforminfo();">info</button> <button type="button" onclick="setforminfo(this.form);">set</button> <button type="reset">reset</button> </p> <textarea id="form-info" rows="15" cols="20"></textarea> </form> <script> function getforminfo(){ // get a reference to the form via its name var f = document.forms["forma"]; // the form properties we're interested in var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptcharset', 'action', 'enctype', 'method', 'target' ]; // iterate over the properties, turnin...
...g them into a string that we can display to the user var info = properties.map(function(property) { return property + ": " + f[property] }).join("\n"); // set the form's <textarea> to display the form's properties document.forms["forma"].elements['form-info'].value = info; // document.forms["forma"]['form-info'].value would also work } function setforminfo(f){ // argument should be a form element reference.

Writing a WebSocket server in C# - Web APIs
++i) decoded[i] = (byte)(bytes[offset + i] ^ masks[i % 4]); string text = encoding.utf8.getstring(decoded); console.writeline("{0}", text); } else console.writeline("mask bit not set"); console.writeline(); } } } } client.html <!doctype html> <style> textarea { vertical-align: bottom; } #output { overflow: auto; } #output > p { overflow-wrap: break-word; } #output span { color: blue; } #output span.error { color: red; } </style> <h2>websocket test</h2> <textarea cols=60 rows=6></textarea> <button>send</button> <div id=output></div> <script> // http://www.websocket.org/echo.html var button = document.queryselector("button"), ...
... output = document.queryselector("#output"), textarea = document.queryselector("textarea"), // wsuri = "ws://echo.websocket.org/", wsuri = "ws://127.0.0.1/", websocket = new websocket(wsuri); button.addeventlistener("click", onclickbutton); websocket.onopen = function (e) { writetoscreen("connected"); dosend("websocket rocks"); }; websocket.onclose = function (e) { writetoscreen("disconnected"); }; websocket.onmessage = function (e) { writetoscreen("<span>response: " + e.data + "</span>"); }; websocket.onerror = function (e) { writetoscreen("<span class=error>error:</span> " + e.data); }; function dosend(message) { writetoscreen("sent: " + message); websocket.s...
...end(message); } function writetoscreen(message) { output.insertadjacenthtml("afterbegin", "<p>" + message + "</p>"); } function onclickbutton() { var text = textarea.value; text && dosend(text); textarea.value = ""; textarea.focus(); } </script> related writing websocket servers ...

Using XMLHttpRequest - Web APIs
</p> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> <h3>enctype: text/plain</h3> <form action="register.php" method="post" enctype="text/plain" onsubmit="ajaxsubmit(this); return false;"> <fieldset> <legend>registration example</legend> <p> your name: <input type="text" name="user" /> </p> <p> your message:<br /> <textarea name="message" cols="40" rows="8"></textarea> </p> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> <h3>enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="ajaxsubmit(this); return false;"> <fieldset> <legend>upload example</legend> <p> first name: <input type="text" name="...
...hotos: <input type="file" multiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="checkbox" name="vehicle[]" value="car" /> <label for="vehicle_car">i have a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="50" rows="8"></textarea> </p> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> </body> </html> to test this, create a page named register.php (which is the action attribute of these sample forms), and put the following minimalistic content: <?php /* register.php */ header("content-type: text/plain"); /* note: you should never u...
...hotos: <input type="file" multiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="checkbox" name="vehicle[]" value="car" /> <label for="vehicle_car">i have a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="50" rows="8"></textarea> </p> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> </body> </html> note: as we said, formdata objects are not stringifiable objects.

Creating and triggering events - Developer guides
elem.dispatchevent(event); event bubbling it is often desirable to trigger an event from a child element, and have an ancestor catch it; optionally, with data: <form> <textarea></textarea> </form> const form = document.queryselector('form'); const textarea = document.queryselector('textarea'); // create a new event, allow bubbling, and provide any data you want to pass to the "detail" property const eventawesome = new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } }); // the form element listens for the custom "awesome" event and ...
...then consoles the output of the passed text() method form.addeventlistener('awesome', e => console.log(e.detail.text())); // as the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point textarea.addeventlistener('input', e => e.target.dispatchevent(eventawesome)); creating and dispatching events dynamically elements can listen for events that haven't been created yet: <form> <textarea></textarea> </form> const form = document.queryselector('form'); const textarea = document.queryselector('textarea'); form.addeventlistener('awesome', e => console.log(e.detail.text())); textarea.addeventlistener('input', function() { // create and dispatch/trigger an event on the fly // note: optionally, we've also leveraged the "function...
... expression" (instead of the "arrow function expression") so "this" will represent the element this.dispatchevent(new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) }); triggering built-in events this example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using dom methods.

Creating annotations - Archive of obsolete content
annotation editor html the html is very simple: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style type="text/css" media="all"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } textarea { width: 180px; height: 180px; margin: 10px; padding: 0px; } </style> </head> <body> <textarea rows='10' cols='20' id='annotation-box'> </textarea> </body> </html> save this inside data/editor as annotation-editor.html.
... here's the code: var textarea = document.getelementbyid('annotation-box'); textarea.onkeyup = function(event) { if (event.keycode == 13) { self.postmessage(textarea.value); textarea.value = ''; } }; self.on('message', function() { var textarea = document.getelementbyid('annotation-box'); textarea.value = ''; textarea.focus(); }); save this inside data/editor as annotation-editor.js.

Forms related code snippets - Archive of obsolete content
autogrowing <textarea> this example shows how to make a textarea really autogrowing during a typing.
... insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea.

Examples and demos from articles - Archive of obsolete content
autogrowing <textarea> this example shows how to make a textarea really autogrowing during a typing.
... insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea.

jspage - Archive of obsolete content
this;}});native.implement([element,document],{getelement:function(a,b){return document.id(this.getelements(a,true)[0]||null,b); },getelements:function(a,d){a=a.split(",");var c=[];var b=(a.length>1);a.each(function(e){var f=this.getelementsbytagname(e.trim());(b)?c.extend(f):c=f; },this);return new elements(c,{ddup:b,cash:!d});}});(function(){var h={},f={};var i={input:"checked",option:"selected",textarea:(browser.engine.webkit&&browser.engine.version<420)?"innerhtml":"value"}; var c=function(l){return(f[l]||(f[l]={}));};var g=function(n,l){if(!n){return;}var m=n.uid;if(browser.engine.trident){if(n.clearattributes){var q=l&&n.clonenode(false); n.clearattributes();if(q){n.mergeattributes(q);}}else{if(n.removeevents){n.removeevents();}}if((/object/i).test(n.tagname)){for(var o in n){if(typeof n[o]==...
...ocument.id(m,n);},getselected:function(){return new elements($a(this.options).filter(function(l){return l.selected;}));},getcomputedstyle:function(m){if(this.currentstyle){return this.currentstyle[m.camelcase()]; }var l=this.getdocument().defaultview.getcomputedstyle(this,null);return(l)?l.getpropertyvalue([m.hyphenate()]):null;},toquerystring:function(){var l=[]; this.getelements("input, select, textarea",true).each(function(m){if(!m.name||m.disabled||m.type=="submit"||m.type=="reset"||m.type=="file"){return;}var n=(m.tagname.tolowercase()=="select")?element.getselected(m).map(function(o){return o.value; }):((m.type=="radio"||m.type=="checkbox")&&!m.checked)?null:m.value;$splat(n).each(function(o){if(typeof o!="undefined"){l.push(m.name+"="+encodeuricomponent(o)); }});});return l.join("&");},clon...

New Skin Notes - Archive of obsolete content
edit page textarea needs to 'scale' better with page width (so large whitespace area's are non-existant), suggest min-width:some-em-size; width: 88%; and max-width set to 95% or something like that.
...when the skin is updated on test/docs, editform textarea should be resizeable in all browsers.

spellcheck - Archive of obsolete content
--> <input type="text" spellcheck="true" /><br /> <textarea spellcheck="true"></textarea> <div contenteditable="true" spellcheck="true">i am some content</div> <!-- spellcheck nothing!
... --> <input type="text" spellcheck="false" /><br /> <textarea spellcheck="false"></textarea> <div contenteditable="true" spellcheck="false">i am some content</div> you can use spellcheck on input, textarea, and contenteditable elements.

Input Controls - Archive of obsolete content
html also has a textarea element for creating a larger text entry area.
... example 2 : source view <textbox multiline="true" value="this is some text that could wrap onto multiple lines."/> like the html textarea, you can use the rows and cols attributes to set the size.

textbox - Archive of obsolete content
--> <input type="text" spellcheck="true" /><br /> <textarea spellcheck="true"></textarea> <div contenteditable="true" spellcheck="true">i am some content</div> <!-- spellcheck nothing!
... --> <input type="text" spellcheck="false" /><br /> <textarea spellcheck="false"></textarea> <div contenteditable="true" spellcheck="false">i am some content</div> you can use spellcheck on input, textarea, and contenteditable elements.

-ms-scrollbar-3dlight-color - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to create a style rule that sets the -ms-scrollbar-3dlight-color property for a <textarea> element.
...*/ } </style> </head> <body> <textarea class="blue3dlight">the top and left edges of the thumb and button-face elements in the scroll bar for this element will be blue.</textarea> </body> </html> specifications not part of any specification.

-ms-scrollbar-darkshadow-color - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to create a style rule that sets the -ms-scrollbar-darkshadow-color property for a <textarea> element.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarcolor.htm <!doctype html> <html> <head> <title>scrollbar-darkshadow-color</title> <style> .blueshadow { scrollbar-darkshadow-color: blue; } </style> </head> <body> <textarea class="blueshadow">the gutter elements in the scroll bar for this element will be blue.</textarea> </body> </html> specifications not part of any specification.

-ms-scrollbar-shadow-color - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to create a style rule that sets the -ms-scrollbar-shadow-color property for a <textarea> element.
... <!doctype html> <html> <head> <title>scrollbar-shadow-color</title> <style> .blueshadow { scrollbar-shadow-color: blue; } </style> </head> <body> <textarea class="blueshadow">the gutter elements in the scroll bar for this element will be blue.</textarea> </body> </html> specifications not part of any specification.

Implementation Status - Archive of obsolete content
upported 4.5.5 xforms-output-exception unsupported 4.5.6 xforms-submit-error supported 4.5.7 xforms-version-exception unsupported 4.6 event sequencing supported 4.6.1 for input, secret, textarea, range, or upload controls supported 4.6.2 for output controls supported 4.6.3 for select or select1 controls partial 4.6.4 for trigger controls supported 4.6.5 for submit controls supported ...
... section title status notes bugs 8.1 the xforms core form controls module supported 8.1.1 common requirements n/a 8.1.2 input supported 8.1.3 secret supported 8.1.4 textarea supported 8.1.5 output supported 8.1.6 upload supported 8.1.7 range partial 316355; 343523; 8.1.8 trigger supported 8.1.9 submit supported 8.1.

caret - MDN Web Docs Glossary: Definitions of Web-related terms
on the web, a caret is used to represent the insertion point in <input> and <textarea> elements, as well as any elements whose contenteditable attribute is set, thereby allowing the contents of the element to be edited by the user.
... <input type="text"> <input type="password"> <input type="search"> <input type="date">, <input type="time">, <input type="datetime">, and <input type="datetime-local"> <input type="number">, <input type="range"> <input type="email">, <input type="tel">, and <input type="url"> <textarea> any element with its contenteditable attribute set ...

Styling links - Learn web development
playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p></textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd...
...;">a { } a:link { } a:visited { } a:focus { } a:hover { } a:active { }</textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headel...

Styling lists - Learn web development
playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> <li>first, light the candle.</li> <li>next, open the box.</li> <li>finally, place the three magic items in the box, in this exact order, to complete the spell: <ol> <li>the book of spells</li> <li>the shiny rod</li> <li>the goblin statue</li> </ol> </li> </u...
...l></textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getel...

CSS property compatibility table for form controls - Learn web development
text and font color[1] yes yes if the border-color property is not set, some webkit based browsers will apply the color property to the border as well as the font on <textarea>s.
... font yes yes see the note about line-height letter-spacing yes yes text-align yes yes text-decoration partial partial see the note about opera text-indent partial[1] partial[1] ie9 supports this property only on <textarea>s, whereas opera only supports it on single line text fields.

BroadcastChannel: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples live example in this example there's a "sender" <iframe> that broadcasts the contents of a <textarea> when the user clicks a button.
... sender <h1>sender</h1> <label for="message">type a message to broadcast:</label><br/> <textarea id="message" name="message" rows="1" cols="40">hello</textarea> <button id="broadcast-message" type="button">broadcast message</button> body { border: 1px solid black; padding: .5rem; height: 150px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastm...

CanvasPattern.setTransform() - Web APIs
const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('c...
...anvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas); window.addeventlistener('load', drawcanvas); specifications specification status comment html living standardthe definition of 'canvaspattern.settransform' in that specificatio...

CanvasRenderingContext2D.addHitRegion() - Web APIs
't see the full smiley, check the browser compatibility table to see if your current browser supports hit regions already; you might need to activate a preference.) playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:250px"> ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.arc(130, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi, false); ctx.stroke();</textar...
...ea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }); canvas.addeventlistener("mousemove", function(event){ if(event.region) { alert("ouch, my eye :("); } }); textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications canvas hit regions have been removed from the whatwg living st...

CanvasRenderingContext2D.miterLimit - Web APIs
playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.moveto(0,0); ctx.linewidth = 15; ctx.lineto(100, 100); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawc...
...anvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.miterlimit' in that specification.

CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
t(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clear...
...rect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintoview' in that specification.

Drawing text - Web APIs
edit the code below and see your changes update live in the canvas: ctx.font = '48px serif'; ctx.textbaseline = 'hanging'; ctx.stroketext('hello world', 0, 100); playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textbaseline = "hanging"; ctx.stroketext("hello world", 0, 100);</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function d...
...rawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas); window.addeventlistener('load', drawcanvas); advanced text measurements in the case you need to obtain more details about the text, the following method allows you to measure it.

Constraint validation API - Web APIs
concepts and usage certain html form controls, such as <input>, <select> and <textarea>, can restrict the format of allowable values, using attributes like required and pattern to set basic constraints.
... extensions to other interfaces the constraint validation api extends the interfaces for the form-associated elements listed below with a number of new properties and methods (elements that can have a form attribute that indicates their form owner): htmlbuttonelement htmlfieldsetelement htmlinputelement htmlobjectelement htmloutputelement htmlselectelement htmltextareaelement properties validity a read-only property that returns a validitystate object, whose properties represent validation errors for the value of that element.

Element.scrollHeight - Web APIs
for example: html <form name="registration"> <p> <textarea id="rules">lorem ipsum dolor sit amet, consectetur adipiscing elit.
... </textarea> </p> <p> <input type="checkbox" id="agree" name="accept" /> <label for="agree">i agree</label> <input type="submit" id="nextstep" value="next" /> </p> </form> css #notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; width: 600px; padding: 5px; border: 2px #7fdf55 solid; } #rules { width: 600px; height: 130px; padding: 5px; border: #2a...

GlobalEventHandlers.onscroll - Web APIs
example this example monitors scrolling on a <textarea>, and logs the element's vertical scroll position accordingly.
... html <textarea>1 2 3 4 5 6 7 8 9</textarea> <p id="log"></p> css textarea { width: 4rem; height: 8rem; font-size: 3rem; } javascript const textarea = document.queryselector('textarea'); const log = document.getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `scroll position: ${e.target.scrolltop}`; } result specifications specification status comment html living standardthe definition of 'onscroll' in that specification.

HTMLElement: change event - Web APIs
the change event is fired for <input>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user.
...io"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value of <textarea> or <input type="text">).

HTMLElement.oncopy - Web APIs
example this example blocks every copy and paste attempt from the <textarea>.
... html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript const log = document.getelementbyid('log'); function logcopy(event) { log.innertext = 'copy blocked!\n' + log.innertext; event.preventdefault(); } function logpaste(event) { log.innertext = 'paste blocked!\n' + log.innertext; event.preventdefault(); } const editor = document.getelementbyid('editor'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specification whatwg standard ...

HTMLElement.oncut - Web APIs
example this example allows text to be copied from the <textarea>, but doesn't allow text to be cut.
... html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and cutting the text in this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function preventcut(event) { event.preventdefault(); log.innertext = 'cut blocked!\n' + log.innertext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.oncut = preventcut; result specification whatwg standard ...

HTMLElement.onpaste - Web APIs
example this example logs every copy and paste attempt to the <textarea>.
... html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function logpaste(event) { log.innertext = 'pasted!\n' + log.innertext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specification whatwg standard ...

ValidityState - Web APIs
toolong read only a boolean that is true if the value exceeds the specified maxlength for htmlinputelement or htmltextareaelement objects, or false if its length is less than or equal to the maximum length.
... tooshort read only a boolean that is true if the value fails to meet the specified minlength for htmlinputelement or htmltextareaelement objects, or false if its length is greater than or equal to the minimum length.

WindowOrWorkerGlobalScope.setInterval() - Web APIs
nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> <form> <p>phasellus ac nisl lorem: <input type="text" /><br /> <textarea style="width: 400px; height: 200px;">nullam commodo suscipit lacus non aliquet.
...cras sodales eleifend interdum.</textarea></p> <input type="submit" value="send" /> </form> <p>duis lobortis sapien quis nisl luctus porttitor.

ARIA: form role - Accessibility
even if you are using the form landmark instead of <form>, you are encouraged to use native html form controls like button, input, select, and textarea associated wai-aria roles, states, and properties no role specific states or properties.
...iv role="form" id="send-comment" aria-label="add a comment"> <label for="username">username</label> <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text"> <label for="email">email</label> <input id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="text"> <label for="comment">comment</label> <textarea id="comment" name="comment"></textarea> <input value="comment" type="submit"> </div> it is recommended to use <form> instead.

:blank - CSS: Cascading Style Sheets
<input> or <textarea>).
... html <textarea></textarea> css textarea:blank { border: 3px solid red; } result specifications specification status comment selectors level 4the definition of ':blank' in that specification.

Using CSS custom properties (variables) - CSS: Cascading Style Sheets
display: inline-block; } .three { color: white; background-color: brown; margin: 10px; width: 75px; } .four { color: white; background-color: brown; margin: 10px; width: 100px; } .five { background-color: brown; } we'll apply it to this html: <div> <div class="one">1:</div> <div class="two">2: text <span class="five">5 - more text</span></div> <input class="three"> <textarea class="four">4: lorem ipsum</textarea> </div> ...
...block; } .three { color: white; background-color: var(--main-bg-color); margin: 10px; width: 75px; } .four { color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; } .five { background-color: var(--main-bg-color); } <div> <div class="one"></div> <div class="two">text <span class="five">- more text</span></div> <input class="three"> <textarea class="four">lorem ipsum</textarea> </div> this leads to the same result as the previous example, yet allows for one canonical declaration of the desired property value; very useful if you want to change the value across the entire page later.

font-kerning - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | normal | none examples enabling and disabling kerning html <div id="kern"></div> <div id="nokern"></div> <textarea id="input">av t.
... ij</textarea> css div { font-size: 2rem; font-family: serif; } #nokern { font-kerning: none; } #kern { font-kerning: normal; } javascript let input = document.getelementbyid('input'); let kern = document.getelementbyid('kern'); let nokern = document.getelementbyid('nokern'); input.addeventlistener('keyup', function() { kern.textcontent = input.value; /* update content */ nokern.textcontent = input.value; }); kern.textcontent = input.value; /* initialize content */ nokern.textcontent = input.value; specifications specification status comment css fonts module level 3the definition of 'font-kerning' in that specification.

resize - CSS: Cascading Style Sheets
s block elements for which the overflow property is set to visible formal definition initial valuenoneapplies toelements with overflow other than visible, and optionally replaced elements representing images or videos, and iframesinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | both | horizontal | vertical | block | inline examples disabling resizability of textareas in many browsers, <textarea> elements are resizable by default.
... html <textarea>type some text here.</textarea> css textarea { resize: none; /* disables resizability */ } result using resize with arbitrary elements you can use the resize property to make any element resizable.

HTML attribute: maxlength - HTML: Hypertext Markup Language
the maxlength attribute defines the maximum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>.
...if no maxlength is specified, or an invalid value is specified, the input or textarea has no maximum length.

HTML attribute: readonly - HTML: Hypertext Markup Language
the readonly attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number<input> types and the <textarea> form control elements.
...> <label>textbox</label> </div> <div class="group"> <input type="date" value="2020-01-01" readonly="readonly"/> <label>date</label> </div> <div class="group"> <input type="email" value="some value" readonly="readonly"/> <label>email</label> </div> <div class="group"> <input type="password" value="some value" readonly="readonly"/> <label>password</label> </div> <div class="group"> <textarea readonly="readonly">some value</textarea> <label>message</label> </div> result examples <fieldset> <legend>checkboxes buttons</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="readonly" readonly> readonly </label></p> <p><label> <input type="checkbox" name="chbox" va...

HTML attribute: required - HTML: Hypertext Markup Language
the required attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input> types along with the <select> and <textarea> form control elements.
... usability when including the required attribute, provide a visible indication near the control informing the user that the input, select or textarea is required.

<input type="hidden"> - HTML: Hypertext Markup Language
the edit form's html might look a little bit like this: <form> <div> <label for="title">post title:</label> <input type="text" id="title" name="title" value="my excellent blog post"> </div> <div> <label for="content">post content:</label> <textarea id="content" name="content" cols="60" rows="5"> this is the content of my excellent blog post.
... </textarea> </div> <div> <button type="submit">update post</button> </div> <input type="hidden" id="postid" name="postid" value="34657"> </form> let's also add some simple css: html { font-family: sans-serif; } form { width: 500px; } div { display: flex; margin-bottom: 10px; } label { flex: 2; line-height: 2; text-align: right; padding-right: 20px; } input, textarea { flex: 7; font-family: sans-serif; font-size: 1.1rem; padding: 5px; } textarea { height: 60px; } the server would set the value of the hidden input with the id "postid" to the id of the post in its database before sending the form to the user's browser and would use that information when the form is returned to know which database record to update with modified in...

spellcheck - HTML: Hypertext Markup Language
this means that the explicit usage of one of the values true or false is mandatory, and that a shorthand like <textarea spellcheck></textarea> is not allowed.
... the correct usage is <textarea spellcheck="true"></textarea>.

tabindex - HTML: Hypertext Markup Language
the content should be semantically described using interactive elements (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) instead.
... recommendation only supported on <a>, <area>, <button>, <input>, <object>, <select>, and <textarea>.

Global attributes - HTML: Hypertext Markup Language
tabindex is only supported on <a>, <area>, <button>, <object>, <select>, and <textarea>.
... accesskey is only supported on <a>, <area>, <button>, <input>, <label>, <legend> and <textarea>.

Miscellaneous - Archive of obsolete content
// this excludes textareas for simplicity, but onpageload() can easily be // modified to cycle through textareas as well.

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
in html, there are two separate elements—input for one line of text, and textarea for multiple lines.

Index - Archive of obsolete content
2233 xforms textarea element xforms no summary!

Index of archived content - Archive of obsolete content
forms input element xforms label element xforms message element xforms output element xforms range element xforms repeat element xforms secret element xforms select element xforms select1 element xforms submit element xforms switch module xforms textarea element xforms trigger element xforms upload element other resources requests for enhancement rfe to the custom controls rfe to the custom controls interfaces rfe to the xforms api troubleshooting xforms forms ...

Editor Embedding Guide - Archive of obsolete content
nscomptr<nsieditingsession> editingsession; nsiwebbrowser->do_getinterface(getter_addrefs(editingsession)); if (editingsession) editingsession->makewindoweditable(domwindow, "html", pr_true); the valid editor types are: "text" (similar to notepad or a textarea; does not allow for html) "textmail" (similar to "text" but html can be inserted; intended for plaintext mail usage and handling of citations) "html" (this is the default type if no type is specified; it allows for all html tags to be inserted) "htmlmail" (this is much like "html" except there are a few editing rules/behaviors that differ such as splitting of mail quotes) editor commands yo...

Extensions - Archive of obsolete content
ontextinput true if the target is a plain or password type input, a textarea, or an editable area.

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
var txt_message; var btn_comments; var form_comments; ext.onready( function() { // create the name text field txt_name = new ext.form.textfield({ name: "name", fieldlabel: "name", width: 200 }); // create the e-mail text field txt_email = new ext.form.textfield({ name: "email", fieldlabel: "e-mail", width: 200 }); // create the message text field txt_message = new ext.form.textarea({ name: "message", fieldlabel: "message", width: 200 }); // create a button used to send the form details.

XForms Custom Controls - Archive of obsolete content
input.xml - contains the base bindings for input, secret and textarea xforms controls.

Mozilla XForms User Interface - Archive of obsolete content
textarea serves to show/change multiline text (see the spec).

Fundamental text and font styling - Learn web development
playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>some sample text for your delight</p> </textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> p { } </textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;...

Basic native form controls - Learn web development
you've already met some form elements, including <form>, <fieldset>, <legend>, <textarea>, <label>, <button>, and <input>.

Example - Learn web development
alidate the payment</button> </p> </section> </form> css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { width: 250px; box-sizing: border-box; margin-left: 136px...

Web forms — Working with user data - Learn web development
other form controls next we take a look at all the non-<input> form controls and associated tools, such as <select>, <textarea>, <meter>, and <progress>.

Index - Learn web development
331 test your skills: other controls assessment, beginner, forms, learn, select, datalist, test your skills, textarea this aim of this skill test is to assess whether you've understood our other form controls article.

Beginning our React todo list - Learn web development
tom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: ...

Starting our Svelte Todo list app - Learn web development
tom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: ...

Styling Vue components with CSS - Learn web development
tom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-fon...

Gecko info for Windows accessibility vendors
xul: <textbox> html: <input type="text"> or <textarea> dhtml: role="wairole:textfield" or role="wairole:textarea" sets state_linked if within link.

Mozilla Quirks Mode Behavior
use box-sizing:border-box for most input types and textarea.

XForms Accessibility
textarea serves to show/change multiline text (see the spec, the docs).

nsIAccessibleProvider
xformsinput 0x00002004 used for input and textarea elements.

Document: DOMContentLoaded event - Web APIs
{ console.info('dom loaded'); } if (document.readystate === 'loading') { // loading hasn't finished yet document.addeventlistener('domcontentloaded', dosomething); } else { // `domcontentloaded` has already fired dosomething(); } live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js ...

Document.getElementsByClassName() - Web APIs
html <span class="orange fruit">orange fruit</span> <span class="orange juice">orange juice</span> <span class="apple juice">apple juice</span> <span class="foo bar">something random</span> <textarea id="resultarea" style="width:98%;height:7em"></textarea> javascript // getelementsbyclassname only selects elements that have both given classes var allorangejuicebyclass = document.getelementsbyclassname('orange juice'); var result = "document.getelementsbyclassname('orange juice')"; for (var i=0, len=allorangejuicebyclass.length|0; i<len; i=i+1|0) { result += "\n " + allorangejuicebyclas...

Document: readystatechange event - Web APIs
bubbles no cancelable no interface event event handler property onreadystatechange examples live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js ...

Element: click event - Web APIs
safari mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug): <a> (but it must have an href) <area> (but it must have an href) <button> <img> <input> <label> (but it must be associated with a form control) <textarea> this list is incomplete; you can help mdn by doing further testing/research and expanding it.

Element: compositionend event - Web APIs
addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } ...

Element: compositionstart event - Web APIs
deventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } ...

Element: compositionupdate event - Web APIs
eventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } ...

Element: error event - Web APIs
examples live example html <div class="controls"> <button id="img-error" type="button">generate image error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .

Element: keydown event - Web APIs
keyboard events are only generated by <inputs>, <textarea> and anything with the contenteditable attribute or with tabindex="-1".

Element.localName - Web APIs
ircle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceuri + "'"; } ]]></script> </head> <body onload="test()"> <svg:svg version="1.1" width="100px" height="100px" viewbox="0 0 100 100"> <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> </svg:svg> <textarea id="text" rows="4" cols="55"/> </body> </html> notes the local name of a node is that part of the node's qualified name that comes after the colon.

Element.name - Web APIs
it only applies to the following elements: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>.

Element: paste event - Web APIs
bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position.

Element: select event - Web APIs
for example, in html, select events can be dispatched only on form <input type="text"> and <textarea> elements.

FileReader: abort event - Web APIs
e example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-a...

FileReader: load event - Web APIs
e example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-a...

FileReader: loadend event - Web APIs
e example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-a...

FileReader: loadstart event - Web APIs
e example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-a...

FileReader: progress event - Web APIs
e example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-a...

GlobalEventHandlers.oninput - Web APIs
the oninput property of the globaleventhandlers mixin is an eventhandler that processes input events on the <input>, <select>, and <textarea> elements.

GlobalEventHandlers.onkeypress - Web APIs
*/ (function () { const ssecret = /* choose your hidden word...: */ "exit"; let noffset = 0; document.onkeypress = function(opevt) { let oevent = opevt || window.event, nchr = oevent.charcode, snodetype = oevent.target.nodename.touppercase(); if (nchr === 0 || oevent.target.contenteditable.touppercase() === "true" || snodetype === "textarea" || snodetype === "input" && oevent.target.type.touppercase() === "text") { return true; } if (nchr !== ssecret.charcodeat(noffset)) { noffset = nchr === ssecret.charcodeat(0) ?

HTMLElement: beforeinput event - Web APIs
the dom beforeinput event fires when the value of an <input>, <select>, or <textarea> element is about to be modified.

HTMLElement.dir - Web APIs
browsers might allow users to change the directionality of <input> and <textarea>s in order to assist with authoring content.

HTMLElement.innerText - Web APIs
html <h3>source element:</h3> <p id="source"> <style>#source { color: red; } #text { text-transform: uppercase; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h3>result of textcontent:</h3> <textarea id="textcontentoutput" rows="6" cols="30" readonly>...</textarea> <h3>result of innertext:</h3> <textarea id="innertextoutput" rows="6" cols="30" readonly>...</textarea> javascript const source = document.getelementbyid("source"); const textcontentoutput = document.getelementbyid("textcontentoutput"); const innertextoutput = document.getelementbyid("innertextoutput"); textcontentoutput.value =...

HTMLElement: input event - Web APIs
the input event fires when the value of an <input>, <select>, or <textarea> element has been changed.

HTMLFormControlsCollection.namedItem() - Web APIs
example html <form> <input id="my-form-control" type="textarea"> </form> javascript // returns the htmlinputelement representing #my-form-control elem1 = document.forms[0]['my-form-control']; specifications specification status comment html living standardthe definition of 'htmlformcontrolscollection.nameditem()' in that specification.

HTMLFormElement.elements - Web APIs
the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.

HTMLFormElement.length - Web APIs
the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.

HTMLInputElement.select() - Web APIs
the htmlinputelement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.

HTMLInputElement.setRangeText() - Web APIs
the htmlinputelement.setrangetext() method replaces a range of text in an <input> or <textarea> element with a new string.

HTMLInputElement.setSelectionRange() - Web APIs
the htmlinputelement.setselectionrange() method sets the start and end positions of the current text selection in an <input> or <textarea> element.

HTMLInputElement - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input fires when the value of an <input>, <select>, or <textarea> element has been changed.

HTMLMediaElement: loadstart event - Web APIs
bubbles no cancelable no interface event event handler property onloadstart examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; }...

HTMLMediaElement: progress event - Web APIs
bubbles no cancelable no interface event event handler property onprogress examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; }...

HTMLSelectElement.item() - Web APIs
examples html <form> <select id="myformcontrol" type="textarea"> <option id="o1">opt 1</option> <option id="o2">opt 2</option> </select> </form> javascript // returns the htmloptionelement representing #o2 elem1 = document.forms[0]['myformcontrol'][1]; specifications specification status comment html living standardthe definition of 'htmlselectelement.item()' in that specification.

HTMLSelectElement - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input event fires when the value of an <input>, <select>, or <textarea> element has been changed.

The HTML DOM API - Web APIs
htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element interfaces htmlbasefontelement htmlfontelement htmlframeelement htmlframesetelement htmlisindexelement htmlmenuitemelement web app and browser integration interfaces thes...

Web-based protocol handlers - Web APIs
the data sent:</p> <textarea> <?php echo(htmlspecialchars($value, ent_quotes, 'utf-8')); ?> </textarea> </body> </html> references http://www.w3.org/tr/2011/wd-html5-20110525/timers.html#custom-handlers see also window.navigator.registercontenthandler nsiprotocolhandler (xul only) registerprotocolhandler enhancing the federated web at mozilla webdev register a custom protocolhandler at google developers.

Node.localName - Web APIs
ircle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceuri + "'"; } ]]></script> </head> <body onload="test()"> <svg:svg version="1.1" width="100px" height="100px" viewbox="0 0 100 100"> <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> </svg:svg> <textarea id="text" rows="4" cols="55"/> </body> </html> notes the local name of a node is that part of the node's qualified name that comes after the colon.

PaintWorklet - Web APIs
<style> textarea { background-image: url(checkerboard); background-image: paint(checkerboard); } </style> <textarea></textarea> you can also use the @supports at-rule.

SVGGraphicsElement: paste event - Web APIs
bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position.

validityState.tooLong - Web APIs
the read-only toolong property of a validitystate object indicates if the value of an <input> or <textarea>, after having been edited by the user, exceeds the maximum code-unit length established by the element's maxlength attribute.

validityState.tooShort - Web APIs
the read-only tooshort property of a validitystate object indicates if the value of an <input>, <button>, <select>, <output>, <fieldset> or <textarea>, after having been edited by the user, is less than the minimum code-unit length established by the element's minlength attribute.

Window: error event - Web APIs
examples live example html <div class="controls"> <button id="script-error" type="button">generate script error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .

Window.getSelection() - Web APIs
it is worth noting that currently getselection() doesn't work on the content of <textarea> and <input> elements in firefox, edge (legacy) and internet explorer.

Window: load event - Web APIs
page is fully loaded: window.addeventlistener('load', (event) => { console.log('page is fully loaded'); }); the same, but using the onload event handler property: window.onload = (event) => { console.log('page is fully loaded'); }; live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js c...

XMLHttpRequest: abort event - Web APIs
ssevent event handler property onabort examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.a...

XMLHttpRequest: error event - Web APIs
ssevent event handler property onerror examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.a...

XMLHttpRequest: load event - Web APIs
essevent event handler property onload examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.a...

XMLHttpRequest: loadend event - Web APIs
event event handler property onloadend examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.a...

XMLHttpRequest: loadstart event - Web APIs
ent event handler property onloadstart examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.a...

XMLHttpRequest: progress event - Web APIs
vent event handler property onprogress examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.a...

Web APIs
mloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlshadowelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement hashchangeevent headers history hkdfparams hmacimportparams hmackeygenparams i idbcursor idbcursorsync idbcursorwithvalue idbdatabase idbdatabaseexception idbdatabasesync idbenvironment idbenvironmentsync idbfactory idbfactorysync idbindex idbindexsync idbkeyran...

ARIA: dialog role - Accessibility
subscription form</h2> <p id="dialog1desc">we will not share this information with third parties.</p> <form> <p> <label for="firstname">first name</label> <input id="firstname" type="text" /> </p> <p> <label for="lastname">last name</label> <input id="lastname" type="text"/> </p> <p> <label for="interests">interests</label> <textarea id="interests"></textarea> </p> <p> <input type="checkbox" id="autologin"/> <label for="autologin">auto-login?</label> </p> <p> <input type="submit" value="save information"/> </p> </form> </div> working examples: jquery-ui dialog notes note: while it is possible to prevent keyboard users from moving focus to elements outside of the dial...

Alerts - Accessibility
abel> <input name="name" id="name" aria-required="true"/> <br /> <label for="email">e-mail address (required):</label> <input name="email" id="email" aria-required="true"/> <br /> <label for="website">website (optional):</label> <input name="website" id="website"/> </fieldset> <label for="message">please enter your message (required):</label> <br /> <textarea name="message" id="message" rows="5" cols="80" aria-required="true"></textarea> <br /> <input type="submit" name="submit" value="send message"/> <input type="reset" name="reset" value="reset form"/> </form> checking for validity and notifying the user form validations consists of several steps: checking if the e-mail address or entered name are valid.

HTML To MSAA - Accessibility
one frame n/a "showlongdesc" if @longdesc attribute is presented n/a if @usemap attribute is used then image accessible has children for each map item input @type=button, submit, reset role_system_ pushbutton from @value attribute, @alt attribute, default label, @src attribute, @data attribute n/a state_system_ default if @type attribute has value "submit" n/a "press" n/a input @type=text, textarea role_system_ text n/a value property of input dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a input @type=password role_system_ text n/a n/a state_system_ readonly if @readonly attribute is used state_system_ protected n/a "activate" n/a input type="checkbox" role_system_ checkbutton n/a n/a state_system_ marqueed used as state checkable state_syst...

Text labels and names - Accessibility
this applies to all types of <input> items, as well as <button>, <output>, <select>, <textarea>, <progress> and <meter> elements, as well as any element with the switch aria role.

-moz-user-input - CSS: Cascading Style Sheets
/* keyword values */ -moz-user-input: none; -moz-user-input: enabled; -moz-user-input: disabled; /* global values */ -moz-user-input: inherit; -moz-user-input: initial; -moz-user-input: unset; for elements that normally take user input, such as a <textarea>, the initial value of -moz-user-input is enabled.

-webkit-text-security - CSS: Cascading Style Sheets
-webkit-text-security is a non-standard css property that obfuscates characters in a <form> field (such as <input> or <textarea>) by replacing them with a shape.

::placeholder - CSS: Cascading Style Sheets
the ::placeholder css pseudo-element represents the placeholder text in an <input> or <textarea> element.

:optional - CSS: Cascading Style Sheets
the :optional css pseudo-class represents any <input>, <select>, or <textarea> element that does not have the required attribute set on it.

:placeholder-shown - CSS: Cascading Style Sheets
the :placeholder-shown css pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.

:required - CSS: Cascading Style Sheets
the :required css pseudo-class represents any <input>, <select>, or <textarea> element that has the required attribute set on it.

font - CSS: Cascading Style Sheets
20px; } .propinputs, .setpropcont { margin-bottom: 1em; } .curcss { border: none; border-bottom: 1px solid black; text-align: center; width: 80px; } .mandatory { border-bottom-color: red; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .tar { width: 40px; text-align: right; } .fontfamily { display: inline-block; } javascript var textareas = document.getelementsbyclassname("curcss"), shorttext = "", getcheckedvalue, setcss, getproperties, injectcss; getproperties = function () { shorttext = getcheckedvalue("font_style") + " " + getcheckedvalue("font_variant") + " " + getcheckedvalue("font_weight") + " " + getcheckedvalue("font_size") + getcheckedvalue("line_height") + " " + ...

vertical-align - CSS: Cascading Style Sheets
the baseline of some replaced elements, like <textarea>, is not specified by the html specification, meaning that their behavior with this keyword may vary between browsers.

Event reference
change event dom l2, html5 the change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value is committed by the user.

Rich-Text Editing in Mozilla - Developer guides
once designmode has been set to "on", the document becomes a rich-text editing area and the user can type into it as if it were a textarea.

HTML5 Parser - Developer guides
this change has the following consequences for web developers: if you omit the closing tag for <title>, <style>, <textarea>, or <xmp>, the page will fail to be parsed.

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
this is only useful in elements that are editable, such as <input> and <textarea> or elements whose html contenteditable attribute is set.

disabled - HTML: Hypertext Markup Language
the disabled attribute is supported by <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <input>.

HTML attribute: minlength - HTML: Hypertext Markup Language
the minlength attribute defines the minimum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>.

<input type="email"> - HTML: Hypertext Markup Language
emailbox"> <label for="emailaddress">your e-mail address</label><br> <input id="emailaddress" type="email" size="64" maxlength="64" required placeholder="username@beststartupever.com" pattern=".+@beststartupever.com" title="please provide only a best startup ever corporate e-mail address"> </div> <div class="messagebox"> <label for="message">request</label><br> <textarea id="message" cols="80" rows="8" required placeholder="my shoes are too tight, and i have forgotten how to dance."></textarea> </div> <input type="submit" value="send request"> </form> our <form> contains one <input> of type email for the user's e-mail address, a <textarea> to enter their message for it into, and an <input> of type "submit", which creates a button to submit the...

<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
<form>, <input>, <textarea>, <select>, and <option> html version 2 strict level 1 this is like regular level 1 but it also excludes these depreciated elements, along with such constructs as nesting a header (<h*> element) within a link (<a> element) html version 2 level 2 this is the default and includes and permits all html level 2 functions and elements and attributes html version 2 strict level 2 this excludes the...

HTML elements reference - HTML: Hypertext Markup Language
<select> the html <select> element represents a control that provides a menu of options <textarea> the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

accesskey - HTML: Hypertext Markup Language
recommendation only supported on <a>, <area>, <button>, <input>, <label>, <legend> and <textarea> ...

dir - HTML: Hypertext Markup Language
browsers might allow users to change the directionality of <input> and <textarea>s in order to assist with authoring content.

Inline elements - HTML: Hypertext Markup Language
dio> (if it has visible controls) <b> <bdi> <bdo> <big> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <dfn> <em> <embed> <i> <iframe> <img> <input> <ins> <kbd> <label> <map> <mark> <meter> <noscript> <object> <output> <picture> <progress> <q> <ruby> <s> <samp> <script> <select> <slot> <small> <span> <strong> <sub> <sup> <svg> <template> <textarea> <time> <u> <tt> <var> <video> <wbr> see also block-level elements html element reference display content categories block and inline layout in normal flow ...

WebAssembly Concepts - WebAssembly
the generated html document loads the javascript glue file and writes stdout to a <textarea>.