Javascript library for creation of interactive fields of web forms

Thesis title: Javascriptová knihovna pro tvorbu interaktivních polí webových formulářů
Author: Šafránek, Jakub
Thesis type: Diplomová práce
Supervisor: Vojíř, Stanislav
Opponents: Nguyen, Viet Bach
Thesis language: Česky
Abstract:
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.
Keywords: select; validace; Vue.js; HTML5; input; javascript; formulář
Thesis title: Javascript library for creation of interactive fields of web forms
Author: Šafránek, Jakub
Thesis type: Diploma thesis
Supervisor: Vojíř, Stanislav
Opponents: Nguyen, Viet Bach
Thesis language: Česky
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.
Keywords: javascript; input; select; form; validation; Vue.js; HTML5

Information about study

Study programme: Znalostní a webové technologie
Type of study programme: Magisterský studijní program
Assigned degree: Ing.
Institutions assigning academic degree: Vysoká škola ekonomická v Praze
Faculty: Faculty of Informatics and Statistics
Department: Department of Information and Knowledge Engineering

Information on submission and defense

Date of assignment: 8. 9. 2021
Date of submission: 28. 6. 2022
Date of defense: 14. 9. 2022
Identifier in the InSIS system: https://insis.vse.cz/zp/77652/podrobnosti

Files for download

    Last update: