Scribd
Upload
4 views8 pages

Web Tsak1

The document explains the functionality and attributes of checkboxes in HTML, detailing how they allow users to select multiple options. It includes a sample HTML code for a checkbox form that utilizes CSS and JavaScript for styling and functionality. Key attributes such as 'type', 'name', 'value', and 'checked' are highlighted, along with the behavior of checkboxes when a form is submitted.

Uploaded by

komeha089
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views8 pages

Web Tsak1

The document explains the functionality and attributes of checkboxes in HTML, detailing how they allow users to select multiple options. It includes a sample HTML code for a checkbox form that utilizes CSS and JavaScript for styling and functionality. Key attributes such as 'type', 'name', 'value', and 'checked' are highlighted, along with the behavior of checkboxes when a form is submitted.

Uploaded by

komeha089
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Task1

Name: Mohamed Mahmoud Mohamed Fouad Khalaf


Section:6

Explanation of Checkbox in HTML

A checkbox in HTML is an input element that allows users to select multiple


options from a list. It is created using the <input> tag with the attribute
type="checkbox
Key Attributes of Checkbox
"Type="checkbox.1
.Specifies the input type as a checkbox
Name.2
Defines the name of the checkbox field. This name is used to group checkboxes
.or send data when the form is submitted
Value.3
.Specifies the value to be sent to the server if the checkbox is checked
Checked.4
.Makes the checkbox pre-selected (checked) when the page loads

How a Checkbox Worked

.A checkbox can either be checked or unchecked


If the checkbox is checked, its name and value will be sent when the form is
.submitted
.If the checkbox is unchecked, no value is sent for that checkbox
>DOCTYPE html<
>"html lang="en <
>head<
>"meta charset="UTF-8<
>"meta name="viewport" content="width=device-width, initial-scale=1.0 <
>title>Checkbox Form with CSS and JavaScript</title <
>style<
{ body
;font-family: Arial, sans-serif
;background-color: #f4f4f9
;margin: 0
;padding: 0
}
{ container.
;max-width: 600px
;margin: 50px auto
;padding: 20px
;background-color: #fff
;border-radius: 8px
;box-shadow: 0 0 15px rgba(0, 0, 0, 0.1)
}
{ h1
;text-align: center
;color: #444
}
{ form-group.
;margin-bottom: 15px
}
{ form-group label.
;display: flex
;align-items: center
;font-size: 1.1em
}
{ form-group input[type="checkbox"] .
;margin-right: 10px
;cursor: pointer
}
{ submit-btn.
;width: 100%
;padding: 10px
;background-color: #4CAF50
;color: white
;border: none
;border-radius: 5px
;cursor: pointer
;font-size: 1.1em
}
{ submit-btn:hover.
;background-color: #45a049
}
{ result.
;margin-top: 20px
;padding: 10px
;background-color: #f9f9f9
;border: 1px solid #ddd
}
>style/<
>head/<
>body<

>"div class="container<
>h1>Select Your Interests</h1<
>"form id="checkboxForm<
>"div class="form-group<
>label<
input type="checkbox" name="interest" value="Sports"> Sports <
>label/<
>div/<
>"div class="form-group<
>label<
input type="checkbox" name="interest" value="Music"> Music <
>label/<
>div/<
>"div class="form-group<
>label<
input type="checkbox" name="interest" value="Traveling"> <
Traveling
>label/<
>div/<
>"div class="form-group<
>label<
input type="checkbox" name="interest" value="Reading"> <
Reading
>label/<
>div/<
button type="button" class="submit-btn" <
>onclick="submitForm()">Submit</button
>form/<

>"div class="result" id="result<


>div/<
>div/<

>script<
{ )(function submitForm
const checkboxes =
;document.querySelectorAll('input[type="checkbox"]:checked')
;][ = const selectedValues

{ checkboxes.forEach(function(checkbox)
;selectedValues.push(checkbox.value)
;)}

;const resultDiv = document.getElementById("result")


{ if (selectedValues.length > 0)
resultDiv.innerHTML = "<h3>You selected:</h3><ul>" +
;">selectedValues.map(item => <li>${item}</li>).join('') + "</ul
{ else }
;">resultDiv.innerHTML = "<h3>No selections made.</h3
}
}
>script/<
>body/<
>html/<

You might also like