Jak navrhnout webovou přihlašovací stránku HTML

Sofistikovaná přihlašovací stránka může způsobit nebo poškodit důvěryhodnost webu, protože noví návštěvníci stránek nejdříve s touto stránkou nejprve komunikují. Pokud vaše obchodní webové stránky vyžadují registraci, můžete vytvořit jednoduchý přihlašovací formulář pomocí čistého kódu HTML. S trochou úsilí do návrhu, můžete také dosáhnout barvy, stylu a pizazz, které označují místo jako profesionální. Moderní weboví návrháři často používají kaskádové styly pro přizpůsobení vzhledu svých webových stránek a přihlašovacích formulářů. Získáním několika principů CSS můžete vytvořit přesvědčivou přihlašovací stránku, která nejen vypadá dobře, ale vyjadřuje vaši kreativitu.

1.

Otevřete jeden z vašich dokumentů HTML a vložte následující kód do části těla dokumentu:

Tento základní kód vytvoří formulář obsahující vstupní značky, které vytvoří textové pole uživatelského jména, textové pole pro heslo a tlačítko "Odeslat". Vstupní značka tlačítka odkazuje na třídu CSS s názvem "submitButton", která na tlačítko používá zvláštní vizuální styl.

2.

Přejděte do hlavní části dokumentu a přidejte následující kód do této části:

Vzhled textových polí můžete změnit tak, že do kódu přidáte vstupní volič třídy CSS, jak je uvedeno výše. Atribut šířky nastavuje šířku textových polí a barevný atribut nastavuje barvu popředí. Máte také možnost nastavit barvy pozadí. Barvy popředí a pozadí jsou v tomto příkladu bílé a modré. Atribut dolního okraje je také důležitý, protože nastavuje vertikální vzdálenost mezi jednotlivými textovými poli. Přidání tohoto atributu eliminuje potřebu použití nebo

tagy v části těla formuláře pro kontrolu vertikální vzdálenosti.

4.

Vložte poslední kód CSS, který je uveden níže, za kódem uvedeným v předchozím kroku:

input.submitButton {šířka: 80px; Černá barva; barva pozadí: bílá; hraniční styl: tečkovaný; šířka okraje: 2px; hraniční barva: modrá; okraj: 15px; }}

Tento kód je nepovinný, ale umožňuje použít další styl pro tlačítko Odeslat. Šířka, 80px, v tomto příkladu činí toto tlačítko mírně užší než textové pole a nastavuje barvy popředí a pozadí na černobílé. To dává tlačítku svůj vlastní jedinečný vzhled a odlišuje ho od vstupních textových políček. Hodnoty atributů stylu ohraničení přidávají kolem tlačítka tlačítko s hranou a dávají jí hranici o velikosti 2 pixely, jejíž hraniční barva je modrá.

5.

Uložte dokument a otevřete jej v prohlížeči pro zobrazení přihlašovací stránky. Při zadávání hodnot do textových polí bude barva textu bílá.

Tipy

  • Experimentujte s barvami, šířkami čáry, polstrováním a dalšími atributy CSS, abyste dosáhli požadovaného vzhledu. Pokud vytvoříte svou formu širší tím, že zvětšíte její šířku, zvyšte také hodnoty šířky textových polí, abyste měli vše symetrické. Můžete také zvýšit nebo snížit velikost textových polí v závislosti na maximální velikosti, kterou povolíte pro hodnoty uživatelského jména a hesla.
  • Zvětšete rozteč mezi textovými pole uživatelského jména a hesla zvýšením velikosti horní hranice pro třídu vstupů CSS.

Varování

  • Nezapomeňte uzavřít CSS mezi počáteční značkou a uzavírací značkou, jak je ukázáno v příkladu článku. Formulář nezobrazí atributy stylingu, pokud tak neučiníte.
 

Zanechte Svůj Komentář