Global Attributes Window Event Attributes Form Events Ujjwal matoliya.pptx
- 1. 1 Session 2020-21 Assignment :- HTML Programming Submitted By Ujjwal matoliya B.Sc 3rd sem Guidance By Pro. Umesh kashyap sir
- 2. 2 Window Event Attributes Form Events Global Attributes Content
- 3. Global Attributes HTML global attributes are those attributes which are common for all HTML elements. The global attributes are supported by both standard and non-standard element. The global attributes can be used with all elements, although it may not have any effect on some elements. 3
- 4. 4 Attribute Description accesskey Specifies a shortcut key to activate/focus an element class Specifies one or more classnames for an element (refers to a class in a style sheet) contenteditable Specifies whether the content of an element is editable or not data-* Used to store custom data private to the page or application dir Specifies the text direction for the content in an element draggable Specifies whether an element is draggable or not hidden Specifies that an element is not yet, or is no longer, relevant id Specifies a unique id for an element lang Specifies the language of the element's content spellcheck Specifies whether the element is to have its spelling and grammar checked or not style Specifies an inline CSS style for an element tabindex Specifies the tabbing order of an element title Specifies extra information about an element translate Specifies whether the content of an element should be translated or not
- 5. accesskey attribute The accesskey attribute specifies a shortcut key to activate/focus an element. The accesskey attribute value must be a single character (a letter or a digit). Syntax <element accesskey="character"> Attribute Values 5
- 6. 6
- 7. class attribute The class attribute specifies one or more class names for an element. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class. 7
- 8. 8 Value Description classname Specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.Naming rules: •Must begin with a letter A-Z or a-z •Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_") syntax <element class="classname"> Attribute Values
- 9. 9
- 10. contenteditable attribute The contenteditable attribute specifies whether the content of an element is editable or not. Syntax <element contenteditable="true|false"> 10
- 11. 11 Value Description true Specifies that the element is editable false Specifies that the element is not editable
- 12. data-* attributes The data-* attributes is used to store custom data private to the page or application. The data-* attributes gives us the ability to embed custom data attributes on all HTML elements. The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server- side database queries). The data-* attributes consist of two parts: 1.The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-" 2.The attribute value can be any string Syntax <element data-*="somevalue"> 12
- 13. 13
- 14. dir attribute The dir attribute specifies the text direction of the element's content. Syntax <element dir="ltr|rtl|auto"> Attribute Values 14
- 15. 15 Value Description ltr Default. Left-to-right text direction rtl Right-to-left text direction auto Let the browser figure out the text direction, based on the content (only recommended if the text direction is unknown)
- 16. draggable attribute The draggable attribute specifies whether an element is draggable or not. Value Description true Specifies that the element is draggable false Specifies that the element is not draggable auto Uses the default behavior of the browser Syntax <element draggable="true|false|auto"> Attribute Values 16
- 17. hidden attribute The hidden attribute is a boolean attribute, Browsers should not display elements that have the hidden attribute specified. Syntax <element hidden> 17
- 18. id attribute The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id. Value Description id •Specifies a unique id for the element. Naming rules:Must contain at least one character •Must not contain any space characters Syntax <element id="id"> Attribute Values 18
- 19. 19
- 20. lang attribute The lang attribute specifies the language of the element's content. Common examples are "en" for English, "es" for Spanish, "fr" for French, and so on. Value Description language_cod e Specifies the language code for the element's content. Language code reference Syntax <element lang="language_code"> Attribute Values 20
- 21. 21
- 22. spellcheck attribute 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 Syntax <element spellcheck="true|false"> Attribute Values 22 Value Description true The element is to have its spelling and grammar checked false The element is not to be checked
- 23. 23
- 24. 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 can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful). Syntax <element style="style_definitions"> 24 style attribute
- 25. 25 Value Description style_defini tions One or more CSS properties and values separated by semicolons (e.g. style="color:blue;text- align:center")
- 26. The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating). The tabindex attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful). Value Description number Specifies the tabbing order of the element (1 is first) Syntax <element tabindex="number"> 26 tabindex attribute
- 27. 27
- 28. The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. The title attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful). Value Description text A tooltip text for an element Syntax <element title="text"> 28 title attribute
- 29. 29
- 30. Value Description yes Specifies that the content of the element should be translated no Specifies that the content of the element must not be translated Syntax <element translate ="yes|no"> 30 The translate attribute specifies whether the content of an element should be translated or not. translate attribute
- 31. 31 Window Event Attributes Events triggered for the window object (applies to the <body> tag): Attribute Value Description onafterprint script Script to be run after the document is printed onbeforeprint script Script to be run before the document is printed onbeforeunload script Script to be run when the document is about to be unloaded onerror script Script to be run when an error occurs onhashchange script Script to be run when there has been changes to the anchor part of the a URL onload script Fires after the page is finished loading onmessage script Script to be run when the message is triggered onoffline script Script to be run when the browser starts to work offline ononline script Script to be run when the browser starts to work online onpagehide script Script to be run when a user navigates away from a page onpageshow script Script to be run when a user navigates to a page onpopstate script Script to be run when the window's history changes onresize script Fires when the browser window is resized onstorage script Script to be run when a Web Storage area is updated onunload script Fires once a page has unloaded (or the browser window has been closed)
- 32. 32 The onload attribute fires when an object has been loaded. onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see "Supported HTML tags" below). onload attribute Syntax <element onload="script"> Supported HTML tags: <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style> The onunload attribute fires once a page has unloaded (or the browser window has been closed). onunload occurs when the user navigates away from the page (by clicking on a link, submitting a form, closing the browser window, etc.) onunload attribute
- 33. 33
- 34. 34 he onpageshow event occurs when a user navigates to a webpage. The onpageshow event is similar to the onload event, except that it occurs after the onload event when the page first loads. Also, the onpageshow event occurs every time the page is loaded, whereas the onload event does not occur when the page is loaded from the cache. Syntax <element onpageshow="script"> Supported HTML tags: <body> onpageshow
- 35. 35
- 36. 36 The onresize attribute fires when the browser window is resized. Syntax <element onresize="script"> onresize attribute
- 37. 37
- 38. 38 The onafterprint attribute fires when a page has started printing, or if the print dialogue box has been closed. Syntax <element onafterprint="script"> Supported HTML tags: <body> The onbeforeprint attribute fires when a page is about to be printed (before the print dialogue box appears). onafterprint attribute onbeforeprint attribute
- 39. 39
- 40. 40 The ononline attribute fires when the browser starts to work online. Syntax <element ononline="script"> The onoffline attribute fires when the browser starts to work offline. Syntax <element onoffline="script"> ononline attribute onoffline attribute
- 41. 41
- 42. 42 The onerror attribute fires when an error occurs while loading an external file (e.g. a document or an image). onerror attribute Syntax <element onerror="script"> Supported HTML tags: <img>, <input type="image">, <object>, <link>, and <script>
- 43. 43
- 44. 44 The onbeforeunload event fires when the document is about to be unloaded. This event allows you to display a message in a confirmation dialog box to inform the user whether he/she wants to stay or leave the current page. The default message that appears in the confirmation box, is different in different browsers. However, the standard message is something like "Are you sure you want to leave this page?". You cannot remove this message. onbeforeunload event Syntax <element onbeforeunload="script">
- 45. 45
- 46. 46 The hash property sets or returns the anchor part of a URL, including the hash sign (#). The onhashchange attribute fires when there has been changes to the anchor part (begins with a '#' symbol) of the current URL. Syntax <element onhashchange="script"> onhashchange attribute
- 47. 47
- 48. 48 onstorage Script to be run when a Web Storage area is updated
- 49. 49 The onmessage event occurs when a message is received through an event source. onmessage event onpagehide Event The onpagehide event in HTML occurs when the user is getting off from a webpage. for example, close the browser window, click on the link, refresh the page, etc. onpopstate attribute This attribute supports all the event attributes and can be applied to <body> element.
- 50. 50 Form Events Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements):
- 51. 51 Attribute Value Description onblur script Fires the moment that the element loses focus onchange script Fires the moment when the value of the element is changed oncontextme nu script Script to be run when a context menu is triggered onfocus script Fires the moment when the element gets focus oninput script Script to be run when an element gets user input oninvalid script Script to be run when an element is invalid onreset script Fires when the Reset button in a form is clicked onsearch script Fires when the user writes something in a search field (for <input="search">) onselect script Fires after some text has been selected in an element onsubmit script Fires when a form is submitted
- 52. 52 The onblur attribute fires the moment that the element loses focus. Syntax <element onblur="script"> The onfocus attribute fires the moment that the element gets focus. Syntax <element onfocus="script"> onblur attribute onfocus attribute
- 53. 53
- 54. 54
- 55. 55 The onchange attribute fires the moment when the value of the element is changed. Syntax <element onchange="script"> The oninput attribute fires when an element gets user input. The oninput attribute fires when the value of an <input> or <textarea> element is changed. Syntax <element oninput="script"> oninput attribute onchange attribute
- 56. 56 This event is similar to the oninputevent. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on <select> elements. Supported HTML tags: <input type="checkbox">, <input type="file">, <input type="password">, <input type="radio">, <input type="range">, <input type="search">, <input type="text">, <select> and <textarea> Supported HTML tags: <input type="password">, <input type="search">, <input type="text"> and <textarea>
- 57. 57
- 58. 58
- 59. 59 The oncontextmenu attribute fires when the user right-clicks on an element to open the context menu. Note: Although the oncontextmenu event is supported in all browsers, the contextmenu attribute is currently only supported in Firefox. Syntax <element oncontextmenu="script"> oncontextmenu attribute
- 60. 60
- 61. 61 The oninvalid event occurs when a submittable <input> element is invalid. For example, the input field is invalid if the required attribute is set and the field is empty (the required attribute specifies that the input field must be filled out before submitting the form). Syntax <element oninvalid="script"> Supported HTML tags: <input> oninvalid
- 62. 62
- 63. 63 The onreset attribute fires when a form is reset. Syntax <element onreset="script"> onreset attribute The onsearch attribute fires when a user presses the "ENTER" key or clicks the "x" button in an <input> element with type="search". onsearch attribute Syntax <element onsearch ="script">
- 64. 64
- 65. 65
- 66. 66 The onselect attribute fires after some text has been selected in an element. onselect attribute Syntax <element onselect="script"> The onsubmit attribute fires when a form is submitted. Syntax <form onsubmit="script"> onsubmit attribute
- 67. 67
- 68. 68
- 69. 69