Блог

Главная - Вопросы по программированию - Не удается ПОЛУЧИТЬ форму из встроенного html

Не удается ПОЛУЧИТЬ форму из встроенного html

#html #forms #buffalo

#HTML #формы #buffalo

Вопрос:

У меня есть поисковая система с серверной частью в GoLang amp; Buffalo, я новичок в веб-программировании, и я уверен, что это глупая проблема. У меня есть панель навигации со строкой поиска и другая панель поиска в теле. Панель навигации является встроенным HTML (частично заполненным).

search.html Форма работает безупречно, но кнопка отправки навигационной панели ничего не делает.

есть следующий код:

 <!-- search.plush.html -->
<html>
<body>
    <div>
        <%= partial("header.html") %>
    </div>
    ...
        <div>
            <form action="/results" method="GET">
                <input id="text" for="mainsearch" inputmode="latin" placeholder="Search words or phrases">
                    <div  role="group">
                        <button name="type" value="word" type="submit">Word Search</button>
                        <button name="type" value="phrase" type="submit">Phrase Search</button>
                    </div>
            </form>
        </div>
    ...
</body>
</html>

И

 <!-- _header.plush.html -->
<div>
    <form action="/results" method="GET">
        <input id="text" for="mainsearch" inputmode="latin" placeholder="Search words and phrases">
            <div  role="group">
                <button name="type" value="general" type="submit">
                    <i class="ion-search"></i>
                </button>
             </div>
    </form>
</div>

Я встраиваю _header.html в любой другой HTML, и он нигде не работает. Я думаю, что это скорее проблема html, чем plush, но я не могу найти информацию об этом..

РЕДАКТИРОВАТЬ: я обнаружил, используя консоль разработчика в Chrome, что <form> и </form> в _header.plush.html исчезли после рендеринга.

Комментарии:

1. Быстрый взгляд: ввод должен иметь name="mainsearch" . И рекомендуется также иметь элемент label, который будет иметь for="mainsearch"

Ответ №1:

Из того, что я видел, значение во входных данных не будет отправлено на сервер, поскольку для этого ввода нет тега name.

Атрибут name используется для ссылки на элементы в JavaScript или для ссылки на данные формы после отправки формы.

Примечание: при отправке формы будут передаваться значения только элементов формы с атрибутом name.

https://www.w3schools.com/tags/att_input_name.asp

Хорошей практикой является проверка вашего вывода html. https://validator.w3.org /

Ответ №2:

Я вижу несколько проблем, которые могут способствовать вашей проблеме.

id значения должны быть уникальными на странице

При добавлении идентификатора к любому элементу в HTML, он должен быть единственным элементом в DOM. Наличие нескольких элементов с одинаковым идентификатором приведет к неожиданному поведению в зависимости от браузера, в котором вы находитесь. Смотрите эту ссылку в документах для получения дополнительной информации:https://developer.mozilla.org/en-US/docs/Web/API/Element/id

Используйте <input type="image" кнопку отправки изображения

Вероятно, это самый простой способ создать кнопку с изображением для вашей формы, хотя вы, вероятно, также захотите включить дополнительное (скрытое) поле для отправки type: general информации, которая была отправлена кнопкой изначально. Вот ссылка на документы для кнопок с изображениями в формах:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image