HTML5: більше гнучкості в формах

Форми стали більш універсальним з HTML5. Вхідний елемент тепер має можливість містити адреси електронної пошти та дати, а також маркувати поля введення в якості обов'язкового, заповнювати їх вмістом. Більше це не відноситься до JavaScript. І це лише деякі з найбільш цінних доповнень. Ходімо далі. Чи знаєте ви, що віднині є можливість мати більше однієї кнопки "Відправити"? Також, тепер ви можете розміщати елементи введення і вибору за межами вашої форми.

Випадок 1: Більш ніж одне "Відправити" на Форму

Раніше ви могли мати лише одну кнопку "Відправити". Ви б прикріпили "post" метод та url-адресу до елемента "форми", а кнопка "submit" виконувала б це.

    <form action="http://example.com/" method="post">
      …
      <input type="submit">
    </form>

Приклад виглядає більш ніж знайомо. Нові HTML властивості "formmethod" і "formaction" змінити це. Вони дозволяють додати метод "post" і URL безпосередньо до кнопки "Відправити". Відчувається гнучкість в розробці форм, коли параметри обробки, прикріплені до кнопки "Відправити", а не до "форми". Так як всі параметри вказані окремо для кожної "Відправити", ви можете мати стільки кнопок, скільки ви вважаєте за потрібне.

    <form>
      …
      <input formaction="http://www.example.com/" formmethod="get" type="submit" value="example.com">
      <input formaction="http://www.example.org/" formmethod="get" type="submit" value="example.org">
    </form>

Як можна побачити, кожна кнопка має різне гіперпосилання, тож ми можемо навіть не думати про JavaScript.

Змішування функціональної спадщини з новими можливостями працює бездоганно. Як тільки якась кнопка "відправити" споряджається "formaction" і "formmethod", параметри для "method" і "action" всередині елемента "форми" перезаписуються. Якщо у вас є "надіслати", не оснащене новими властивостями, воно використає значення, встановлені всередині "форми".

Властивості "formmethod" і "formaction" підтримуються всіма сучасними браузерами.

Випадок 2: елементи форми поза формою

Ми всі знаємо, що всі елементи, що належать формі повинні знаходитись всередині "

    <form id="MyForm">
      <input name="email" type="text">
    </form>
     
    <input form="MyForm" type="submit">

Атрибут "форма" підтримується всіма сучасними браузерами. Виняток - Internet Explorer.