Search completed in 1.91 seconds.
184 results for "placeholder":
Your results are loading. Please wait...
::placeholder - CSS: Cascading Style Sheets
the ::placeholder css pseudo-element represents the placeholder text in an <input> or <textarea> element.
... ::placeholder { color: blue; font-size: 1.5em; } only the subset of css properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.
... note: in most browsers, the appearance of placeholder text is a translucent or light gray color by default.
...And 10 more matches
:placeholder-shown - CSS: Cascading Style Sheets
the :placeholder-shown css pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.
... /* selects any element with an active placeholder */ :placeholder-shown { border: 2px solid silver; } syntax :placeholder-shown examples basic example this example applies special font and border styles when the placeholder is shown.
... html <input placeholder="type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way.
...And 2 more matches
placeholder - Archive of obsolete content
« xul reference home placeholder type: string a string that appears in the textbox when it has no value.
placeholder - Archive of obsolete content
« xul reference placeholder type: string gets and sets a string that appears in the textbox when it has no value.
Placeholder names - MDN Web Docs Glossary: Definitions of Web-related terms
placeholder names are commonly used in cryptography to indicate the participants in a conversation, without resorting to terminology such as "party a," "eavesdropper," and "malicious attacker." the most commonly used names are: alice and bob, two parties who want to send messages to each other, occasionally joined by carol, a third participant eve, a passive attacker who is eavesdropping on alice and bob's conversation mallory, an active attacker ("man-in-the-middle") who is able to modify their conversation and replay old messages ...
<input type="number"> - HTML: Hypertext Markup Language
WebHTMLElementinputnumber
events change and input supported common attributes autocomplete, list, placeholder, readonly idl attributes list, value, valueasnumber methods select(), stepup(), stepdown() value any floating-point number, or empty.
...tes in addition to the attributes commonly supported by all <input> types, inputs of type number support these attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max the maximum value to accept for this input min the minimum value to accept for this input placeholder an example value to display inside the field when it's empty readonly a boolean attribute indicating whether the value is read-only step a stepping interval to use when using up and down arrows to adjust the value, as well as for validation list the values of the list attribute is the id of a <datalist> element located in the same document.
... placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.
...And 16 more matches
<input type="tel"> - HTML: Hypertext Markup Language
WebHTMLElementinputtel
value a domstring representing a telephone number, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents a telephone number or is an empty string ("").
... list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum length, in utf-16 characters, to accept as a valid input minlength the minimum length that is considered valid for the field's contents pattern a regular expression the entered value must match to pass constraint validation placeholder an example value to display inside the field when it has no value readonly a boolean attribute which, if present, indicates that the field's contents should not be user-editable size the number of characters wide the input field should be onscreen list the values of the list attribute is the id of a <datalist> element located in the same document.
... placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.
...And 15 more matches
<input type="email"> - HTML: Hypertext Markup Language
WebHTMLElementinputemail
value a domstring representing an e-mail address, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, multiple, name,pattern, placeholder, readonly, required, size, and type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring which is automatically validated as conforming to e-mail syntax.
...options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid multiple whether or not to allow multiple, comma-separated, e-mail addresses to be entered pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be list the values of the list attribute is the id of a <datalist> element located in the same document.
... placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.
...And 14 more matches
<input type="search"> - HTML: Hypertext Markup Language
WebHTMLElementinputsearch
events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required, size.
... list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck controls whether or not to enable spell checking for the input field, or if the default spell checking ...
... placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.
...And 10 more matches
<input type="url"> - HTML: Hypertext Markup Language
WebHTMLElementinputurl
value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange().
... list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck controls whether or not to enable spell checking for the input field, or if the default spell checking ...
... placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.
...And 10 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
pattern password, text, tel pattern the value must match to be valid placeholder password, search, tel, text, url text that appears in the form control when it has no value set readonly almost all boolean.
... placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.
... note: the placeholder attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content.
...And 10 more matches
<input type="text"> - HTML: Hypertext Markup Language
WebHTMLElementinputtext
events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange().
... list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck controls whether or not to enable spell checking for the input field, or if the default spell checking ...
... placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.
...And 7 more matches
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
the <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required.
... placeholder a hint to the user of what can be entered in the control.
... carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.
...And 6 more matches
l10n - Archive of obsolete content
globals functions get(identifier, count, placeholder1...n) this function takes a string parameter which it uses as an identifier to look up and return a localized string in the locale currently set for firefox.
... you can supply one or more placeholders to get(), which are strings, such as proper names, that should not be translated themselves but instead should be inserted into the translated string.
... you can't use plurals and placeholders in the same expression: if you do, the placeholders will be ignored.
...And 5 more matches
Localization content best practices
word order if a string will contain a placeholder, always add the placeholder to the string to allow the localizer to change the word order if necessary.
...if a placeholder is present, this can be correctly localized as tá %s ag rádh: but not without.
...present the whole string or, if there is a significant need for a placeholder, use a placeholder.
...And 5 more matches
Localization - Archive of obsolete content
hello_id= <blink>hello!</blink> localizing element attributes this feature is new in firefox 39 you can localize certain attributes of elements with an l10n-id by setting its value with l10n-id.attributename in the properties file like: hello_id.accesskey= h the following attributes are supported: accesskey alt label title placeholder further the localization of the aria attributes aria-label, aria-valuetext and aria-moz-hint are supported with the same aliases as on firefox os: arialabel ariavaluetext ariamozhint using localized strings in javascript to reference localized strings from your main add-on code, you do this: var _ = require("sdk/l10n").get; console.log(_("hello_id")); assigning to "_" in particular is...
... placeholders the l10n module supports placeholders, allowing you to insert a string which should not be localized into one which is.
... the following "en-us" and "fr" ".properties" files include placeholders: # en-us translations hello_id= hello %s!
...And 3 more matches
textbox - Archive of obsolete content
attributes cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onblur, onchange, onfocus, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout,...
...this is superseded by the placeholder attribute in gecko 2.0.
... placeholder type: string a string that appears in the textbox when it has no value.
...And 3 more matches
ARIA: textbox role - Accessibility
<!-- simple text input field --> <div id="txtboxlabel">enter your five-digit zipcode</div> <div role="textbox" contenteditable="true" aria-placeholder="5-digit zipcode" aria-labelledby="txtboxlabel"></div> <!-- multi-line text area --> <div id="txtboxmultilinelabel">enter the tags for the article</div> <div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="txtboxmultilinelabel" aria-required="true"></div> semantic elements are more concise and require no javascript to support textbox features.
... <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.
... aria-placeholder attribute represents a hint (word or phrase) to the user about what to enter into the text field.
...And 3 more matches
<input type="password"> - HTML: Hypertext Markup Language
WebHTMLElementinputpassword
value a domstring representing a password, or empty events change and input supported common attributes autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text editing control being used to enter the password.
... all <input> elements regardless of their type, password field inputs support the following attributes: attribute description maxlength the maximum length the value may be, in utf-16 characters minlength the minimum length in characters that will be considered valid pattern a regular expression the value must match in order to be valid placeholder an example value to display in the field when the field is empty readonly a boolean attribute which, if present, indicates that the field's contents should not be editable size the number of characters wide the input field should be maxlength the maximum number of characters (as utf-16 code units) the user can enter into the password field.
... placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.
...And 3 more matches
Progressive loading - Progressive web apps (PWAs)
we should be able to show them at least the basic view of the page they want to see, with placeholders in the places more content will eventually be loaded.
... placeholder image instead of having all the screenshots of games referenced in <img> element src attributes, which will force the browser to download them automatically, we can do it selectively via javascript.
... the js13kpwa app uses a placeholder image instead, which is small and lightweight, while the final paths to target images are stored in data-src attributes: <img src='data/img/placeholder.png' data-src='data/img/slug.jpg' alt='name'> those images will be loaded via javascript after the site finishes building the html structure.
...And 3 more matches
Setting up your own test automation environment - Learn web development
replace the {username} and {accesskey} placeholders in the code with your actual user name and access key values (and make sure you keep them secure).
...replace the your-user-name and your-access-key placeholders in the code with your actual user name and access key values (and make sure you keep them secure).
...block near the bottom of the code to add rest api calls (again, replace the your-user-name and your-access-key placeholders in the code with your actual user name and access key values): driver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { console.log('test passed'); request({uri: "https://your-user-name:your-access-key@www.browserstack.com/automate/sessions/" + sessionid + ".json", method:"put", form:{"status":"passed","reason":...
...And 2 more matches
CustomElementRegistry.whenDefined() - Web APIs
the menu displays placeholder content until the actual menu content is ready to display.
... <nav id="menu-container"> <div class="menu-placeholder">loading...</div> <nav-menu> <menu-item>item 1</menu-item> <menu-item>item 2</menu-item> ...
... <menu-item>item n</menu-item> </nav-menu> </nav> const container = document.getelementbyid('menu-container'); const placeholder = container.queryselector('.menu-placeholder'); // fetch all the children of menu that are not yet defined.
...And 2 more matches
WAI-ARIA basics - Learn web development
<input type="search" name="q" placeholder="search query" aria-label="search through site content"> now if we use voiceover to look at this example, we get some improvements: the search form is called out as a separate item, both when browsing through the page, and in the landmarks menu.
...this is often presented as a tooltip, or placeholder inside the form field perhaps.
... wai-aria does include aria-valuemin and aria-valuemax properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the html5 placeholder attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders.
... update your number input like this: <input type="number" name="age" id="age" placeholder="enter 1 to 150" aria-required="true"> note: you can see the finished example live at form-validation-updated.html.
Storage
ral_cstring("create temp table table_name (column_name integer)")); ns_ensure_success(rv, rv); results to be returned however, if you need to get results back, you should create the statement with the mozistorageconnection.createstatement() api like this in javascript: var statement = dbconn.createstatement("select * from table_name where column_name = :parameter"); this example uses a named placeholder called "parameter" to be bound later (described in binding parameters).
... similarly, the c++ looks like this: nscomptr<mozistoragestatement> statement; rv = dbconn->createstatement(ns_literal_cstring("select * from table_name where column_name = ?1"), getter_addrefs(statement)); ns_ensure_success(rv, rv); this example uses the numbered placeholder indexed by zero for a parameter to be bound later (described in binding parameters).
...a given placeholder can appear multiple times in the same statement, and all instances of it will be replaced with the bound value.
... using named parameters in c++ is a lot more difficult, so it's generally accepted to use numerical placeholders instead.
Index - Archive of obsolete content
476 force rtl (this is a temporary placeholder/stub for the force rtl page) 477 frequently asked questions needsupdate, svg, svg faq we currently maintain two documents to help answer this question: a status page for svg in firefox 1.5+ and a status page for svg in the development trunk.
... 1012 placeholder xul attributes, xul reference no summary!
... 1520 placeholder xul properties, xul reference no summary!
Third-party APIs - Learn web development
in our example we've just provided a placeholder.
... note: when creating your own examples, you'll use your own api key in place of any placeholder.
...you don't need to fill in a url here: just leave it blank.) open up your starting file, and replace the api key placeholder with your key.
A first splash into JavaScript - Learn web development
functions next, add the following below your previous javascript: function checkguess() { alert('i am a placeholder'); } functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time.
...then go into the developer tools javascript console, and enter the following line: checkguess(); after pressing return/enter, you should see an alert come up that says "i am a placeholder"; we have defined a function in our code that creates an alert whenever we call it.
...he same?) 5 !== 2 + 4 // true 'chris' !== 'bob' // true 5 !== 2 + 3 // false 2 !== '2' // true; number versus string < less than 6 < 10 // true 20 < 10 // false > greater than 6 > 10 // false 20 > 10 // true conditionals returning to our checkguess() function, i think it's safe to say that we don't want it to just spit out a placeholder message.
Ember app structure and componentization - Learn web development
to start with, delete the contents of application.hbs and replace them with the following: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > </section> note: aria-label provides a label for assistive technology to make use of — for example, for a screenreader to read out.
...update the application.hbs file again so its content looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > <section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox...
... the header.hbs file should be updated to contain the following: <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > todo-list.hbs should be updated to contain this chunk of code: <section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <todo /> <todo /> </ul> </section> note: the only non-html in this new todo-list.hbs is the <...
IME handling guide
however, if the last composition string is only an ideographic space (fullwidth space), the composition string may be a placeholder of some old chinese ime on windows.
... in this case, although, we should not commit the placeholder character because it's not a character which the user wanted to input but we commit it as is.
...if the user uses such old chinese ime, "intl.ime.remove_placeholder_character_at_commit" pref may be useful but we don't support them anymore in default settings (except if somebody will find a good way to fix this issue).
HTMLInputElement - Web APIs
placeholder string: returns / sets the element's placeholder attribute, containing a hint to the user of what can be entered in the control.
... the placeholder text must not contain carriage returns or line-feeds.
... the following properties have been added: autocomplete, autofocus, dirname, files, formaction, formenctype, formmethod, formnovalidate, formtarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectiondirection, selectionend, selectionstart, step, validationmessage, validity, valueasdate, valueasnumber, width, and willvalidate.
Navigator.registerProtocolHandler() - Web APIs
this url must include %s, as a placeholder that will be replaced with the escaped url to be handled.
... syntaxerror the %s placeholder is missing from the handler url.
....example.com, you can register a protocol handler for it to handle web+burger: links, like so: navigator.registerprotocolhandler("web+burger", "https://burgers.example.com/?burger=%s", "burger handler"); this creates a handler that lets web+burger: links send the user to your site, inserting the accessed burger url into the %s placeholder.
Template literals (Template strings) - JavaScript
template literals can contain placeholders.
...the expressions in the placeholders and the text between the backticks (` `) get passed to a function.
...within a backticked template, it is simple to allow inner backticks simply by using them inside a placeholder ${ } within the template.
Using templates and slots - Web Components
slots are identified by their name attribute, and allow you to define placeholders in your template that can be filled with any markup fragment you want when the element is used in the markup.
...lement-details-template') .content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); using the <element-details> custom element with named slots now let’s take that <element-details> element and actually use it in our document: <element-details> <span slot="element-name">slot</span> <span slot="description">a placeholder inside a web component that users can fill with their own markup, with the effect of composing different dom trees together.</span> <dl slot="attributes"> <dt>name</dt> <dd>the name of the slot.</dd> </dl> </element-details> <element-details> <span slot="element-name">template</span> <span slot="description">a mechanism for holding client- side content that is not...
... <i class="desc"><slot name="description">need description</slot></i> </span> </summary> <div class="attributes"> <h4><span>attributes</span></h4> <slot name="attributes"><p>none</p></slot> </div> </details> <hr> </template> <element-details> <span slot="element-name">slot</span> <span slot="description">a placeholder inside a web component that users can fill with their own markup, with the effect of composing different dom trees together.</span> <dl slot="attributes"> <dt>name</dt> <dd>the name of the slot.</dd> </dl> </element-details> <element-details> <span slot="element-name">template</span> <span slot="description">a mechanism for ...
JavaScript Object Management - Archive of obsolete content
we'll be using the placeholder 〈namespace〉 below.
... here again we're using a placeholder, 〈modulenamespace〉, for the identifier name that you'll need to choose.
Index - Archive of obsolete content
ArchiveMozillaXULIndex
281 placeholder xul attributes, xul reference no summary!
... 789 placeholder xul properties, xul reference no summary!
Using the Editor from XUL - Archive of obsolete content
nsautoplaceholderbatch is a utility class that wraps text insertion with calls to turn off selection and layout updating (to avoid flicker), and the maintenance of a placeholder transaction.
... this placeholder transaction enables us to batch typing events together, so that an undo undoes the whole series of keystrokes.
UI pseudo-classes - Learn web development
the :placeholder-shown pseudo-class matches <input> and <textarea> elements that have their placeholder showing (i.e.
... the contents of the placeholder attribute) because the value of the element is empty.
Image gallery - Learn web development
looping through the images we've already provided you with lines that store a reference to the thumb-bar <div> inside a constant called thumbbar, create a new <img> element, set its src attribute to a placeholder value xxx, and append this new <img> element inside thumbbar.
... in each loop iteration, replace the xxx placeholder value with a string that will equal the path to the image in each case.
Silly story generator - Learn web development
next we want to replace the three placeholders in the newstory string — :insertx:, :inserty:, and :insertz: — with the strings stored in xitem, yitem, and zitem.
...so each time the button is pressed, these placeholders are each replaced with a random silly string.
Handling text — strings in JavaScript - Learn web development
when you want to include a variable or expression inside the string, you include it inside a ${ } construct, which is called a placeholder.
...'well done, you passed!' : 'bad luck, you didn\'t pass this time.' }`; the first two placeholders here are pretty simple, only including a simple value in the string.
Test your skills: Strings - Learn web development
replace the four asterisks with four template literal placeholders.
...do the calculation inside the placeholder.
Ember interactivity: Events, classes and state - Learn web development
add the new line shown below to your header.hbs file: <input class='new-todo' aria-label='what needs to be done?' placeholder='what needs to be done?' autofocus {{on 'keydown' this.onkeydown}} > this new attribute is inside double curly braces, which tells you it is part of ember's dynamic templating syntax.
...line: @service('todo-data') todos; now the placeholder alert(text); line can be replaced with a call to our new add() function.
Localization and Plurals
the following would be better: components.utils.import("resource://gre/modules/pluralform.jsm"); let downloads = "you have one download.;you have #1 downloads."; let num = 10; // for english, this would display "you have 10 downloads." print(pluralform.get(num, downloads).replace("#1", num); notice in the above example that the code can be written to support placeholders or not use placeholders in some forms of the string.
... additionally, the localizer has control over where the placeholder is, in relation to the rest of the text.
PRThreadPriority
syntax #include <prthread.h> typedef enum prthreadpriority { pr_priority_first = 0, pr_priority_low = 0, pr_priority_normal = 1, pr_priority_high = 2, pr_priority_urgent = 3, pr_priority_last = 3 } prthreadpriority; enumerators pr_priority_first placeholder.
... pr_priority_last placeholder description in general, an nspr thread of higher priority has a statistically better chance of running relative to threads of lower priority.
An overview of NSS Internals
this line is a placeholder for future sections that should explain how libpkix works and is designed.
... this line is a placeholder for how to prepare a database, how to dump a cert, and how to convert data.
Index
this line is a placeholder for future sections that should explain how libpkix works and is designed.
... this line is a placeholder for how to prepare a database, how to dump a cert, and how to convert data.
mozIRegistry
these are placeholders for the types of components you're designing and implementing.
... i18n xul/xptoolkit app shell clsid binding protocols this is a placeholder for potential encapsulations of particular idioms for storing clsid information in the registry and using that information, along with nsrepository, to implement some instance creation protocol on top of the core xpcom services.
nsIAppShell
void dispatchnativeevent( in prbool arealevent, in voidptr aevent ); parameters arealevent event is real or a null placeholder (macintosh).
...void getnativeevent( in prboolref arealevent, in voidptrref aevent ); parameters arealevent event is real or a null placeholder (macintosh).
nsIConsoleService
if no messages are logged, this function will return a count of 0, but allocating a placeholder word for messages, showing as a 0-length array when called from the script.
...if no messages are logged, this function will return a count of 0, but allocating a placeholder word for messages, showing as a 0-length array when called from the script.
nsISelectionPrivate
void startbatchchanges(); wstring tostringwithformat(in string formattype, in unsigned long flags, in print32 wrapcolumn); attributes attribute type description cancacheframeoffset boolean frame offset cache can be used just during calling nseditor::endplaceholdertransaction.
... endplaceholdertransaction will give rise to reflow/refreshing view/scroll, and call times of nstextframe::getpointfromoffset whose return value is to be cached.
nsIXULTemplateQueryProcessor
the reference is always a placeholder for the starting point and the member is always a placeholder for the end points (the results).
...the reference variable may be used by the query processor as a placeholder for the reference point, or starting point in the query.
Element: blur event - Web APIs
bubbles no cancelable no interface focusevent event handler property onblur sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing...
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element: focus event - Web APIs
bubbles no cancelable no interface focusevent event handler property onfocus sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing...
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
HTMLTextAreaElement - Web APIs
placeholder string: returns / sets the element's placeholder attribute, containing a hint to the user about what to enter in the control.
... the following attributes have been added: autofocus, placeholder, dirname, wrap, maxlength, required, textlength, labels, selectionstart, selectionend, selectiondirection, validity, validationmessage, and willvalidate.
Index - Web APIs
WebAPIIndex
1888 htmlselectelement.selectedindex placeholder 1889 htmlselectelement.selectedindex api, html dom, html forms, htmlselectelement, property, reference the htmlselectelement.selectedindex is a long that reflects the index of the first or last selected <option> element, depending on the value of multiple.
...a slot is a placeholder inside a web component that users can fill with their own markup.
:disabled - CSS: Cascading Style Sheets
WebCSS:disabled
html <form action="#"> <fieldset id="shipping"> <legend>shipping address</legend> <input type="text" placeholder="name"> <input type="text" placeholder="address"> <input type="text" placeholder="zip code"> </fieldset> <br> <fieldset id="billing"> <legend>billing address</legend> <label for="billing-checkbox">same as shipping address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" plac...
...eholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } } result specifications specification status comment html living standardthe...
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
id-auto-flow: dense; list-style: none; margin: 1em auto; padding: 0; max-width: 800px; } .wrapper li { border: 1px solid #ccc; } .wrapper li.landscape { grid-column-end: span 2; } .wrapper li img { display: block; object-fit: cover; width: 100%; height: 100%; } <ul class="wrapper"> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.c...
...om/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> </ul> auto-placement can also help you lay out interface items which do have logical order.
Pseudo-classes - CSS: Cascading Style Sheets
reen :future :focus :focus-visible :focus-within :has() :host :host() :host-context() :hover :indeterminate :in-range :invalid :is() :lang() :last-child :last-of-type :left :link :local-link :not() :nth-child() :nth-col() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past :placeholder-shown :read-only :read-write :required :right :root :scope :state() :target :target-within :user-invalid :valid :visited :where() specifications specification status comment fullscreen api living standard defined :fullscreen.
... selectors level 4 working draft defined :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where().
HTML attribute: rel - HTML: Hypertext Markup Language
WebHTMLAttributesrel
note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder.
... note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
84 <content>: the shadow dom content placeholder element (obsolete) content, dom, deprecated, element, html, html web components, placeholder, reference, web, web components, shadow dom the html <content> element—an obsolete part of the web components suite of technologies—was used inside of shadow dom as an insertion point, and wasn't meant to be used in ordinary html.
... 191 <slot> element, html, html web components, reference, web components, shadow dom, slot the html <slot> element—part of the web components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them together.
MIME types (IANA media types) - HTTP
example reserved for use as a placeholder in examples showing how to use mime types.
...example can also be used as a subtype; for instance, in an example related to working with audio on the web, the mime type audio/example can be used to indicate that the type is a placeholder and should be replaced with an appropriate one when using the code in the real world.
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
jank problems when loading images in the olden days of web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.
... without the width and height attributes, no placeholder space would be created, and when the image finally loaded you would get a noticeable jank in the page layout.
/loader - Archive of obsolete content
let module = module('foo/bar', 'resource:///modules/foo/bar.js'); note that this won't actually load any module code, it just creates a placeholder for it.
How to convert an overlay extension to restartless - Archive of obsolete content
lass': 'pixel-hbox'}, description({'value': this.stringbundle.getstringfromname('firexpixel.opacity')}), htmlinput({'id': 'opacity-range', 'type': 'range', 'min': '0', 'max': '10'}) ), hbox({'id': 'pixel-coords', 'class': 'pixel-hbox'}, label({'control': 'coord-x', 'value': 'x:'}), textbox({'id': 'coord-x', 'class': 'coord-box', 'placeholder' : '0'}), label({'control': 'coord-y', 'value': 'y:'}), textbox({'id': 'coord-y', 'class': 'coord-box', 'placeholder': '0'}) ...
Promises - Archive of obsolete content
yield db.executetransaction(function* () { for (let node of nodes) // insert the node's data, using an automatically-cached, // pre-compiled statement, and parameter placeholders.
Force RTL - Archive of obsolete content
(this is a temporary placeholder/stub for the force rtl page) download force rtl making sure your theme works with rtl locales ehsan's force rtl page ...
emptytext - Archive of obsolete content
this is superseded by the placeholder attribute in gecko 2.0.
Attribute (XUL) - Archive of obsolete content
onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sort...
emptyText - Archive of obsolete content
this is superseded by the placeholder property in gecko 2.0.
textbox.label - Archive of obsolete content
otherwise it returns the placeholder or emptytext property.
Property - Archive of obsolete content
maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen position predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected...
Textbox (XPFE autocomplete) - Archive of obsolete content
otherwise it returns the placeholder or emptytext property.
Advanced Rules - Archive of obsolete content
it serves as a placeholder as the template builder iterates through the resources.
Broadcasters and Observers - Archive of obsolete content
like other non-displayed elements, the broadcasterset element serves as a placeholder for broadcasters.
Grids - Archive of obsolete content
ArchiveMozillaXULTutorialGrids
the row elements are just placeholders to specify how many there are.
More Tree Features - Archive of obsolete content
notice how the guys row only needs one column as it is a placeholder item for its children.
Popup Menus - Archive of obsolete content
it does not draw on screen but instead is used as a placeholder where you would declare all of your popups.
Styling a Tree - Archive of obsolete content
the inner elements are just placeholders.
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
treecols this element is a placeholder for a set of treecol elements.
Archived Mozilla and build documentation - Archive of obsolete content
these components and services include: force rtl (this is a temporary placeholder/stub for the force rtl page) gecko coding help wanted take a look through lxr, and you'll realize that mozilla's source code is a big place.
Common Firefox theme issues and solutions - Archive of obsolete content
about:permissions domain names don't line up in about:permissions the domains on the domain list of about:permissions do not line up properly due to missing placeholder icons for domains without favicons.
Theme changes in Firefox 2 - Archive of obsolete content
ht tab[selected="true"] > .tab-image-left tab[selected="true"] > .tab-image-middle tab[selected="true"] > .tab-image-right the following styles are new in firefox 2: .alltabs-item > .menu-iconic-left > .menu-iconic-icon .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon .alltabs-item[selected="true"] .tab-close-button .tab-close-button > .toolbarbutton-icon .tab-close-button-placeholder .tab-close-button:hover .tab-close-button:hover:active .tabbrowser-arrowscrollbox > .scrollbutton-down .tabbrowser-arrowscrollbox > .scrollbutton-down:hover .tabbrowser-arrowscrollbox > .scrollbutton-up .tabbrowser-arrowscrollbox > .scrollbutton-up:hover .tabbrowser-tab > .tab-close-button .tabbrowser-tab:not([selected="true"]) > .tab-close-button .tabbrowser-tab:not([selected="true"]):h...
::-ms-clear - Archive of obsolete content
ont-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-clear example html <form> <label for="firstname">first name:</label> <input type="text" id="firstname" name="firstname" placeholder="first name"> <br> <label for="lastname">last name:</label> <input type="text" id="lastname" name="lastname" placeholder="second name"> </form> css input, label { display: block; } input[type=text]::-ms-clear { color: red; /* this sets the cross color as red.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
placeholders in the form of '?' are used to match up the argument values with their proper position in the insert statement.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
322 placeholder names cryptography, glossary, security placeholder names are commonly used in cryptography to indicate the participants in a conversation, without resorting to terminology such as "party a," "eavesdropper," and "malicious attacker." 323 plaintext cryptography, glossary, security plaintext refers to information that is being used as an input to an encryption algorith...
MDN Web Docs Glossary: Definitions of Web-related terms
openssl opera browser operand operator origin ota owasp p p2p pac packet page load time page prediction parameter parent object parse parser pdf perceived performance percent-encoding php pixel placeholder names plaintext png polyfill polymorphism pop3 port prefetch preflight request prerender presto primitive privileged privileged code progressive enhancement progressive web apps promise property property (css) property (javascri...
HTML: A good basis for accessibility - Learn web development
align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main cont...
HTML: A good basis for accessibility - Learn web development
align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main cont...
Pseudo-classes and pseudo-elements - Learn web development
:placeholder-shown matches an input element that is showing placeholder text.
Basic native form controls - Learn web development
they can have a placeholder; this is text that appears inside the text input box that should be used to briefly describe the purpose of the box.
How to build custom form controls - Learn web development
/ select : the dom node with the class `select` containing the value to update // index : the index of the value to be selected function updatevalue(select, index) { // we need to get the native control for the given custom control // in our example, that native control is a sibling of the custom control var nativewidget = select.previouselementsibling; // we also need to get the value placeholder of our custom control var value = select.queryselector('.value'); // and we need the whole list of options var optionlist = select.queryselectorall('.option'); // we set the selected index to the index of our choice nativewidget.selectedindex = index; // we update the value placeholder accordingly value.innerhtml = optionlist[index].innerhtml; // and we highlight the correspon...
Document and website structure - Learn web development
--> <form> <input type="search" name="q" placeholder="search query"> <input type="submit" value="go!"> </form> </nav> <!-- here is our page's main content --> <main> <!-- it contains an article --> <article> <h2>article heading</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.
Making decisions in your code — conditionals - Learn web development
in this case, it serves to empty the text out of the paragraph if nothing is selected, for example, if a user decides to re-select the "--make a choice--" placeholder option shown at the beginning.
Client-Server Overview - Learn web development
the web application dynamically creates an html page by putting the data (from the database) into placeholders inside an html template.
Introduction to the server side - Learn web development
on a dynamic website html pages are normally created by inserting data from a database into placeholders in html templates (this is a much more efficient way of storing large amounts of content than using static websites).
Server-side web frameworks - Learn web development
these allow you to specify the structure of an output document, using placeholders for data that will be added when a page is generated.
Implementing feature detection - Learn web development
next, fill in the your-api-key placeholder text in the second <script> element (as it is now) with a valid google maps api key.
Accessibility information for UI designers and developers
placeholders are best avoided for this, as they are often too low in contrast.
Mozilla’s UAAG evaluation report
2.10 toggle placeholders.
Debugging Frame Reflow
gfxbuttoncontrol hr hr framei htmlframeinner frameo htmlframeouter img image inline inline letter letter line line select select obj object page page place placeholder posinline positionedinline canvas canvas root root scroll scroll caption tablecaption cell tablecell bccell bctablecell col tablecol colg tablecolgroup tbl table t...
Introduction to Layout in Mozilla
reset style context object is a placeholder for partially computed stylistic data style data is computed lazily, as it is asked for reflow recursively compute geometry (x, y, w, h) for frames, views, and widgets given w & h constraints of “root frame” compute (x, y, w, h) for all children constraints propagated “down” via nshtmlreflowstate desired size returned “up” via nshtmlreflowmet...
AddonManager
callback, in string mimetype, in string hash, in string name, in string iconurl, in string version, in nsiloadgroup loadgroup ) parameters url the url the add-on is located at callback a callback to pass the addoninstall to mimetype the mimetype of the add-on hash an optional hash of the add-on name an optional placeholder name while the add-on is being downloaded iconurl an optional placeholder icon url while the add-on is being downloaded version an optional placeholder version while the add-on is being downloaded loadgroup an optional nsiloadgroup to associate any network requests with getinstallforfile() asynchronously gets an addoninstall for an nsifile.
source-editor.jsm
placeholdertext string the default initial text to be in the editor when it's created; by default, an empty string.
Mozilla Quirks Mode Behavior
images (img elements) without alt attributes sometimes display placeholder icons in quirks mode.
Mozilla Style System Documentation
(mozilla has a bunch of its pseudo-elements that are not in the css specification.) we also create style contexts for some things that are not css formatting objects: text nodes and placeholder frames.
NSPR Error Handling
pr_max_error placeholder for the end of the list.
Web Replay
failed operations currently just produce a placeholder "incomplete" result.
Index
MozillaTechXPCOMIndex
this implementation is a placeholder until the specification is complete, and is compatible with the webkit progressevent.
Components.utils.exportFunction
returns the placeholder function which has been created in the target context.
nsIDOMProgressEvent
this implementation is a placeholder until the specification is complete, and is compatible with the webkit progressevent.
nsIDOMSerializer
content/base/public/nsidomserializer.idlscriptable this interface is really a placeholder till the w3c dom working group defines a mechanism for serializing dom nodes.
nsIDocShell
constants constant value description internal_load_flags_none 0x0 used as a placeholder when you don't want to explicitly specify flags.
nsIEditor
void dotransaction(in nsitransaction txn); void enableundo(in boolean enable); void undo(in unsigned long count); void canundo(out boolean isenabled, out boolean canundo); void redo(in unsigned long count); void canredo(out boolean isenabled, out boolean canredo); void begintransaction(); void endtransaction(); void beginplaceholdertransaction(in nsiatom name); void endplaceholdertransaction(); boolean shouldtxnsetselection(); void setshouldtxnsetselection(in boolean should); inline spellchecking methods nsiinlinespellchecker getinlinespellchecker(in boolean autocreate); void syncrealtimespell(); void setspellcheckuseroverride(in boolean enable); clipboa...
nsIXPCException
the call signature of the constructor is: components.exception(message, result, stack, data, inner) all parameters are optional and the appropriate placeholder is 'unknown'.
Using the clipboard
please note: the sourcewindow variable is a placeholder for whatever window owns the data being copied -- from any dom element you can obtain it via element.ownerdocument.defaultview.
Standard OS Libraries
// placeholder - example soon to come x11 x11 runs primarily on unix® and unix-like operating systems like linux, all of the bsd variants, sun solaris both native 32 and 64 bit support, solaris x86, mac os x (via darwin) as well as other platforms like os/2 and cygwin.
Debugger.Source - Firefox Developer Tools
many properties below return placeholder values.
Network request list - Firefox Developer Tools
(click the icon again when you want to close the sidebar.) enter a string in the field with the placeholder text block resource when url contains.
Examine and edit CSS - Firefox Developer Tools
displaying pseudo-elements the rule view displays the following pseudo-elements, if they are applied to the selected element: ::after ::backdrop ::before ::first-letter ::first-line ::selection :-moz-color-swatch :-moz-number-spin-box :-moz-number-spin-down :-moz-number-spin-up :-moz-number-text :-moz-number-wrapper :-moz-placeholder :-moz-progress-bar :-moz-range-progress :-moz-range-thumb :-moz-range-track :-moz-selection if the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle: clicking the triangle displays them: viewing common pseudo-classes there's a button to the right of the filter box: click the button to see checkbox...
CacheStorage - Web APIs
async function getdata() { const cacheversion = 1; const cachename = `myapp-${ cacheversion }`; const url = 'https://jsonplaceholder.typicode.com/todos/1'; let cacheddata = await getcacheddata( cachename, url ); if ( cacheddata ) { console.log( 'retrieved cached data' ); return cacheddata; } console.log( 'fetching fresh data' ); const cachestorage = await caches.open( cachename ); await cachestorage.add( url ); cacheddata = await getcacheddata( cachename, url ); await deleteoldcaches(...
Binary strings - Web APIs
WebAPIDOMStringBinary
the reason that brought to use utf-16 code units as placeholders for uint8 numbers is that as web applications become more and more powerful (adding features such as audio and video manipulation, access to raw data using websockets, and so forth) it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data.
Document.forms - Web APIs
WebAPIDocumentforms
orms[index].elements[index]; named form access <!doctype html> <html lang="en"> <head> <title>document.forms example</title> </head> <body> <form name="login"> <input name="email" type="email"> <input name="password" type="password"> <button type="submit">log in</button> </form> <script> var loginform = document.forms.login; // or document.forms['login'] loginform.elements.email.placeholder = 'test@example.com'; loginform.elements.password.placeholder = 'password'; </script> </body> </html> specifications specification status comment html living standardthe definition of 'document.forms' in that specification.
Element: focusin event - Web APIs
bubbles yes cancelable no interface focusevent event handler property onfocusin sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui...
Element: focusout event - Web APIs
bubbles yes cancelable no interface focusevent event handler property onfocusout sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui...
Element: keydown event - Web APIs
<input placeholder="click here, then press down a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('keydown', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeydown equivalent input.onkeydown = logkey; specifications specification status ui events working draf...
Element: keyup event - Web APIs
<input placeholder="click here, then press and release a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent input.onkeyup = logkey; specifications specification status ui events working dra...
Element.slot - Web APIs
WebAPIElementslot
a slot is a placeholder inside a web component that users can fill with their own markup (see using templates and slots for more information).
Using FormData Objects - Web APIs
simply include an <input> element of type file in your <form>: <form enctype="multipart/form-data" method="post" name="fileinfo"> <label>your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("f...
GlobalEventHandlers.onchange - Web APIs
html <input type="text" placeholder="type something here, then click outside of the field." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.onchange = handlechange; function handlechange(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; } result specification specification status ...
GlobalEventHandlers.oninput - Web APIs
html <input type="text" placeholder="type something here to see its length." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.oninput = handleinput; function handleinput(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; } result specifications specification status comment ...
HTMLElement: beforeinput event - Web APIs
html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('beforeinput', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status ui eventsthe definition of 'beforeinput event' in tha...
HTMLElement: change event - Web APIs
html <input placeholder="enter some text" name="name"/> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('change', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'change' in that speci...
HTMLElement: input event - Web APIs
html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('input', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'input event' in ...
HTMLSelectElement.selectedIndex - Web APIs
placeholder ...
HTMLSlotElement.name - Web APIs
a slot is a placeholder inside a web component that users can fill with their own markup.
SVGGraphicsElement: copy event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 100 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <text x="5" y="10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); evt.preventdefault(); }); result specifications...
ValidityState.patternMismatch - Web APIs
examples given the following: <p> <label>enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north american phone number with an implicit label encompassing all three componen...
A simple RTCDataChannel sample - Web APIs
<div class="messagebox"> <label for="message">enter a message: <input type="text" name="message" id="message" placeholder="message text" inputmode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the little box into which we'll insert the messages.
Using ARIA: Roles, states, and properties - Accessibility
region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby...
Text labels and names - Accessibility
do not rely on placeholder text, because it disappears as soon as the user starts typing.
:any-link - CSS: Cascading Style Sheets
WebCSS:any-link
/* selects any element that would be matched by :link or :visited */ :any-link { color: green; } syntax :any-link examples html <a href="https://example.com">external link</a><br> <a href="#">internal target link</a><br> <a>placeholder link (won't get styled)</a> css a:any-link { border: 1px solid blue; color: orange; } /* webkit browsers */ a:-webkit-any-link { border: 1px solid blue; color: orange; } result specifications specification status comment selectors level 4the definition of ':any-link' in that specification.
:in-range - CSS: Cascading Style Sheets
WebCSS:in-range
<li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { co...
:link - CSS: Cascading Style Sheets
WebCSS:link
html <a href="#ordinary-target">this is an ordinary link.</a><br> <a href="">you've already visited this link.</a><br> <a>placeholder link (won't get styled)</a> css a:link { background-color: gold; color: green; } result specifications specification status comment html living standardthe definition of ':link' in that specification.
:out-of-range - CSS: Cascading Style Sheets
in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :out-of-range examples html <form action="" id="form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { co...
Border-image generator - CSS: Cascading Style Sheets
rder5"/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" ...
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media::after { content: ""; display: block; clear: both; } .media .image { float: left; width: 150px; margin-right: 20px; } .media .text { padding: 10px; align-self: end; } <div class="media"> <div class="image"><img src="https://udn.realityripple.com/samples/89/f993f273dd.png" alt="placeholder"></div> <div class="text">this is a media object example.
Mozilla CSS extensions - CSS: Cascading Style Sheets
d :-moz-handler-crashed :-moz-handler-disabled ::-moz-inline-table l :-moz-last-node :-moz-list-bullet :-moz-list-number :-moz-loading :-moz-locale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :-moz-lwtheme-darktext n – r :-moz-native-anonymous :-moz-only-whitespace ::-moz-page ::-moz-page-sequence ::-moz-pagebreak ::-moz-pagecontent :-moz-placeholderobsolete since gecko 51 ::-moz-placeholderdeprecated since gecko 51 ::-moz-progress-bar ::-moz-range-progress ::-moz-range-thumb ::-moz-range-track :-moz-read-only :-moz-read-write s ::-moz-scrolled-canvas ::-moz-scrolled-content ::-moz-scrolled-page-sequence ::-moz-selectiondeprecated since gecko 62 :-moz-submit-invalid :-moz-suppressed ::-moz-svg-foreign-content t ::-m...
Pseudo-elements - CSS: Cascading Style Sheets
index of standard pseudo-elements ::after (:after) ::backdrop ::before (:before) ::cue ::cue-region ::first-letter (:first-letter) ::first-line (:first-line) ::grammar-error ::marker ::part() ::placeholder ::selection ::slotted() ::spelling-error browser lowest version support of internet explorer 8.0 :pseudo-element 9.0 :pseudo-element ::pseudo-element firefox (gecko) 1.0 (1.0) :pseudo-element 1.0 (1.5) :pseudo-element ::pseudo-element opera 4.0 :pseudo-element 7.0 :pseudo-element ::pseudo-ele...
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
r-inlineoverscroll-behavior-xoverscroll-behavior-yppad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint()paint-orderpath()pc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()sc...
WebKit CSS extensions - CSS: Cascading Style Sheets
::-webkit-file-upload-button ::-webkit-inner-spin-button ::-webkit-input-placeholder ::-webkit-media-controls ::-webkit-media-controls-current-time-display ::-webkit-media-controls-enclosure ::-webkit-media-controls-fullscreen-button ::-webkit-media-controls-mute-button ::-webkit-media-controls-overlay-enclosure ::-webkit-media-controls-panel ::-webkit-media-controls-play-button ::-webkit-media-controls-timeline ::-webkit-media-controls-time-remaining-display ::-webkit...
DOM onevent handlers - Developer guides
an onevent event handler property serves as a placeholder of sorts, to which a single event handler can be assigned.
Constraint validation - Developer guides
:placeholder-shown css pseudo-class see :placeholder-shown :valid :invalid css pseudo-classes the :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting.
HTML attribute: pattern - HTML: Hypertext Markup Language
examples given the following: <p> <label>enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north american phone number with an implicit label encompassing all three componen...
HTML attribute reference - HTML: Hypertext Markup Language
placeholder <input>, <textarea> provides a hint to the user of what can be entered in the field.
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
because users can write colors in many different ways (such as rgb(255, 255, 0)), one way to work around this is to set a pattern attribute equal to either #[0-9a-f]{6} or #[0-9a-fa-f]{6} (preferably the latter because some users may not expect a different result with just a letter-case change) and set a placeholder attribute equal to a color representing the expected format of the user's input, such as #ff0000.
<input type="range"> - HTML: Hypertext Markup Language
WebHTMLElementinputrange
note: the following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, and width.
<slot> - HTML: Hypertext Markup Language
WebHTMLElementslot
the html <slot> element—part of the web components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them together.
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
element description <slot> the html <slot> element—part of the web components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them together.
Link types - HTML: Hypertext Markup Language
note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder.
Meta programming - JavaScript
handler placeholder object which contains traps.
The legacy Iterator protocol - JavaScript
difference between legacy and es2015 iterator protocols the value was returned directly as a return value of calls to next, instead of the value property of a placeholder object iteration termination was expressed by throwing a stopiteration object.
for await...of - JavaScript
responsesize += chunk.length; } console.log(`response size: ${responsesize} bytes`); // expected output: "response size: 1071472" return responsesize; } getresponsesize('https://jsonplaceholder.typicode.com/photos'); iterating over sync iterables and generators for await...of loop also consumes sync iterables and generators.
background_color - Web app manifests
type string mandatory no the background_color member defines a placeholder background color for the application page to display before its stylesheet is loaded.
<mmultiscripts> - MathML
in addition you are able to use <none/> as a placeholder for empty scripts (not for the base).
Populating the page: how browsers work - Web Performance
taking the size of the viewport as its base, layout generally starts with the body, laying out the dimensions of all the body’s descendants, with each element's box model properties, providing placeholder space for replaced elements it doesn’t know the dimensions of, such as our image.
<a> - SVG: Scalable Vector Graphics
WebSVGElementa
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshap...
<circle> - SVG: Scalable Vector Graphics
WebSVGElementcircle
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...
<ellipse> - SVG: Scalable Vector Graphics
WebSVGElementellipse
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...
<foreignObject> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment s...
<g> - SVG: Scalable Vector Graphics
WebSVGElementg
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdesc...
<line> - SVG: Scalable Vector Graphics
WebSVGElementline
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...
<marker> - SVG: Scalable Vector Graphics
WebSVGElementmarker
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshap...
<path> - SVG: Scalable Vector Graphics
WebSVGElementpath
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptiv...
<polygon> - SVG: Scalable Vector Graphics
WebSVGElementpolygon
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...
<polyline> - SVG: Scalable Vector Graphics
WebSVGElementpolyline
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...
<rect> - SVG: Scalable Vector Graphics
WebSVGElementrect
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...
<svg> - SVG: Scalable Vector Graphics
WebSVGElementsvg
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdesc...
<symbol> - SVG: Scalable Vector Graphics
WebSVGElementsymbol
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdesc...
<text> - SVG: Scalable Vector Graphics
WebSVGElementtext
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, text content elementpermitted contentcharacter data and any number of the following elements, in any order:an...
<textPath> - SVG: Scalable Vector Graphics
WebSVGElementtextPath
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number o...
<tspan> - SVG: Scalable Vector Graphics
WebSVGElementtspan
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in an...
<use> - SVG: Scalable Vector Graphics
WebSVGElementuse
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:href, xlink:title usage notes categoriesgraphics element, graphics referencing element, structural elementpermitted content...
Web Components
<slot> a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them together.