Změna velikosti písma

Drobečková navigace

CSS blog > Vlastní formulář

Vlastní formulář



Navigace

 


Víte, že si můžete vytvořit vlastní formulář podle potřeby s libovolnými popisky? Ve větší formě je to samozřejmě práce výroby, ale v poslední době se začaly objevovat návrhy se základním formulářem na úvodní stránce (např. zde ). Grafikům tedy byla povolena možnost vytvářet vlastní formuláře pomocí json (JavaScript Object Notation) zápisu.

Jak na to?

Pokud chceme vytvořit stránku s vlastním formulářem, je důležite ve struktuře založit stránku pod modulem "Napište nám". V "Nastavení" stránky je sekce "Šablona", kde vyberememožnost "Vlastní formulář". Tím se otevře prostor pro vložení  zápisu pro vlastní formulář (sekce "Definice formuláře").

 

Příklad definice

[
    {
        "input": "text",
        "label": "Jméno",
        "mandatory": true
    },
    {
        "input": "email",
        "label": "Email",
        "mandatory": true
    },
    {
        "input": "text",
        "label": "Telefon"
    },
    {
        "input": "textarea",
        "label": "Vaše zpráva",
        "mandatory": true
    }
]

 

Prvky definice

Povinné

input Definuje typ inputu, může nabývat hodnot - text, textarea, checkbox, select, checkboxlist, radiolist, file, email, number, url, date, datetime, time
label Prostě label. Jakýkoliv string.
   

Volitelné

mandatory Definuje jestli je prvek povinný.
Hodnota: true/false
Použití u inputů: všechny typy
readonly Definuje, zda je input pouze pro čtení.
Hodnota: true/false
Použití u inputů: všechny typy
values

Hodnoty pro inputy typu select, checkboxlist, radiolist.
Hodnota: pole řetězců
Použitelné u inputů - checkbox, select, checkboxlist, radiolist

{
"input": "radiolist",
"label": "Barva",
"values": ["vojenská šeď", "ocelová šeď"]
}

placeholder Předvyplněná zástupná hodnota v inputu jenž zmizí pří jeho vyplňování. Slouží jako nápověda nebo příklad dat, které se mají vyplnit do inputu.
Hodnota: řetězec
Použití u inputů: text, textarea, email, number, url, date, datetime, time 
emptyValue  Předvyplněná hodnota v inputu, pokud je při odeslání formuláře stejná, bere se jako nevyplněný input.
Hodnota: řetězec
Použití u inputů: text, textarea, email, number, url, date, datetime, time
defaultValue Předvyplněná hodnota v inputu.
Hodnota: řetězec (text, textarea, email, number, url, date, datetime, time, select, radiolist), pole řetězců (checkboxlist), true/false (checkbox)
Použití u inputů: všechny typy kromě file
group Ke sloučení prvků do skupin (fieldsetů). Uvedený řetězec se použije jako název skupiny.
Hodnota: řetězec
Použití: Uvedením u prvního formulářového prvku kterého chceme zahrnout do skupiny. Každým dalším uvedením u následujícího formulářového prvku vytvoříme novou skupinu (i když použijeme stejný řetězec). Při vloženém prázdném řetězci se zruší aktuální skupina.
description Popisek za inputem.
Hodnota: řetězec - plaintext nebo html
Použití u inputů: - všechny typy
prompt Na první místo v select boxu se dosadí zadaný řetězec odpovídající prázdné hodnotě.
Hodnota: řetězec
Použití u inputů: select
queryName Název parametru URL ze kterého se má načíst výchozí hodnota.
Hodnota: řetězec
Použití u inputů: všechny typy

Inputy

Nestandardní

email: Textinput s kontrolou na správnost zápisu e-mailové adresy
number: Textinput s kontrolou zda je hodnota číslo
url: Textinput s kontrolou na správnost zápisu internetové adresy
date, datetime, time: Textinput s přidaným datepickerem

 

Možné chyby syntaxe

  • jednoduché apostrofy (') místo dvojitých (")
  • přebytečné čárky za posledním prvkem pole[], objektu{}

Kalendář akcí

Po Út St Čt So Ne
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 1 2 3 4