在本文中，我们将在页面加载时预先选择一个输入元素，即用户不必单击第一个文本框即可开始在其上书写。当页面加载时，输入将被预先选择，用户可以直接开始输入。这可以通过使用 autofocus 属性来完成。它是一个布尔属性，它使元素成为焦点并支持 、、 和 元素。</p> <p><strong>方法：</strong></p> <ul> <li>为 HTML 表单创建一个 div。</li> <li>我们将在文本类型的表单中制作输入元素，并为用户名添加自动对焦。</li> <li>在页面加载时，我们将看到用户名将成为焦点，我们可以直接开始输入。</li> </ul> <p><strong>语法</strong><strong>：</strong> </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><input type="text" autofocus></code></pre> </div> <p><strong>例子：</strong></p> <div> <h5 class="code">HTML</h5> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><!DOCTYPE html> <html lang="en"> <body> <h1> pre-select an input element </h1> <form> <label>Username:</label><br> <input type="text" name="username" autofocus> <br> <label>Email id:</label><br> <input type="text" name="email_id"> <br><br> <input type="submit" value="Submit"> </form> </body> </html></code></pre> </div> <p></p> <hr/> </div> <p><strong>输出：</strong> </p> <div class="wp-caption alignnone" style="width:810px"><img class="img-fluid" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/How_to_pre-select_an_input_element_when_the_page_loads_in_HTML5?_0.jpg" width="696"/> <p class="wp-caption-text">预选输入元素</p> </div> </div> </article> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>