HTML scheme Attribute

Posted in HTML Tutorial

Updated on Oct 29, 2024

By Mari Selvan

👁️ 40 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scheme attribute in HTML is used to specify the Internet scheme (protocol) that an input field's value should adhere to. This attribute was more commonly used in earlier versions of HTML but has since been deprecated in HTML5.

However, understanding its usage can be beneficial for maintaining and understanding legacy HTML documents.

🎯 Purpose of scheme

The primary purpose of the scheme attribute was to provide hints about the protocol for the data being entered into the input field. It helped to inform the user agent (browser) about the expected format of the data, such as "http", "https", "ftp", etc.

💎 Values

The scheme attribute could accept various protocol values depending on the expected data format. Some common values included:

http: Indicates that the input should follow the HTTP protocol.
https: Indicates that the input should follow the HTTPS protocol.
ftp: Indicates that the input should follow the FTP protocol.
mailto: Indicates that the input should follow the mailto scheme for email addresses.
tel: Indicates that the input should follow the telephone scheme for phone numbers.

Although the scheme attribute is deprecated, understanding its historical usage can still be valuable when working with older HTML documents.

📄 Implementation Example:

Here’s an example of how the scheme attribute might have been used in an HTML form:

index.html

Copied

<form>
  <label for="url">Website URL:</label>
  <input type="text" id="url" name="url" scheme="https">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" scheme="mailto">

  <input type="submit" value="Submit">
</form>

🧠 How it Works

In this example, the scheme attribute specifies that the URL should follow the HTTPS protocol and the email should follow the mailto scheme.

🔄 Dynamic Values with JavaScript

Even though the scheme attribute is deprecated, understanding how to manipulate attributes dynamically with JavaScript remains a useful skill. Here’s how you could dynamically set an attribute using JavaScript:

index.html

Copied

<script>
  // Dynamically set the scheme attribute for an input field
  document.getElementById("dynamicField").setAttribute("scheme", "ftp");
</script>

🧠 How it Works

In this script, the scheme attribute is dynamically set to "ftp" for an input field with the id "dynamicField". This demonstrates how attributes can be managed using JavaScript.

🏆 Best Practices

Since the scheme attribute is deprecated in HTML5, it’s recommended to use other methods to achieve similar functionality, such as pattern attributes and client-side validation scripts.
When dealing with legacy code, understanding the scheme attribute can help in maintaining and upgrading older HTML documents.
Always ensure that your forms and input fields are secure, especially when dealing with protocols and sensitive data.