Challenge isnt working correctly

HTML-CSS
1

Tell us what’s happening:
I entered the correct code and the challenge was completed, but when i tested it on the web page the order of the tabs still starts at home.

I double checked this by watching the video and following that instruction (it was the same as I did), the challenge was considered complete, but the tab still selects home first.

Is this an issue with my browser (using Chrome), or is there something that can be done to fix the challenge?

Your code so far


<body>
<header>
  <h1>Even Deeper Thoughts with Master Camper Cat</h1>
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Training</a></li>
    </ul>
  </nav>
</header>
<form>
  <label for="search">Search:</label>


  <input type="search" name="search" id="search" tabindex="1">
  <input type="submit" name="submit" value="Submit" id="submit" tabindex="2">


</form>
<h2>Inspirational Quotes</h2>
<blockquote>
  <p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
  - Chuck Norris</p>
</blockquote>
<blockquote>
  <p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
  - TMNT</p>
</blockquote>
<footer>&copy; 2018 Camper Cat</footer>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36.

Challenge: Use tabindex to Specify the Order of Keyboard Focus for Several Elements

Link to the challenge:

2

Hello there @joseph-c-johnson :wave:,

I think this is because how tab index works. It goes from the top to the bottom of the container. If you see, the inputs are inside the <form> container. So it will only tab to the search bar if you’re inside the form container. You can do so by clicking inside the red box I made on this image:

image
image861×501 45.1 KB

This is just to train you to make the Search Bar tab index to be 1 so it will go first before the Search Button.

Hope this helps,

Remember to Stay Safe, and Happy Coding!! :slight_smile:

Catalactics

3

Thank you for the quick response and explanation :+1:

1 Like