HTML checked Attribute

HTMLWeb DevelopmentFront End Technology

The checked attribute in HTML is used to set that an <input> element is pre-selected when the page loads.

This works for input type radio and checkbox.

Let us work on the checked attribute for checkbox i.e. input type checkbox. Following is the syntax −

<input type=”checkbox” checked>

Above, we have set it checked since we wanted the checkbox to be selected when the web page loads. Let us now see an example to implement the checked attribute of the <input> element −

Example

 Live Demo

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
   Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
   Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
   DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
   Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
   Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
   <input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
   <button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

Output

In the above example, we have a form with input elements and a button −

<form action="" method="get">
   Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
   Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
   DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
   Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
   Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
   <input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
   <button type="submit" value="Submit">Submit</button>
</form>

We have set a checkbox using the input type checkbox. To set it checked when the web page loads, the checked attribute is used −

<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription:
raja
Published on 20-Jun-2019 09:04:59
Advertisements