Javascriptová knihovna pro tvorbu interaktivních polí webových formulářů

Jakub Šafránek

Diplomová práce

Javascript library for creation of interactive fields of web forms

Anotace:

Formulářová pole patří mezi jedny z klíčových a nejpoužívanějších prvků webových stránek, se kterými se uživatelé setkávají prakticky každý den. Je proto důležité, aby se s nimi uživatelům pracovalo co možná nejlépe. Formulářová pole realizovaná čistě prostřednictvím HTML5 však často nesplňují požadavky, které na ně tvůrci webů mají. Hlavním cílem této diplomová práce je proto navrhnout a implementovat javascriptovou knihovnu pro tvorbu formulářových polí. V práci je nejdříve popsán úvod do problematiky používání formulářů v prostředí webových aplikací a analýza nedostatků konkrétních typů formulářových polí. Dále je provedena rešerše již existujících javascriptových knihoven, které se danou problematikou zabývají. Na základě získaných informací je posléze navrženo vlastní řešení včetně výběru základní sady formulářových polí skládající se z pole textového, číselného, URL, přepínače, rozbalovací nabídky a pole pro nahrávání souborů. Toto navržené řešení je poté realizováno a otestováno napříč různými prohlížeči i zařízeními. Výstupem této práce je vlastní vytvořená javascriptová knihovna jménem Hai Form, nabízející celkem 6 typů formulářových polí dostupných ve světlé i tmavé barevné variantě. Knihovna je zároveň navržena tak, aby ji bylo možné implementovat buď prostřednictvím čistého javascriptu, nebo pomocí frameworku Vue.js. Obě tyto verze jsou demonstrovány na vytvořené webové stránce určené k propagaci a otestování knihovny. Kompletní zdrojový kód je současně uvolněný a dostupný pod open source licencí na GitHubu.

Abstract:

Form fields are one of the key and most used elements of websites, which users encounter almost every day. It is therefore important to make them as easy to work with as possible for users. However, form fields implemented purely through HTML5 often do not meet the requirements that web developers have for them. Therefore, the main goal of this thesis is to design and implement a javascript library for creating form fields. The thesis first describes an introduction to the use of forms in web application environments and an analysis of the shortcomings of specific types of form fields. Then, a search of existing javascript libraries that deal with the issue is conducted. Based on the information obtained, a custom solution is then proposed, including the selection of a basic set of form fields consisting of a text field, a numeric field, a URL field, a switch, a select and a field for uploading files. This proposed solution is then implemented and tested across different browsers and devices. The output of this work is a custom created javascript library called Hai Form, offering a total of 6 types of form fields available in both light and dark color variations. The library is also designed to be implemented either via vanilla javascript or using the Vue.js framework. Both of these versions are demonstrated on a website created to promote and test the library. The complete source code is currently released and available under an open source license on GitHub.

Klíčová slova

select, validace, Vue.js, HTML5, input, javascript, formulář

Keywords

javascript, input, select, form, validation, Vue.js, HTML5

Jazyk práce: čeština

Datum vytvoření / odevzdání či podání práce: 28. 6. 2022

Obhajoba závěrečné práce

• Obhajoba proběhla 14. 9. 2022
• Vedoucí: Stanislav Vojíř
• Oponent: Viet Bach Nguyen

Vysoká škola ekonomická v Praze

Magisterský studijní program:
Znalostní a webové technologie