HTML-форма или div для входа в JQuery?

Question

Я хочу создать форму входа на одной HTML-странице для отображения с помощью JQuery (я новичок в этой технологии).

Мне интересно, следует ли мне использовать <div> и скрывать / отображать егоили используйте <form> и скрывайте / отображайте его.Информация будет отправлена ​​сервлету с Ajax.

Если я использую <div>, что я должен использовать вместо <input>, доступного в формах?

Если я использую<form>, я считаю, что должен предоставить действие, которое раздражает, поскольку я использую одну страницу.Есть ли способ избежать этой проблемы?

Какой рекомендуемый метод входа в систему использовать в этом случае, <div> или <form>?

Answer 1

Если я использую <div>, что я должен использовать вместо <input>, доступного в формах?

Вполне законно включать <input> вне <form>.

Сказав, что я обычно буду использовать <form>, чтобы вы могли связываться с его событием onsubmit, вместо того, чтобы беспокоиться о людях, нажимающих клавишу Enter для отправки формы, и о том, какие события генерируются (что зависит от браузера и содержание формы). Лучше пометить форму как форму и позволить браузеру применять ее обычное поведение, похожее на форму, чем пытаться ее подделать.

В идеале, чтобы правильно выполнить прогрессивное улучшение, вы должны сначала заставить форму работать без JavaScript, так что на самом деле будет что-то полезное, на что можно указать action. Затем добавьте сценарий / XMLHttpRequest сверху. Если у вас должна форма, которая работает только со сценарием, вы можете добавить ее на страницу из сценария, чтобы она не присутствовала для пользователей, не являющихся JS, и они не запутались при попытке ее отправить.

Answer 2

Мне интересно, должен ли я использовать <div> и скрывать / отображать его, или использовать <form> и скрывать / отображать его.

Используйте форму. Основывайтесь на том, что работает

Если я использую <div>, что я должен использовать вместо <input>, доступного в формах?

Если бы вы использовали div, вы бы все равно использовали ввод, но использовали форму.

Если я использую <form>, я считаю, что должен предоставить действие, которое раздражает, поскольку я использую одну страницу.

Не делай этого. Основывайтесь на том, что работает.

Answer 3

Это практически не имеет значения - если вы не беспокоитесь о семантическом контенте (<form> передает, что он предназначен для пользовательского ввода более четко, чем <div>), постепенное ухудшение (<form> все еще мог бы работать без JavaScript), доступность (что, вероятно, потребовало бы помнить о постепенном ухудшении), прогрессивное улучшение или ненавязчивый javascript .

Answer 4

Вы должны использовать тег <form>, потому что он семантически корректен (пользователи заполняют логин форма ).

В форме можно указать action=""запретить отправку формы с помощью свойства onsubmit:

$("form#myForm").submit(function() {
    // do your ajax here

    return false; // prevents the default action
});

Answer 5

Если вы планируете, что ваше приложение будет работать для пользователей без включенного JavaScript, используйте элемент form, который является стандартным способом отправки формы в HTML.

Если это только для обратных передач типа ajax,Вы также можете использовать DIV.Конечно, вам все равно понадобятся элементы <input ../>, так как они не могут быть заменены чем-либо еще.

Одна вещь, которую вы получите, если использовать подход form - вы можете затем вызвать serialize() метод элемента формы, чтобы получить все имена полей + значения в строке.

РЕДАКТИРОВАТЬ: нет, на самом деле метод serialize() может использоваться на любом элементе DOM, поэтому form не имеетпреимущества перед div.