Categories
HTML Web development

HTML draggable Attribute

HTML draggable Attribute

The HTML draggable attribute defines whether an element is draggable or not.

The HTML draggable attribute can be used on all HTML elements.

Example:

<!DOCTYPE HTML>
<html>
<head>
<style>
#dropzone {
  width: 300px;
  height: 100px;
  padding: 10px;
  border: 1px solid #333;
}
</style>
<script>
function allowDrop(event) {
  event.preventDefault();
}

function drag(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function drop(event) {
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  event.preventDefault();
}
</script>
</head>
<body>

<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="draggable-element" draggable="true" ondragstart="drag(event)">Drag this paragraph into the rectangle.</p>

</body>
</html>

Output:


Drag this paragraph into the rectangle.


Enjoy coding!

Read also:

HTML Attributes

HTML JavaScript

HTML tags

Categories
HTML Web development

HTML dir Attribute

HTML dir Attribute

The HTML dir attribute defines the text direction of the element’s content.

Syntax:

<element dir="ltr|rtl|auto"> 

ltr (default) – left-to-right text direction.

rtl – right-to-left text direction.

auto – the browser decides the text direction based on the content (only recommended if the text direction is unknown).

Example:

<!doctype html>
<html>
<body>
    <p dir="rtl">This is a paragraph.</p>
</body>
</html>

Output:

This is a paragraph.



Enjoy coding!

Read also:

HTML Attributes

HTML Basics

HTML Media

Categories
HTML Web development

HTML data-* Attribute

HTML data-* Attribute

The HTML data-* attribute allows embedding custom data attributes on all HTML elements.

The HTML data-* attribute contains two parts:

  • the attribute name (should not contain any uppercase letters, and must be at least one character long after the prefix “data-“).
  • the attribute value (can be any string).

Example:

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(food) {
  var foodType = food.getAttribute("data-food-type");
  alert("The " + food.innerHTML + " is a " + foodType + " food.");
}
</script>
</head>
<body>

<ul>
  <li onclick="showDetails(this)" id="thai" data-food-type="mexican">Taco</li>
  <li onclick="showDetails(this)" id="european" data-food-type="spanish">Paella</li>  
  <li onclick="showDetails(this)" id="middle-eastern" data-food-type="middle-eastern">Kibbeh</li>  
</ul>

</body>
</html>

Output:

Click on the name of the meal to see what kind of cuisine is from:

  • Taco
  • Paella
  • Kibbeh

Enjoy coding!

Read also:

HTML Attributes

HTML class Attribute

HTML contenteditable Attribute

Categories
HTML Web development

HTML contenteditable Attribute

HTML contenteditable Attribute

The HTML contenteditable attribute defines whether the content of an element is editable or not.

Syntax:

<element contenteditable="true|false"> 

true – defines that the element is editable.

false – defines that the element isn’t editable.

Example:

<!DOCTYPE html>
<html>
<body>

<h3 contenteditable="true">This is a heading. It is editable. You can change this text.</h3>

</body>
</html>

Output:

This is a heading. It is editable. You can change this text.


Enjoy coding!

Read also:

HTML Attributes

HTML Basics

Categories
HTML Web development

HTML class Attribute

HTML class Attribute

The HTML class attribute defines one or more class names for an element.

The HTML class attribute is mainly used to point to a class in a style sheet. However, the HTML class attribute can also be used by JavaScript (HTML DOM) to make changes to HTML elements with a defined class.

Syntax:

<element class="classname"> 

classname – defines one or more class names for an element.

Example1:

Add classes to one HTML element:

<!DOCTYPE html>
<html>
<head>
<style>
h3.first-class {
  color: #9b2226;
}

.second-class{
  background-color: #e9d8a6;
}
</style>
</head>
<body>

<h3 class="first-class second-class">This is a heading.</h3>
<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a heading.

This is a paragraph.


Example2:

Using JavaScript to add the “add-style” class to an element with id=”example”:

<!DOCTYPE html>
<html>
<head>
<style>
.add-style {
  width: 200px;
  height: 50px;
  background-color: #e9d8a6;
  color: #9b2226;
  font-size: 20px;
}
</style>
</head>
<body>

<button onclick="addstyleFunction()">Try it</button>

<div id="example">
This is a DIV element.
</div>
<br>

<script>
function addstyleFunction() {
  document.getElementById("example").classList.add("add-style");
}
</script>

</body>
</html>

Output:

Click the button to add the “add-style” class to DIV element:



This is a DIV element.


Enjoy coding!

Read also:

HTML Attributes

HTML Classes

HTML id

Categories
HTML Web development

HTML alt Attribute

HTML alt Attribute

The HTML alt attribute gives alternative information for an image.

You can use the alt attribute with the following elements:

<area>

<img>

<input> (only can be used with <input type=”image”>)

Area Example:

<!DOCTYPE html>
<html>
<body>

<p>Click on the laptop, or the cup of coffee:</p>

<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg">
  <area shape="circle" coords="337,300,44" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif">
</map>

</body>
</html>

Output:

Click on the laptop, or the cup of coffee:

homeOffice laptop coffee

Img Example:

<img src="https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg" alt="avatar" width="320" height="240">

Output:

avatar

Input Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname"><br>
  <input type="image" src="https://lenadesign.org/wp-content/uploads/2021/06/submit-button.png" alt="Submit" width="100" height="100">
</form>

</body>
</html>

Output:




Enjoy coding!

Categories
HTML Web development

HTML action Attribute

HTML action Attribute

The HTML action attribute defines where to send the form-data when a form is submitted.

The HTML action attribute can be used on the <form> element.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="first-name">First name:</label>
  <input type="text" id="first-name" name="first-name"><br><br>
  <label for="last-name">Last name:</label>
  <input type="text" id="last-name" name="last-name"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:






Enjoy coding!

Categories
HTML Web development

HTML accesskey Attribute

HTML accesskey Attribute

The HTML accesskey attribute defines a shortcut key to activate/focus an element.

Note: The way of using the shortcut key is varying in different browsers: 

Browser:WindowsMac
Firefox
[Alt] [Shift] + accesskey
[Control] [Alt] + accesskey
Chrome
[Alt] + accesskey

[Control] [Alt] + accesskey
Safari
[Alt] + accesskey

[Control] [Alt] + accesskey
OperaOpera 15 or newer: [Alt] + accesskey
Internet Explorer[Alt] + accesskey

Example:

<!DOCTYPE html>
<html>
<body>

<a href="https://lenadesign.org/svg-4/" accesskey="s">SVG tutorial</a><br>
<a href="https://lenadesign.org/javascript/" accesskey="j">JavaScript tutorial</a>

</body>
</html>

Output:


Enjoy coding!

Read also:

HTML Attributes

HTML tags

Categories
HTML Web development

HTML accept-charset Attribute

HTML accept-charset Attribute

The HTML accept-charset attribute defines the character encodings that are to be used for the form submission.

The HTML accept-charset attribute can be used on the <form>
element.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="" accept-charset="utf-8">
  <label for="first-name">First name:</label>
  <input type="text" id="first-name" name="first-name"><br><br>
  <input type="submit" value="Send">
</form>

</body>
</html>

Output:




Enjoy coding!

Read also:

HTML Form Elements

HTML action Attribute

HTML accesskey Attribute

Categories
HTML Web development

HTML input accept Attribute

HTML input accept Attribute

The HTML accept attribute defines a filter for what file types the user can pick from the file input dialog box.

Syntax:

<input accept="file_extension|audio/*|video/*|image/*|media_type"> 

file_extension – define the file extension (e.g: .jpg, .png, .doc, .gif) the user can pick from.

audio/* – the user can pick all sound files.

video/* – the user can pick all video files.

image/* – the user can pick all image files.

media_type – a valid media type, with no parameters.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="img">Select image:</label>
  <input type="file" id="img" name="img" accept="image/*">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:


Enjoy coding!

Read also:

HTML input tag

HTML Form Elements

HTML Checkbox