View video tutorial

HTML checked Attribute

HTML

The checked attribute in HTML is a Boolean attribute used with input types radio and checkbox to specify that the input element should be pre-selected or "checked" when the web page is initially loaded.

Definition and Usage


➔ checked is equivalent to checked="checked".

➔ Used with <input type="checkbox"> and <input type="radio">

➔ JavaScript can set or change checked properties after the page loads.

Example
<!-- Multiple options can be selected in checkboxes but only one option can be selected in radios. -->
<table>
    <tr>
        <td><input type="checkbox" name="html" value="html" checked></td>
        <td>I know HTML</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="css" value="css"></td>
        <td>I know CSS</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="js" value="js"></td>
        <td>I know JavaScript</td>
    </tr>
</table>

Example
<!-- Multiple options can be selected in checkboxes but only one option can be selected in radios. -->
<table>
    <tr>
        <td><input type="radio" name="radio" value="html" checked></td>
        <td>I know HTML</td>
    </tr>
    <tr>
        <td><input type="radio" name="radio" value="css"></td>
        <td>I know CSS</td>
    </tr>
    <tr>
        <td><input type="radio" name="radio" value="js"></td>
        <td>I know JavaScript</td>
    </tr>
</table>

Applies to

This attribute can be used on the following element.

Attribute Element
checked <input>

Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML checked Attribute Example</title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>HTML checked Attribute Example</h2>
    <p>Set the checked attribute for the input which will remain in the checked state as soon as the page loads.</p>
    <section>
        <form action="/serverside-script-file" method="get">
            <table>
                <tr>
                    <td><input type="checkbox" name="html" value="html" checked></td>
                    <td>I know HTML</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="css" value="css"></td>
                    <td>I know CSS</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="js" value="js"></td>
                    <td>I know JavaScript</td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Submit"></td>
                </tr>
            </table>
        </form>
    </section>
</body>
</html>

Click on the "copy" button and try this example in your project.