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