HTML5 Example by www.techonthenet.com

Html script type required

Last updated: Jan 11, 2023
Reading time · 4 min

# Table of Contents

# Set the «required» Attribute using JavaScript

To set the required attribute:

1. Select the element.
2. Use the setAttribute() method to set the required attribute.
3. The setAttribute method will add the required attribute to the element.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> input type="text" id="first_name" /> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const input = document.getElementById('first_name'); // ✅ Set required attribute input.setAttribute('required', ''); // ✅ Remove required attribute // input.removeAttribute('required'); 

We selected the input field using the document.getElementById method.

We then used the setAttribute method to add the required attribute to the input.

The method takes the following 2 parameters:

1. name — the name of the attribute to be set.
2. value — the value to assign to the attribute.

If the attribute already exists on the element, its value is updated, otherwise, a new attribute with the specified name and value is added to the element.

It’s a best practice to set boolean attributes, such as required , to an empty string.

If a boolean attribute is not present, the value of the attribute is considered to be false .

If you need to remove an attribute, use the removeAttribute method.

Copied! 
const input = document.getElementById('first_name'); // ✅ Set required attribute input.setAttribute('required', ''); // ✅ Remove required attribute input.removeAttribute('required'); 

The required attribute can be set to any value and as long as it is present on the element, it does the job.

# Setting the «required» attribute on multiple elements

Note that you can only call the setAttribute method on DOM elements. If you need to set the required attribute on a collection of elements, you have to iterate over the collection and call the method on each individual element.

Here is the HTML for the next example.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> input type="text" id="first_name" class="field" /> input type="text" id="last_name" class="field" /> input type="text" id="country" class="field" /> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const inputs = document.querySelectorAll('.field'); for (const input of inputs)  input.setAttribute('required', ''); > 

We used the document.querySelectorAll method to select all elements with a class of field .

We used the for. of loop to iterate over the collection and set the required attribute on each element.

# Remove the «required» Attribute using JavaScript

To remove the required attribute, select the element and call the removeAttribute() method on it, passing it required as a parameter.

The removeAttribute method will remove the required attribute from the element.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> input type="text" id="first_name" required /> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const input = document.getElementById('first_name'); // ✅ Remove the required attribute input.removeAttribute('required'); // ✅ Set the required attribute // input.setAttribute('required', ''); 

We selected the input element using the document.getElementById() method.

We then used the removeAttribute method to remove the required attribute from the element.

The method takes the attribute to remove as a parameter.

If the attribute does not exist on the element, the removeAttribute() method does not throw an error, it ignores the call.

When setting the value of a boolean attribute, such as required , we can specify any value for the attribute and it will work.

If the attribute is present at all, regardless of the value, its value is considered to be true .

If a boolean attribute, such as required , is not present, the value of the attribute is considered to be false .

If you need to add an attribute, you can use the setAttribute method.

Copied! 
const input = document.getElementById('first_name'); // ✅ Remove required attribute input.removeAttribute('required'); // ✅ Set required attribute input.setAttribute('required', ''); 

The method takes the attribute name as the first parameter and the value that should be assigned to the attribute as the second.

When setting boolean attributes, such as required , it’s a best practice to set them to an empty value. That’s why we passed an empty string as the value in the example.

The required attribute can be set to any value and as long as it is present on the element, it does the job.

# Removing the «required» attribute from multiple elements

Note that you should only call the removeAttribute() method on DOM elements.

If you need to remove the required attribute from a collection of elements, you have to iterate over the collection and call the method on each individual element.

Here is the HTML for the next example.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> input type="text" id="first_name" class="field" required /> input type="text" id="last_name" class="field" required /> input type="text" id="country" class="field" required /> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const inputs = document.querySelectorAll('.field'); for (const input of inputs)  // ✅ Remove required attribute input.removeAttribute('required'); > 

We used the document.querySelectorAll method to select all elements with a class of field .

We used the for. of loop to iterate over the collection and remove the required attribute from each element.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

: type attribute

The value of this attribute indicates the type of data represented by the script, and will be one of the following:

Attribute is not set (default), an empty string, or a JavaScript MIME type

Indicates that the script is a «classic script», containing JavaScript code. Authors are encouraged to omit the attribute if the script refers to JavaScript code rather than specify a MIME type. JavaScript MIME types are listed in the IANA media types specification.

This value causes the code to be treated as a JavaScript module. The processing of the script contents is deferred. The charset and defer attributes have no effect. For information on using module , see our JavaScript modules guide. Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching.

This value indicates that the body of the element contains an import map. The import map is a JSON object that developers can use to control how the browser resolves module specifiers when importing JavaScript modules

Any other value

The embedded content is treated as a data block, and won’t be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. All of the other attributes will be ignored, including the src attribute.

Note: In earlier browsers, the type identified the scripting language of the embedded or imported (via the src attribute) code.

Specifications

No specification found

No specification data found for html.elements.script.type .
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Feb 24, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

HTML: tag

This HTML tutorial explains how to use the HTML element called the tag with syntax and examples.

Description

The HTML tag is used to embed or reference a client-side script such as JavaScript. This tag is also commonly referred to as the element.

Syntax

There are two ways that you can use the tag. You can either embed the code within the tags or you can reference a file that includes the code.

Embedded Code

In HTML, the syntax for the tag that has embedded code within the tag is:

Reference a File

In HTML, the syntax for the tag that references a javascript file is:

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the tag:

• text/javascript
• text/ecmascript
• application/javascript
• application/ecmascript

Note

Browser Compatibility

The tag has basic support with the following browsers:

• Chrome
• Android
• Firefox (Gecko)
• Firefox Mobile (Gecko)
• Internet Explorer (IE)
• Edge Mobile
• Opera
• Opera Mobile
• Safari (WebKit)
• Safari Mobile

Example

We will discuss the tag below, exploring examples of how to use the tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

HTML5 Document

If you created a new web page in HTML5, your tag might look like this:

In this HTML5 Document example, we have used the tag within the tag to reference a javascript file called functions.js. We have also used the tag within the tag to print the text «HTML5 Script Tag Example».

Notice that in the HTML5 Document example that type=»text/javascript» is not required in the tag.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your tag might look like this:

In this HTML 4.01 Transitional Document example, we have used the tag within the tag to reference a javascript file called functions.js. We have also used the tag within the tag to print the text «HTML 4.01 Transitional Script Tag Example».

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your tag might look like this:

In this XHTML 1.0 Transitional Document example, we have used the tag within the tag to reference a javascript file called functions.js. We have also used the tag within the tag to print the text «XHTML 1.0 Transitional Script Tag Example».

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your tag might look like this:

In this XHTML 1.0 Strict Document example, we have used the tag within the tag to reference a javascript file called functions.js. We have also used the tag within the tag to print the text «XHTML 1.0 Strict Script Tag Example».

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your tag might look like this:

In this XHTML 1.1 Document example, we have used the tag within the tag to reference a javascript file called functions.js. We have also used the tag within the tag to print the text «XHTML 1.1 Script Tag Example».

Источник