JS HTM Input DOM Manipulations setAttribute() and Loops

1. HTML Input Element

1.1 Checkbox

The HTML

input

element can be used to create a Checkbox. To define a Checkbox, you need to specify the HTML

type

attribute with the value

checkbox

for an HTML

input

element.

1
<input type="checkbox" />

HTML

1.2 The HTML Label Element

The HTML

label

element defines a Label.

1
<label for="myCheckbox">Graduated</label>

HTML

1.2.1 The HTML
for
Attribute

The HTML

for

attribute associates the HTML

label

element with an HTML

input

element.

1
2
<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">Graduated</label>

HTML

2. DOM Manipulations

2.1 The htmlFor Property

We can use

htmlFor

property to add HTML

for

attribute to the HTML

label

element.

1
2
let labelElement = document.createElement("label");
labelElement.htmlFor = "myCheckbox";

JAVASCRIPT

2.2 The setAttribute() Method

We can use

setAttribute()

method to set any HTML attribute name and its corresponding value. If the attribute already exists, the value is updated. Otherwise, a new attribute is added with the specified name and value.

Syntax:

Element.setAttribute(name, value);

1
2
let labelElement = document.createElement("label");
labelElement.setAttribute("for", "myCheckbox");

JAVASCRIPT

Try out creating the HTML

label

element dynamically in the below Code Playground.

HTML

CSS

JAVASCRIPT

Inspect

1
2
3
4
5
<!DOCTYPE html>
<html>
  <head></head>
  <body> </body>
</html>

3. Loops

Loops allow us to execute a block of code several times.

for...of Loop
for...in Loop
for Loop
while Loop and many more.

3.1 The for...of Loop

1
2
3
4
5
let myArray = [1, 2, 3, 4];
for (let eachItem of myArray) {
   console.log(eachItem);
}

JAVASCRIPT

The HTML Code for creating a Todo Item:

1
2
3
4
5
6
7
8
9
10
11
<li class="todo-item-container d-flex flex-row">
  <input type="checkbox" id="checkboxInput" class="checkbox-input" />
  <div class="d-flex flex-row label-container">
    <label for="checkboxInput" class="checkbox-label">
      Learn HTML
    </label>
    <div class="delete-icon-container">
      <i class="far fa-trash-alt delete-icon"></i>
    </div>
  </div>
</li>

HTML

Collapse

4. CSS Box Properties

4.1 Border

The CSS

border

property is a shorthand property for:

border-width
border-style (required)
border-color

For example,

1
2
3
4
5
.button {
  border-style: dashed;
  border-width: 2px;
  border-color: #e4e7eb;
}

CSS

Instead of writing the CSS properties

border-style

border-width

and

border-color

individually, we can apply these properties at once with a single CSS property called

border

Syntax:

border: border-width border-style border-color

1
2
3
.button {
  border: 2px dashed #e4e7eb;
}

CSS

To specify the border on one of the four sides of an HTML element, you can use the below CSS properties.

border-top
border-bottom
border-right
border-left

1
2
3
.button {
  border-top: 1px dotted #e4e7eb;
}

CSS

If the border is not required, we can apply the

none

as value to the CSS

border

property.

1
2
3
.button {
  border: none;
}

CSS

For example, if the border property is not required on the top side of an HTML element. You can use,

1
2
3
.button {
  border-top: none;
}

CSS

Try out applying the different CSS border properties in the below Code Playground.

JS HTM Input DOM Manipulations setAttribute() and Loops

1. HTML Input Element

1.1 Checkbox

1.2 The HTML Label Element

1.2.1 The HTML
for
Attribute

2. DOM Manipulations

2.1 The htmlFor Property

2.2 The setAttribute() Method

3. Loops

3.1 The for...of Loop

4. CSS Box Properties

4.1 Border

Post a Comment

Coding Key

Interview Preparation

Subscribe Us

Contact Form

JS HTM Input DOM Manipulations setAttribute() and Loops

1. HTML Input Element

1.1 Checkbox

1.2 The HTML Label Element

1.2.1 The HTML for Attribute

2. DOM Manipulations

2.1 The htmlFor Property

2.2 The setAttribute() Method

3. Loops

3.1 The for...of Loop

4. CSS Box Properties

4.1 Border

Post a Comment

Contact Form

1.2.1 The HTML
for
Attribute