HTML5: більше гнучкості в формах
Форми стали більш універсальним з HTML5. Вхідний елемент тепер має можливість містити адреси електронної пошти та дати, а також маркувати поля введення в якості обов'язкового, заповнювати їх вмістом. Більше це не відноситься до JavaScript. І це лише деякі з найбільш цінних доповнень. Ходімо далі. Чи знаєте ви, що віднині є можливість мати більше однієї кнопки "Відправити"? Також, тепер ви можете розміщати елементи введення і вибору за межами вашої форми.
Випадок 1: Більш ніж одне “Відправити” на Форму
Раніше ви могли мати лише одну кнопку "Відправити". Ви б прикріпили “post” метод та url-адресу до елемента "форми", а кнопка "submit" виконувала б це.
<form method="post" action="http://example.com/">
…
<input type="submit" />
</form>
Приклад виглядає більш ніж знайомо. Нові HTML властивості "formmethod" і "formaction" змінити це. Вони дозволяють додати метод “post” і URL безпосередньо до кнопки "Відправити". Відчувається гнучкість в розробці форм, коли параметри обробки, прикріплені до кнопки "Відправити", а не до “форми”. Так як всі параметри вказані окремо для кожної "Відправити", ви можете мати стільки кнопок, скільки ви вважаєте за потрібне.
<form>
…
<input formmethod="get" formaction="http://www.example.com/" type="submit" value="example.com" />
<input formmethod="get" formaction="http://www.example.org/" type="submit" value="example.org" />
</form>
Як можна побачити, кожна кнопка має різне гіперпосилання, тож ми можемо навіть не думати про JavaScript.
Змішування функціональної спадщини з новими можливостями працює бездоганно. Як тільки якась кнопка "відправити" споряджається "formaction" і "formmethod", параметри для “method” і “action” всередині елемента "форми” перезаписуються. Якщо у вас є "надіслати", не оснащене новими властивостями, воно використає значення, встановлені всередині "форми".
Властивості "formmethod" і "formaction" підтримуються всіма сучасними браузерами.
Випадок 2: елементи форми поза формою
Ми всі знаємо, що всі елементи, що належать формі повинні знаходитись всередині "<form>". Це призводить до малої гнучкості в розробці цих форм. Завдяки новому атрибуту "<form>"., елементи введення або вибору не повинні перебувати в "формі". Тепер у вас з'явилася можливість розмістити елементи форми по всій сторінці. Щоб все працювало коректно, треба додати ID до елемента "<form>". Потім цей ідентифікатор використовується атрибутом "форма", щоб прикріпити елементи форми за її межами.
<form id="MyForm">
<input type="text" name="email" />
</form>
<input type="submit" form="MyForm" />
Атрибут “форма” підтримується всіма сучасними браузерами. Виняток - Internet Explorer.
Джерело:
http://www.noupe.com/design/html5-more-flexibility-in-form-design-83997.html
289 3
GR: 2.818k
Коментарі: