Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM Input Checkbox autofocus Property


The HTML DOM Input Checkbox autofocus property returns and modify the value of autofocus attribute of an input HTML element with type=”checkbox”.

Syntax

Following is the syntax −

1. Returning autofocus

object.autofocus

2. Modifying autofocus

object.autofocus = true|false

Example

Let us see an example of autofocus property −

<!DOCTYPE html>
<html>
<head>
<title<HTML DOM autofocus property</title<
<style>
   body{
      text-align:center;
   }
   p{
      font-size:1.5rem;
      color:#ff8741;
   }
   input{
      width:30px;
      height:30px;
      outline:2px solid #db133a;
   }
   button{
      background-color:#db133a;
      color:#fff;
      padding:8px;
      border:none;
      width:120px;
      margin:0.5rem;
      border-radius:50px;
      outline:none;
   }
</style>
</head>
<body>
<h1>autofocus Property Example</h1>
<p>Do you need help?</p>
<input type="checkbox" autofocus>
<br>
<button onclick="yes()">Yes</button>
<button onclick="no()">No</button>
<script>
   function yes() {
      document.querySelector("input").checked = true;
   }
   function no() {
      document.querySelector("input").checked = false;
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Input Checkbox autofocus Property

Click on “Yes/No” button to check and uncheck the checkbox but as you can see the checkbox already gets autofocus when page load with red outline.

HTML DOM Input Checkbox autofocus Property


HTML DOM Input Checkbox autofocus Property