HTML autofocus Attribute</h1> <div class="qa_category"> <div id="divCategories"> <a href='https://www.tutorialspoint.com/articles/category/HTML' target='_blank'><span>HTML</span></a><a href='https://www.tutorialspoint.com/articles/category/Web-Development' target='_blank'><span>Web Development</span></a><a href='https://www.tutorialspoint.com/articles/category/Front-End-Technology' target='_blank'><span>Front End Technology</span></a></div> <hr/> <div id="adp_top_ads" style="text-align:center !important;"></div> <script> var adPos = document.getElementById('adp_top_ads'); var ad_id_720 = "8014640d-fd34-4b2e-9b1b-cc67234a2325"; var ad_id_650 = "2d1bb2c4-eb72-471d-9c80-1bf5514728c1"; var ad_id_300 = "df94a1a9-ae2f-432d-9a92-d93823ff4503"; var width = window.innerWidth; var ad_id = ad_id_720; if( width <= 768 ){ ad_id = ad_id_300; }else if( width <= 1435 ){ ad_id = ad_id_650; } adPos.innerHTML = '<div id="' + ad_id + '" class="_ap_apex_ad"></div>'; var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { adpushup.triggerAd(ad_id); }); </script> </div> <hr/> <div id="divResources"> </div> <div id="downloadContent"> <p style="">The autofocus attribute of the <textarea> element is used to set the autofocus to the textarea itself when the page loads. The autofocus attribute for the <textarea> element introduced in HTML5.</p><p>Following is the syntax −</p><pre class="result notranslate"><textarea autofocus></pre><p>Let us now see an example to implement the autofocus attribute of the <textarea> element −</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/mTctam" rel="nofollow" target="_blank"> Live Demo</a></p><pre class="prettyprint notranslate"><!DOCTYPE html> <html> <body> <h2>Interview Questions</h2> <p>Why do you want go for the Technical Writer Job Profile? (100 words)</p> <textarea rows="6" cols="70" autofocus> Write the answer in 100 words only... </textarea> <p>What are your strengths? (50 words)</p> <textarea rows="4" cols="70" autofocus> Write the answer in 50 words only... </textarea> </body> </html></pre><h2>Output</h2><p><img src="https://www.tutorialspoint.com/assets/questions/media/24436/interview.jpg" class="fr-fic fr-dib" style="width:600px; height:354px; border:1px solid black;" width="600" height="354"></p><p>In the above example, we have set two textarea−</p><pre class="result notranslate"><textarea rows="6" cols="70" autofocus> Write the answer in 100 words only... </textarea> <p>What are your strengths? (50 words)</p> <textarea rows="4" cols="70" autofocus> Write the answer in 50 words only... </textarea></pre><p>One of these textarea we have set with autofocus. Now whenever the page loads, the focus and the cursor will automatically be visible in the first textarea −</p><pre class="result notranslate"><textarea rows="6" cols="70" autofocus></pre></div> <div class="clear"></div> <div class="qa_widget mui-panel prof-view-artcle"> <div class=""> <a href='https://www.tutorialspoint.com/authors/arjun-thakur' target='_blank' title="Arjun Thakur" class="mui--pull-left"> <img class="profile-img1" src='https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg' alt='Arjun Thakur'/> </a> <div class="qa_author"> <a href='https://www.tutorialspoint.com/authors/arjun-thakur' target='_blank'><span>Arjun Thakur</span></a> <p class="prof-desigtn mb-0"><b></b></p> </div> </div> <div class="clear"></div> <hr> <div class="qa_answer_dtm author-profile-post-info" id="divStats" data-qid="24436" data-quid = "13574"> <div class="mt-2">Updated on 29-Jun-2020 08:45:49</div> <p class="views-count" title="Article Views"><b><i class="fal fa-eye"></i> <span id="spanViews">0 Views</span></b></p> <a href="javascript:void(0)" id="print-page" class="like-dislike d-none d-sm-block"><i class="fal fa-print"></i> Print Article</a> <div class="uthor-prof-social-icon mt-2"> <span class="share-options"> <a onclick="copyToClipboard();" title="Copy To Clipboard" class=""><b><i class="fal fa-link"></i></b></a> <a id="ancFBShare" onClick="window.open('http://www.facebook.com/sharer/sharer.php?u=https://www.tutorialspoint.com/html-textarea-autofocus-attribute&t=HTML autofocus Attribute&description=HTML autofocus Attribute - The autofocus attribute of the element is used to set the autofocus to the textarea itself when the page loads. The autofocus attribute for the element introduced in HTML5.Following is the syntax −Let us now see an example to implement the autofocus attrib','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)" title="Share on Facebook"><i class="fab fa-facebook-f ms-2 me-1"></i></a> <a onClick="window.open('http://www.linkedin.com/shareArticle?url=https://www.tutorialspoint.com/html-textarea-autofocus-attribute&title=HTML autofocus Attribute&summary=HTML autofocus Attribute - The autofocus attribute of the element is used to set the autofocus to the textarea itself when the page loads. The autofocus attribute for the element introduced in HTML5.Following is the syntax −Let us now see an example to implement the autofocus attrib','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)" title="Share on LinkedIn"><i class="fab fa-linkedin-in me-2"></i></a> <a onClick="window.open('http://www.twitter.com/intent/tweet?url=https://www.tutorialspoint.com/html-textarea-autofocus-attribute&text=HTML autofocus Attribute - The autofocus attribute of the element is used to set the autofocus to the textarea itself when the page loads. The autofocus attribute for the element introduced in HTML5.Following is the syntax −Let us now see an example to implement the autofocus attrib','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)" title="Share on Twitter"><i class="fab fa-twitter me-1"></i></a> </span> </div> </div> </div> <ul class="toc chapters"> <li class="heading big-font" style="font-size: 25px!important;border: 0px;"><i class="fal fa-money-check-edit me-2"></i> Related Articles</li><li><a href="https://www.tutorialspoint.com/html-dom-textarea-autofocus-property">HTML DOM Textarea autofocus Property</a></li> <li><a href="https://www.tutorialspoint.com/html-select-autofocus-attribute">HTML autofocus Attribute</a></li> <li><a href="https://www.tutorialspoint.com/html-input-autofocus-attribute">HTML autofocus Attribute</a></li> <li><a href="https://www.tutorialspoint.com/html-autofocus-attribute">HTML autofocus Attribute</a></li> <li><a href="https://www.tutorialspoint.com/html-button-autofocus-attribute">HTML autofocus Attribute</a></li> <li><a href="https://www.tutorialspoint.com/Usage-of-autofocus-HTML5-attribute">Usage of autofocus HTML5 attribute</a></li> <li><a href="https://www.tutorialspoint.com/html-dom-textarea-object">HTML DOM Textarea Object</a></li> <li><a href="https://www.tutorialspoint.com/html-dom-textarea-cols-property">HTML DOM Textarea cols Property</a></li> <li><a href="https://www.tutorialspoint.com/html-dom-textarea-rows-property">HTML DOM Textarea rows Property</a></li> <li><a href="https://www.tutorialspoint.com/html-dom-textarea-placeholder-property">HTML DOM Textarea placeholder Property</a></li> <li><a href="https://www.tutorialspoint.com/html-dom-textarea-disabled-property">HTML DOM Textarea disabled Property</a></li> <li><a href="https://www.tutorialspoint.com/html-dom-textarea-defaultvalue-property">HTML DOM Textarea defaultValue Property</a></li> <li><a href="https://www.tutorialspoint.com/html-dom-textarea-name-property">HTML DOM Textarea name Property</a></li> <li><a href="https://www.tutorialspoint.com/html-dom-textarea-readonly-property">HTML DOM Textarea readOnly Property</a></li> <li><a href="https://www.tutorialspoint.com/html-dom-textarea-wrap-property">HTML DOM Textarea wrap Property</a></li> </ul></ul><div class="print-page-logo-img text-center mt-2 mb-2" > <img class="border-0" src="https://www.tutorialspoint.com/articles/images/tp-print-page-logo.png" alt="Tutorials Point" /> </div> <div class="clear"><p></p></div> <div class="d-flex justify-content-between border-top py-2 border-bottom" id="bottom_navigation"> <a href="/articles/index.php" class="pre-btn"><i class="fal fa-chevron-circle-left"></i> Previous Page</a> <a href="https://www.tutorialspoint.com/html-input-autofocus-attribute" class="nxt-btn">Next Page <i class="fal fa-chevron-circle-right"></i> </a> </div> <div class="error-success" id="error-success"></div> <div class="error-warning" id="error-warning"></div> <div class="google-bottom-ads" id="google-bottom-ads"> <div>Advertisements</div> <div> <div id="adp_bottom_ads"></div> <script> var adPos = document.getElementById('adp_bottom_ads'); var mobile_ad_id = "6d621d7e-9531-4f26-810f-68af67dc6366"; var desktop_ad_id = "4951d1d6-24d4-4a31-afb7-2c22c489eae1"; var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { var ad_id = window.innerWidth <= 768 ? mobile_ad_id : desktop_ad_id; adPos.innerHTML = '<div id="' + ad_id + '" class="_ap_apex_ad"></div>'; adpushup.triggerAd(ad_id); }); </script> </div> </div> </div>   <div class="col-sm-6 col-md-3 col-xl-3"> <div class="data-sticky" id="google-right-ads"> <div class="google-right-ad" style="margin: 0px auto !important;margin-top:5px;min-height:280px!important"> <div id="2557b9b8-4c1f-4586-a953-f123dbd2ed8e" class="_ap_apex_ad"> <script> if( window.innerWidth > 768 ){ var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { adpushup.triggerAd("2557b9b8-4c1f-4586-a953-f123dbd2ed8e"); }); } </script> </div> </div> <div class="google-right-ad" style="margin-top:16px;min-height:280px!important"> <div id="b078e6a3-e1b7-40fe-b690-11ac441ad2d5" class="_ap_apex_ad"> <script> if( window.innerWidth > 768 ){ var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { adpushup.triggerAd("b078e6a3-e1b7-40fe-b690-11ac441ad2d5"); }); } </script> </div> </div> <div class="google-right-ad" style="margin-top:16px;margin-bottom:15px;min-height:600px!important"> <div id="8f8814c2-d64c-4d26-9cb9-543653c0b48f" class="_ap_apex_ad"> <script> if( window.innerWidth > 768 ){ var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { adpushup.triggerAd("8f8814c2-d64c-4d26-9cb9-543653c0b48f"); }); } </script> </div> </div>  </div> </div> </div> </div> </main> <footer class="py-3 card navbar-dark border-top" id="footer">  <div class="py-4 bg-white"> <div class="container"> <div class="row g-4">  <div class="col-lg-6 position-relative overflow-hidden"> <a href="https://www.tutorialspoint.com/market/business/subscription.jsp" target="_blank" title="Annual Membership"> <div class="bg-primary bg-opacity-10 rounded-3 p-5 h-100"> <div class="position-absolute bottom-0 end-0 me-3"> <img src="/images/annual-membership-wraps.svg" class="h-100px h-sm-200px" alt=""> </div> <div class="row"> <div class="col-sm-8 position-relative"> <h3 class="mb-1">Annual Membership</h3> <p class="mb-3 h5 fw-light lead">Enjoy unlimited access on 5500+ Hand Picked Quality Video Courses</p> <div class="btn-business mb-0"><i class="fal fa-check"></i> Subscribe Now</div> </div> </div> </div> </a> </div>  <div class="col-lg-6 position-relative overflow-hidden"> <a href="https://www.tutorialspoint.com/business/index.asp#demoRequest" target="_blank" title="Business Pack"> <div class="bg-secondary rounded-3 bg-opacity-10 p-5 h-100"> <div class="position-absolute bottom-0 end-0 me-3"> <img src="/images/business-banner-wraps.svg" class="h-100px h-sm-200px" alt=""> </div> <div class="row"> <div class="col-sm-8 position-relative"> <h3 class="mb-1">Training for a Team</h3> <p class="mb-3 h5 fw-light lead">Affordable solution to train a team and make them project ready.</p> <div class="btn btn-warning mb-0"><i class="fal fa-check me-1"></i> Submit Demo Request</div> </div> </div> </div> </a> </div> </div> </div> </div>  <div class="container"> <div class="row g-4"> <div class="col-lg-12 text-center"> <a class="me-0 pb-4" href="https://www.tutorialspoint.com"> <img class="light-mode-item h-100px" src="/static/images/logo-color-footer.png" alt="Tutorials Point"> <img class="dark-mode-item h-100px" src="/static/images/logo-footer-b.png" alt="Tutorials Point"> </a> <ul class="nav justify-content-center py-3 mt-md-0 "> <li class="nav-item"><a class="nav-link fw-bold" href="/about/index.htm"><i class="fal fa-globe"></i> About us</a></li> <li class="nav-item"><a class="nav-link fw-bold" href="/about/return_refund_policy.htm"> <i class="fal fa-check"></i> Refund Policy</a></li> <li class="nav-item"><a class="nav-link fw-bold" href="/about/about_terms_of_use.htm"><i class="fal fa-check"></i> Terms of use</a></li> <li class="nav-item"><a class="nav-link fw-bold" href="/about/about_privacy.htm"> <i class="fal fa-shield-check"></i> Privacy Policy</a></li> <li class="nav-item"><a class="nav-link fw-bold" href="/about/faq.htm"><i class="fal fa-question-circle"></i> FAQ's</a></li> <li class="nav-item"><a class="nav-link fw-bold" href="/about/contact_us.htm"><i class="fal fa-map-marker-alt"></i> Contact</a></li> </ul> <p class="small">© Copyright 2023. All Rights Reserved.</p> </div> <div id="privacy-banner"> <div> <p>We make use of First and third party cookies to improve our user experience. By using this website, you agree with our Cookies Policy. <a id="banner-accept" href="#">Agree</a> <a id="banner-learn" href="/about/about_cookies.htm" target="_blank">Learn more</a> </p> </div> </div> </div> </div> </footer> <div class="back-top"> <i class="fal fa-angle-up position-absolute top-50 start-50 translate-middle"></i> </div> <script data-cfasync="false">(function(w, d) { var s = d.createElement('script'); s.src = '//cdn.adpushup.com/40046/adpushup.js'; s.type = 'text/javascript'; s.async = true; (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(s); })(window, document);</script> <script>(function(w,d){var adSlot=d.createElement("div");adSlot.className="ad-slot ad gpt-div-slot",adSlot.style="position: absolute; visibility: hidden;",adSlot.textContent=" ",d.body.appendChild(adSlot),setTimeout((function(){if(0===adSlot.clientHeight){var t=d.createElement("script");t.setAttribute("src","https://delivery.adrecover.com/18107/adRecover.js"),t.setAttribute("type","text/javascript"),t.setAttribute("async",!0),d.head.append(t)}}),0);})(window, document);</script> <script async src="/static/js/script-min.js?v=0.37"></script> <script async src="/articles/js/article.js?v=1.51"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-232293-17"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-232293-17'); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-664793816"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-664793816'); </script> </body> </html>