The sandbox attribute enables an extra set of restrictions for the content in an iframe. The sandbox attribute can be used on the following element:<iframe>.
When the sandbox attribute is present, it will treat the content as being from a unique origin, block form submission, block script execution, disable APIs, prevent links from targeting other browsing contexts, prevent content from using plugins (through <embed>, <object>, <applet>, or other), prevent the content to navigate its top-level browsing context, block automatically triggered features (such as automatically playing a video or automatically focusing a form control).
The value of the sandbox attribute can either be just "sandbox" (then all restrictions are applied), or a "space-separated list" of pre-defined values that will REMOVE the particular restrictions.
syntax
<iframe sandbox></iframe >
<iframe sandbox="value"></iframe >
Attribute values:
(no value): applies all restrictions; allow-forms: allows form submission; allow-modals: allows to open modal windows; allow-orientation-lock: allows to lock the screen orientation; allow-pointer-lock: allows to use the Pointer Lock API; allow-popups: allows popups; allow-popups-to-escape-sandbox: allows popups to open new windows without inheriting the sandboxing; allow-presentation: allows to start a presentation session; allow-same-origin: allows the iframe content to be treated as being from the same origin; allow-scripts: allows to run scripts; allow-top-navigation: allows the iframe content to navigate its top-level browsing context; allow-top-navigation-by-user-activation allows the iframe content to navigate its top-level browsing context, but only if initiated by user.
some examples
example
In thesource document, the video starts playback automatically. But in sandbox mode, the video does not autoplay.
codes:
<iframe style="margin-left:3vw;" width="500" height="300" src="../../pics/Wuzhen-20-10_02.mp4" sandbox></iframe>
<p class="spec">In the <a href="../pics/Wuzhen-20-10_02.mp4">
source document</a>, the video starts playback
automatically. But in sandbox mode, the video does not
autoplay.</p>
The scope attribute specifies whether a header cell is a header for a column, row, or group of columns or rows. The scope attribute has no visual effect in ordinary web browsers, but can be used by screen readers.
The scope attribute can be used on the following element: <th>
syntax
<th scope="value"></th >
Attribute values:
col specifies that the header cell is used for column; row specifies that the header cell is used for row; colgroup specifies that the header cell is used for group of column; rowgroup specifies that the header cell is used for group of row.
When present, it specifies that an option should be pre-selected when the page loads. The pre-selected option will be displayed first in the drop-down list. The selected attribute can also be set after the page loads, with a JavaScript. With multiple options selected, only the last option with this attribute will be selected. However, a multi-select dropdown control, with the "multiple" attribute, can have multiple options selected.
syntax
<option selected></option>
This attribute has no values. Specifying the "selected" attribute with an arbitrary value has the same effect as specifying it with no value. For example, all of the following declarations have the same effect: selected, selected="true", selected="false", selected="on", selected="selected".
The shape attribute specifies the shape of an area and is used together with the "coords attribute" to specify the size, shape, and placement of an area.
The shape attribute can be used on the following element: <area>.
syntax
<area shape="value"></area >
Attribute values:
default is used to specify the entire region; rect is used to specify the rectangular region; circle is used to specify a circular region; poly is used to specify the polygonal region.
some examples
example
codes:
<img src="../../pics/computer-map.png" alt="Computer" usemap="#computermap">
<map name="computermap">
<area shape="rect" coords="253,142,16,2" alt="screen"
href="javascript:alert('screen was clicked');">
<area shape="rect" coords="262,218,0,156" alt="keyboard"
href="javascript:alert('keyboard was clicked');">
<area shape="circle" coords="267,234,22" alt="mouse"
href="javascript:alert('mouse was clicked');">
</map>
"size" attribute : defines the width and/or height of an element
The size attribute defines the width of the <input> and the height of the <select> element. It specifies the visible width, in characters, of an <input> element and works with the following input types: "text", "search", "tel", "url", "email", and "password".
To specify the maximum number of characters allowed in the <input> element, use the "maxlength" attribute.
syntax
<input size="number">
number: specifies the width of an <input> element, in characters. Default value is 20.
<select size="number"></select>
number: the number as value indicates the number of rows visible.
The spellcheck attribute specifies whether the element is to have its spelling and grammar checked or not. The following can be spellchecked: text values in input elements (not password), text in <textarea> elements, text in editable elements
The spellcheck attribute is part of the global attributes and can be used on any HTML element.
syntax
<element spellcheck="true | false"></element>
true: the element is to have its spelling and grammar checked; false: the element is not to be checked.
some examples
example
This is a praggagraph. It is editable. Try to change the text.
First name:
codes:
<p class="spec" contenteditable="true" spellcheck="true"> This is a praggagraph. It is editable. Try to change the text.</p>
<p class="spec">First name: <input type="text" name="fname" spellcheck="true"></p>
example
Did you knoww you can click me to edit my contentz?
Did you knoww you can click me to edit my contentz
codes:
<p class="spec" contenteditable="true" spellcheck="true">Did you knoww you can click me to edit my contentz?</p>
<p class="spec" contenteditable="true" spellcheck="false">Did you knoww you can click me to edit my contentz</p>
The src attribute specifies the location (URL) of the external resource.
The src attribute can be used on the following elements: <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>
syntax
<element src="url"></element>
url indicating a file or resource. There are two types of URL links: absolute URL points to another webpage and relative URL points to other files of the same web page.
some examples
example
Click on the play button to play a sound:
codes:
<p class="spec">Click on the play button to play a sound:</p>
<audio style="margin-left:3vw;" src="../../pics/horse.wav" controls>
Your browser does not support the audio element.
</audio>
example
Click on the image, and the input will be sent to a page on the server called "/action_page.php".
codes:
<p class="spec">Click on the image, and the input will be sent to a page
on the server called "/action_page.php".</p>
<form style="margin-left:3vw;" action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="image" src=",,.../pics/submit.gif" alt="Submit" width="24" height="24">
</form>
"srcdoc" attribute : specifies content to be shwon in iframe
The srcdoc attribute specifies the HTML content of the page to show in the inline frame. This attribute is expected to be used together with the "sandbox" and "seamless" attributes. If a browser supports the "srcdoc" attribute, it will override the content specified in the src attribute (if present). If a browser does NOT support the "srcdoc" attribute, it will show the file specified in the src attribute instead (if present).
The srcdoc attribute can be used on the following element: <iframe>.
syntax
<iframe srcdoc="HTML_code"></iframe>
HTML_code: the HTML content to show in the iframe. Must be valid HTML syntax.
some examples
example
Your browser does not support iframes.
codes:
<iframe style="margin-left:3vw;" srcdoc="Hello from srcdoc!" src="https://www.lwitters.com/">
</iframe>
<p class="spec">Your browser does not support iframes.</p>
example
codes:
<iframe style="margin-left:3vw;" srcdoc = "<h3>Learning web development</h3>" src =
"lwitters.com/coding.php">
<p class=spec">Browser does not support iframes.</p>
</iframe>
"srclang" attribute: specifies the language of the track text
The start attribute specifies the start value of the first list item in an ordered list. The start attribute can be used on the following element: <ol>.
syntax
<ol start="value"></ol>
Attribute values: it contains a numeric value which defines the start value of the first list item in an ordered list.
The style attribute specifies an inline style for an element. The "style" attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet.
The style attribute is part of the global attributes, and can be used on any HTML element.
syntax
<element style="property:value "></element>
The property is a CSS property. The value is a CSS value.
In "inline styling", the CSS rules are directly written inside the starting tag using the style attribute. The style attribute includes a series of CSS property and value pairs. Each "property : value" pair is separated by a semicolon ( ; )
some examples
example
This is a header
This is a paragraph.
codes:
<h3 style="color:darkgreen;text-align:center;">This is a header</h3>
<p class="spec" style="margin-left:3vw; color:crimson;">This is a paragraph.</p>
