Как мне сделать так, чтобы я мог просматривать всю форму?

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

<form data-customer-information-form = "true" autocomplete = "off" method = "POST" action = "addticket/submit" name = "ticketForm" id = "ticketform" accept-charset = "UTF-8">
            <p>
                <label for = "customerFirstName">First Name:</label></br>
                <input type = "text" name = "customerFirstName" id = "customerFirstName" placeholder = "first name" pattern = "[A-Za-z]+" required>
            </p>
            <p>
                <label for = "customerLastName">Last Name:</label></br>
                <input type = "text" name = "customerLastName" id = "customerLastName" placeholder = "last name" required>
            </p>
            <p> 
                <label for = "phoneNumber">Phone: used for contact</label></br>
                <input type = "tel" id = "phone" maxlength = "12" name = "phoneNumber" placeholder = "phone" pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
            </p>
            <p>
                <label for = "email">Email:</label></br>
                <input type = "email" name = "email" id = "email" placeholder = "email">
            </p>
            <p>
                <label for = "service">Computer/Service Name:</label></br>
                <input type = "text" name = "service" placeholder = "computer model or service" required>
            </p>
            <p>
                <label for = "description">Anything else we need to know:</label></br>
                <textarea type = "text" maxlength = "200" name = "description" id = "description" placeholder = "What's gone wrong?"></textarea>
            </p>
            <input type = "submit" name = "submit" value = "Submit" id = "submit">
        </form>

Когда я скопировал HTML в программу просмотра HTML, он отлично работает. Но в остальной части страницы он перестает работать.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
92
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

<form data-customer-information-form = "true" autocomplete = "off" method = "POST" action = "addticket/submit" name = "ticketForm" id = "ticketform" accept-charset = "UTF-8">
            <p>
                <label for = "customerFirstName">First Name:</label></br>
                <input tabindex = "0" type = "text" name = "customerFirstName" id = "customerFirstName" placeholder = "first name" pattern = "[A-Za-z]+" required>
            </p>
            <p>
                <label for = "customerLastName">Last Name:</label></br>
                <input tabindex = "0" type = "text" name = "customerLastName" id = "customerLastName" placeholder = "last name" required>
            </p>
            <p> 
                <label for = "phoneNumber">Phone: used for contact</label></br>
                <input tabindex = "0" type = "tel" id = "phone" maxlength = "12" name = "phoneNumber" placeholder = "phone" pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
            </p>
            <p>
                <label for = "email">Email:</label></br>
                <input tabindex = "0" type = "email" name = "email" id = "email" placeholder = "email">
            </p>
            <p>
                <label for = "service">Computer/Service Name:</label></br>
                <input tabindex = "0" type = "text" name = "service" placeholder = "computer model or service" required>
            </p>
            <p>
                <label for = "description">Anything else we need to know:</label></br>
                <textarea tabindex = "0" type = "text" maxlength = "200" name = "description" id = "description" placeholder = "What's gone wrong?"></textarea>
            </p>
            <input tabindex = "0" type = "submit" name = "submit" value = "Submit" id = "submit">
        </form>

Убедитесь, что ваш javascript не блокирует определенные клавиши.

document.getElementById("customerFirstName").onkeydown = function(e){
            if (!(e.keyCode === 8 || e.keyCode ===46 || keypress.keyCode === 9)){
            if (!(/[A-Za-z]/i.test(String.fromCharCode(e.keyCode)))) {
            e.preventDefault();
            return false;
            }
            }
        }

Другие вопросы по теме