Как изменить порядок выбора текстового поля при использовании клавиши табуляции

Question

Я все еще пытаюсь придумать, как переписать этот заголовок.

В любом случае, так что я есть контактную форму на моей странице здесь: http://leongaban.com/

При нажатии на имя и заполнить его можно затем вкладку к следующему полю электронной почты. После ввода сообщения электронной почтой, естественно, пользователь снова заносится в окно сообщения.

Однако по какой-то причине мой вкладка переместилась полностью вверх в начало страницы и, кажется, выбрала мою основную навигационную ссылку для моего портфолио. Еще несколько вкладок, и я возвращаюсь в текстовое поле сообщения.

Это, конечно, не идеально, есть ли способ, по которому я могу заставить выбор вкладок идти в правильном порядке? то есть: Имя> Электронная почта> Сообщение> Защитный код> Отправить

Мой текущий вид (HTML)

<div class="the-form"> 
      <form id="myForm" action="#" method="post"> 

      <div> 
       <label for="name">Your Name</label> 
       <input type="text" name="name" id="name" value="" tabindex="1"> 
      </div> 

      <div> 
       <label for="email">Your Email</label> 
       <input type="text" name="email" id="email" value="" tabindex="1"> 
      </div> 

      <div> 
       <label for="textarea">Message:</label> 
      </div> 

      <div> 
       <textarea cols="40" rows="8" name="message" id="message"></textarea> 
      </div> 

      <p><em>Hi, what is 2 + 3?</em></p> 
      <input type="text" name="captcha" id="captcha" /> 

      <div> 
       <input class="submit-button" type="submit" value="Submit"> 
      </div> 

      </form> 
     </div> 

    </footer> 

Answer 1

Вы должны указать свой tabindex в том порядке, в котором вы хотели бы, чтобы вы отправились.

<input type="text" name="name" id="name" value="" tabindex="1"> 
<input type="text" name="email" id="email" value="" tabindex="2"> 
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea> 
<input type="text" name="captcha" id="captcha" tabindex="4"/> 
<input class="submit-button" type="submit" value="Submit" tabindex="5"> 

т.д.

Прямо сейчас у вас есть два tabindex эс установлен в 1, так что они будут идти в первую очередь, так как они являются единственными, с определенной TabIndex.

Answer 2

Try используя tabindex свойство для полей ввода. Это позволит вам управлять порядком, в котором пользователь может вставлять ваши элементы страницы.

Пример кода для этого можно найти here, хотя вы уже устанавливаете tabindex на имя и входы электронной почты. Просто добавьте это свойство к остальным вашим входам и установите их в том порядке, в котором вы хотите.