HTML guys make lonely friends!

This is a story about a series of HTML5 attributes that can help you get the job done simply and easily, but alone for a long time, rarely used.

Let’s find out the identities of these attributes! Let’s go !!!

contenteditable

This is a new attribute included in HTML5. The contenteditable property is used to specify whether or not the content of an element can be edited. Contenteditable was meant to be more user-friendly, as it made it possible for users to write directly in the browser. Its syntax is as simple as this:

In which, there are 2 values:

• true: allows editing
• false: editing is not allowed

For example:

This is text that can be edited. You try to put the mouse pointer on to edit it.

Note: When the contenteditable property is not assigned to the element, the element inherits the property from the parent.

draggable

In order to further improve the user experience and interaction with the website, drag-and-drop is popular nowadays. HTML5 also provides a draggable property to specify whether an element is draggable?

The draggable property is an enumeration and is used by the Drag and Drog API.

The syntax is as follows:

The values ​​in it will be:

• true: Specifies the element can be dragged and dropped
• false: Specifies the element that cannot be dragged and dropped
• auto: Uses the default browser behavior

Above is the text can drag and drop. And all major browsers support this feature.

hidden

The hidden property is a boolean property. When used, the tag containing the property will be marked as not visible or showing.

The hidden property can also be used to hide a tag from the user and only show up when certain conditions are met (like selecting a checkbox, etc.). JavaScript can then remove this property and the content in the tag will be displayed. The syntax for using unused is simple:

For example, you can use hidden elements of the website so that users cannot interact, until the login is complete, it will appear.

Note: This property does not hide the content of the element, but it does not hide the element.

spellcheck

The spellcheck attribute specifies whether the tag should be checked for spelling and grammar. You can set this property in:

• <input> elements (minus password)
• <textarea> elements
• contenteditable elements

In addition, this property is extremely useful because it can be inherited by child elements. For example, you add this property to the p tag and all child elements that add text input will inherit this property.

The syntax is as follows:

Inside:

• true: The card will be checked for spelling and grammar.
• false: The tag is not checked. For example:

pattern

The <input> element’s pattern attribute is used to construct the rule expression (template) that applies to the corresponding <input> element without having to use javascript code. The pattern attribute that applies to the <input> element has the following types: text, search, url, tel, email, and password.

It is recommended to add the attribute ‘title’ of the <input> element to describe the pattern to aid the user when entering data. If you supply a title attribute with a pattern, the title’s value will be included in any error messages if the pattern doesn’t match.

Note: The pattern attribute in the input tag is not supported in versions of Internet Explorer 9 and earlier and in Safari.

summary

Hope this inspires you to come up with new and creative ideas that you can apply in your daily work! Thank you for taking the time to read the article!

Refer:

• https://www.w3schools.com/html/html_form_attributes.asp
• https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
• https://html5-tutorial.net/html-basics/attributes/