Domov › Internet › Jak odsadit od levého okraje html. Výplň a okraje v CSS pomocí parametrů margin, padding a border. Pravidla, která mění polohu prvků

Jak odsadit od levého okraje html. Výplň a okraje v CSS pomocí parametrů margin, padding a border. Pravidla, která mění polohu prvků

Od autora: Měli byste vědět o atributu typu ve vstupním poli. Tento atribut určuje typ vstupu formuláře, který uživatel uvidí. Pokud je atribut vynechán nebo je ve starém prohlížeči použita nová hodnota, značka bude stále fungovat. Výchozí typ bude nastaven na type="text". To je hlavní bod, který vám dnes umožňuje používat formuláře HTML5, i když podporujete starší prohlížeče. Pokud máte nové typy, jako je e-mail nebo vyhledávání, starší prohlížeče zobrazí jednoduché textové pole.

Náš registrační formulář používá 4 z 10 typů, které všichni znáte: zaškrtávací políčko, text, heslo a odeslání. Níže je úplný seznam typy dostupné v HTML5 vstupní pole:

Specifikace HTML5 hovoří o 9 dalších typech, pomocí kterých můžete vytvářet specifické prvky uživatelského rozhraní a také provádět nativní ověřování dat:

HTML5.1 a WHATWG HTML Living Standard zahrnují další čtyři typy související s datem, z nichž tři jsou poměrně dobře podporovány v moderních prohlížečích:

datum a čas (není podporováno v žádném prohlížeči)

Podívejme se na každou podrobně nový typ a také uvidíte, jak je lze použít.

Vyhledávání

Vyhledávání typu vstupu (type=”search”) je vyhledávací pole, jednořádkový vstup pro zadání jednoho nebo více vyhledávací fráze. Ze specifikace:

"Rozdíl mezi typ textu a typ vyhledávání je čistě stylistický: na platformách, kde se vyhledávací pole liší od běžných textových polí, typ vyhledávání uvede vstup do souladu se styly platformy.“

Mnoho stylů prohlížečů vyhledávací pole způsobem prohlížeče nebo vyhledávacích bloků operačního systému. Chrome, Safari, Opera a IE přidaly funkci pro mazání textu kliknutím na ikonu „x“, která se objeví, jakmile začnete psát (viz obrázek 4.5). Chrome a Opera také vymazávají pole data/času a IE11 přidává ikonu „x“ téměř ke všem typům, včetně textových.

Obrázek 4.5. pole typu vyhledávání je stylizováno tak, aby připomínalo vyhledávací pole operačního systému

Na zařízeních Apple kampaně mají vyhledávací pole zaoblené rohy ve výchozím nastavení v prohlížečích Chrome, Safari a Opera, což je duplicitní vzhled vyhledávací pole v operační systém. Na tabletech s dynamickou klávesnicí se tlačítko Přejít zobrazí jako ikona vyhledávání nebo slovo „hledat“. Vše závisí na zařízení. Pokud přidáte nestandardní atribut, zobrazí se v Chrome a Opeře ikona lupy.

Stále můžete použít type=”text”, ale nový typ vyhledávání je vizuálním vodítkem pro uživatele, kde musí kliknout, aby našli web. Nový typ je navíc velmi podobný standardním vyhledávacím polím, na která jsou uživatelé zvyklí. Na webu The HTML5 Herald není žádné vyhledávání, ale mohlo by to být něco takového:

< form id = "search" method = "get" >

< label for = "s" >Vyhledávání< / label >

< input type = "search" id = "s" name = "s" / >

< input type = "submit" value = "Vyhledávání" / >

< / form >

V prohlížečích bez podpory se typ vyhledávání zobrazuje jako běžné textové pole, takže není důvod jej tam, kde je to vhodné, nepoužívat.

E-mailové adresy

Není překvapením, že typ e-mailu (type="email") se používá k nastavení jednoho nebo více e-mailové adresy. Podporuje vícenásobný booleovský atribut, který umožňuje zadat více adres oddělených čárkami (s mezerou).

Změňme náš formulář, do polí e-mailu zadejte typ=”e-mail”:

Moje emailová adresa je

< label for = "email" >Moje emailová adresa je< / label >

< input type = "email" id = "email" name = "email" / >

Pokud změníte typ z textového na email, nic se nestane vizuální změny. Vstup stále vypadá jako běžné textové pole. Jsou však různé.

Změny lze zobrazit na dotykovém zařízení. Když se pole e-mailu zaměří, většina dotyková zařízení(například iPad nebo telefon Android s Chromium) zobrazí klávesnici optimalizovanou pro zadávání adresy e-mail. Na klávesnici se zobrazí symbol @, tečka, mezera, ale žádná čárka, jak je znázorněno na obrázku 4.6.

Obrázek 4.6. pole typu e-mailu s vlastní klávesnicí na zařízení pod ovládání iOS

V Prohlížeče Firefox, Chrome, Opera a Internet Explorer 10 Pokud zadáte svůj e-mail nesprávně, zobrazí se chybová zpráva. K tomu dochází, když se pokusíte odeslat formulář s textem, který není rozpoznán jako jedna nebo více adres. Standardní chybové hlášení je znázorněno na obrázku 4.7.

Obrázek 4.7. chybová zpráva o nesprávně zadané e-mailové adrese Prohlížeč Opera(vlevo) a Firefox (vpravo)

Poznámka: Vlastní ověřovací zprávy

Nelíbí se mi to standardní zpráva o chybě prohlížeče? Nastavte svůj pomocí .setCustomValidity(errorMsg). SetCustomValidity přebírá pouze jeden parametr – chybovou zprávu. Pokud jste si nastavili vlastní ověřovací zprávu, pak po správný vstup pro odeslání formuláře musíte vymazat řádek zprávy (hodnota je false):

function setErrorMessages(formControl) ( var validityState_object = formControl.validity; if (validityState_object.valueMissing) ( formControl.setCustomValidity("Nastavte prosím věk (povinné)"); ) else if (validityState_object.rangeUnderflow) (formControl.setCustomValidityC \"jste příliš mladý" ) else if (validityState_object.rangeOverflow) ( formControl.setCustomValidity("Jste příliš starý"); ) else if (validityState_object.stepMismatch) ( formControl.setCustomValidity("Počítání půl narozenin?") ) else ( //pokud je vstup platný, musí být nepravdivý, jinak dojde k chybě formControl.setCustomValidity(""); ) )

funkce setErrorMessages(formControl) (

var validityState_object = formControl . platnost ;

if (validityState_object . valueMissing ) (

formControl. setCustomValidity( "Nastavte prosím věk (povinné)") ;

) else if (validityState_object . rangeUnderflow ) (

formControl. setCustomValidity ("Jsi příliš mladý" ) ;

) else if (validityState_object . rangeOverflow ) (

formControl. setCustomValidity ("Jsi příliš starý" ) ;

) else if (validityState_object . stepMismatch ) (

Nové typy prvků

Jednou z podivných věcí na formulářích HTML je použití jediného prvku s vágním názvem k vytvoření různých ovládacích prvků, od zaškrtávacích políček po textová pole a tlačítka. Konkrétní vzhled ovládacího prvku závisí na atributu typživel .

Pokud prohlížeč narazí neznámý typživel , webový prohlížeč s ním zachází jako s normálním textovým polem. To znamená, že s následujícími třemi prvky zacházejí všechny prohlížeče úplně stejně:

HTML5 využívá tohoto chování. Totiž v živlu bylo přidáno několik nových typů a pokud je některý prohlížeč nepodporuje, bude je považovat za normální textová pole. Chcete-li například zadat e-mailovou adresu, můžete vytvořit pole nový typ e-mail:

Pokud stránku s tímto kódem zobrazíte v prohlížeči, který nepodporuje typ prvku email (například Internet Explorer), toto pole se zobrazí jako běžné textové pole. Prohlížeče, které podporují formuláře HTML5, však umí následující o něco chytřeji:

Nabídka editačních služeb. Například chytrý prohlížeč může poskytnout způsob, jak vybrat e-mailovou adresu adresář a vložte jej do pole adresy.

Zabránit možné chyby. Prohlížeč může například nepřijímat písmena při zadávání pole, jako je číslo, nebo nepřijímat neplatná data, nebo dokonce nutit uživatele k výběru dat z minikalendáře, což je jednodušší a bezpečnější.

Proveďte kontrolu. Prohlížeče umí víc komplexní kontroly poté, co uživatel klikne na tlačítko pro odeslání údajů.

Specifikace HTML5 neposkytuje vývojářům prohlížečů žádné pokyny k prvnímu bodu. Prohlížeče mohou volně ovládat zobrazení a úpravy různé typy data jakýmkoli smysluplným způsobem a různé prohlížeče lze přidat různé drobné vybavení.

Důležitější je ale schopnost kontrolovat a odstraňovat chyby. Prohlížeč, který podporuje formuláře HTML5, by měl minimálně bránit odeslání formuláře obsahujícího data, která porušují pravidla datových typů. Pokud tedy prohlížeč nemůže zabránit chybám přímo při zadávání (podle druhého bodu výše uvedeného seznamu), musí je zkontrolovat, když se uživatel pokouší odeslat formulář (podle třetího bodu).

Bohužel ne všechny moderní prohlížeče splnit tyto požadavky. Některé rozpoznávají nové typy dat a poskytují určité možnosti úprav, ale ne ověřování. Mnoho prohlížečů rozumí jednomu datovému typu, ale jinému ne. Problematické jsou v tomto ohledu především mobilní prohlížeče – poskytují určité vymoženosti úprav, ale žádné ověřovací možnosti.

Níže uvedená tabulka shrnuje nové datové typy a úroveň plné podpory napříč hlavními prohlížeči. Plná podpora znamená, že pokud dojde k porušení datového typu, formulář nebude odeslán.

Podpora nových datových typů v hlavních prohlížečích

Typ dat	TJ.	Firefox	Chrome	Safari	Opera	Safari iOS	Android
e-mail	-	4	10	5	10.6	-	-
url	-	4	10	5	10.6	-	-
vyhledávání(žádné ověření)
tel(žádné ověření)
číslo	-	-	10	5	-	-	-
rozsah	-	-	6	5	11	-	-
datum a čas, datum, měsíc, týden, čas	-	-	10	-	11	-	-
barva	-	-	-	-	11	-	-

Ačkoli mobilní prohlížeče Safari pro iOS a Android nepodporují ověřování, tyto prohlížeče poskytují specializované klávesnice je významnou vymožeností, proto se vyplatí jej používat v aplikacích pro tyto webové prohlížeče speciální typy data.

E-mailové adresy

Datový typ email se používá pro pole určená pro zadávání emailových adres. E-mailová adresa se obecně skládá z řetězce znaků (některé znaky nejsou povoleny). Platná adresa musí obsahovat znak @ a tečku, mezi nimiž musí být alespoň jeden znak a za tečkou alespoň dva znaky:

Typ e-mailu podporuje atribut násobek, který umožňuje zadat více adres do pole. Ale těchto několik adres stále vypadá jako jeden řádek textu, oddělený pouze čárkami.

Nezapomeň na to prázdné hodnoty jsou kontrolovány. Aby se zabránilo prázdné pole adresu, musíte do jejího prvku vložit požadovaný atribut.

URL

Typ url Platí pro vstupní pole URL. Otázka, co představuje platnou adresu URL, je stále žhavě diskutována. Většina prohlížečů však používá poměrně laxní ověřovací algoritmus. Adresa musí obsahovat předponu (která může být buď skutečná, zadejte http:// a fiktivních jako bonk//) a umožňuje zadávat mezery a většinu speciální znaky, kromě dvojtečky.

Některé prohlížeče také nabízejí možné návrhy adres URL v rozevíracím seznamu, které jsou obvykle převzaty z historie nedávno navštívených stránek v prohlížeči.

Vyhledávací pole

Typ vyhledávání platí pro vyhledávací pole. Obvykle jsou určeny pro vstup klíčová slova, které se pak používají k provádění určitého typu vyhledávání. Může to být vyhledávání na celém internetu (jako je Google), vyhledávání na jedné stránce nebo speciální vyhledávací procedura, která zkoumá katalog informací. Ať tak či onak, vyhledávací pole vypadá a chová se téměř přesně jako běžné textové pole.

V některých prohlížečích, jako je Safari, vypadá vyhledávací pole trochu jinak a má zaoblené rohy. Navíc, když uživatel začne zadávat údaje do vyhledávacího pole v Prohlížeč Safari nebo Chrome s pravá strana pole, objeví se malá ikona X, kliknutím na kterou můžete pole vymazat.

Kromě těchto drobných rozdílů není vyhledávací pole nic jiného než běžné textové pole. Hlavním rozdílem je sémantika. Jinými slovy, datový typ vyhledávání se používá k tomu, aby byl název pole jasný pro prohlížeče a podpůrné programy pro uživatele s postižení. Mohou nasměrovat návštěvníky na požadované místo na stránce nebo poskytnout jiné, inteligentnější služby - možná v budoucnu.

Telefonní čísla

Typ dat tel používá se k označení vstupních polí telefonní čísla, které lze prezentovat v nejvíce různé formáty. Některé používají pouze čísla, jiné mezery, pomlčky, znaménka plus a závorky. Tento nedostatek jednotného formátu může být důvodem, proč standard HTML5 nevyžaduje, aby prohlížeče prováděly ověření telefonního čísla. Není přitom jasné, proč obor jako tel neodmítá alespoň písmena.

V současné době je jedinou výhodou použití oboru, jako je tel. poskytovat specializované virtuální klávesnice pro zadávání telefonních čísel mobilní prohlížeče, který obsahuje čísla, ale ne písmena.

Čísla

HTML5 definuje dva číselné datové typy. Typ číslo určeno pro běžná čísla.

Tento typ dat má zjevný potenciál. Běžná textová pole přijímají doslova cokoliv: čísla, písmena, mezery, interpunkci atd. Z tohoto důvodu je jedním z nejběžnějších úkolů ověřování zajistit, aby hodnota byla číslo v určitý rozsah. Ale když zadáte data do pole, jako je číslo, prohlížeč automaticky ignoruje všechny znaky kromě čísel. Níže je uveden příklad kódu pro vytvoření pole tohoto typu:

Stáří *

Samozřejmě existuje mnoho čísel, která nepadnou do každého typu číselných údajů. Například výše uvedené označení umožňuje věk jako 43 000 nebo -6 let, což je poněkud v rozporu s realitou. Tento problém je řešen pomocí atributů min A max. Následující kód poskytuje příklad omezení věku na rozumný rozsah:

Číselná pole obvykle přijímají pouze celá čísla a zlomky jako 30,5 nejsou povoleny. (Ve skutečnosti vám některé prohlížeče ani neumožňují zadat desetinné místo.) Toto chování lze ale také změnit pomocí atributu krok, který označuje krok změny čísla (nahoru nebo dolů). Například nastavením hodnoty kroku na 0,1 můžete zadat hodnoty jako 0,1, 0,2 0,3 atd. Zkuste však odeslat formulář s hodnotou 0,15 a zobrazí se známá chybová zpráva. Výchozí hodnota kroku je 1.

Atribut kroku také ovlivňuje činnost tlačítek polí s počítadlem:

Posuvníky

K ostatním číselný typ HTML5 je rozsah. Stejně jako typ čísla může tento typ představovat celočíselné a zlomkové hodnoty. Podporuje také minimální a maximální atributy pro nastavení rozsahu hodnot. Níže je uveden příklad kódu pro vytvoření pole tohoto typu:

Stáří *

Rozdíl je ve způsobu, jakým pole rozsahu prezentuje své informace. Místo počítadla, jako u číselného pole, chytré prohlížeče zobrazují posuvník:

Chcete-li nastavit hodnotu typu rozsahu, jednoduše přetáhněte posuvník do požadované polohy mezi minimální a maximální hodnoty. Prohlížeče, které tento typ pole podporují, ale žádné neposkytují zpětnovazební informace o nastavená hodnota. Chcete-li tyto informace získat, musíte do svého označení přidat proceduru JavaScript, která reaguje na změny polohy posuvníku (třeba zpracováním události onChange) a poté zobrazí tuto formaci vedle pole.

Datum a čas

HTML5 definuje několik typů dat souvisejících s časem. Prohlížeče, které podporují typy dat, mohou poskytnout pohodlný rozbalovací kalendář, ze kterého si uživatel může vybrat požadované datum a/nebo čas. To nejen odstraňuje nejistotu ohledně správný formát data, ale také zakazuje náhodně (nebo záměrně) stanovit neexistující datum. Chytré prohlížeče umí ještě více, například podporují integraci s osobním kalendářem.

Níže je uveden příklad použití dat:

Datum narození *

Níže uvedená tabulka uvádí šest nových formátů HTML5 pro data a časy s jejich stručným popisem:

Prohlížeče, které podporují datové typy pro data a časy, pro ně také podporují atributy min a max, což vám umožňuje nastavit minimální a maximální data, pokud používáte správný formát data. To je ukázáno na příkladu výše.

Barva

Typ dat barvy se používá pro barevná pole. Typ dat barvy je zajímavá, i když zřídka používaná, sekundární funkce, která umožňuje návštěvníkovi webové stránky vybrat barvu z rozbalovací palety podobné paletě. grafický editor:

Vyberte si svou oblíbenou barvu Barva

Několik neobvyklých atributů prvků

Standard HTML5 uznává několik dalších atributů používaných k ovládání prohlížeče při vyplňování formulářů. Ne všechny tyto atributy jsou podporovány všemi prohlížeči. Je však dobré s nimi experimentovat:

atribut kontroly pravopisu

Některé prohlížeče se pokoušejí vyplnit mezery v uživatelových znalostech pravopisu tím, že zkontrolují pravopis zadaného textu. Zřejmý problém Problém této služby je, že ne veškerý text se skládá ze skutečných slov a malování klikatých červených podtržení může uživateli rychle začít lézt na nervy. Chcete-li prohlížeči zabránit v kontrole pravopisu textu v poli, nastavte atribut kontroly pravopisu na hodnotu false a atribut kontroly na hodnotu true.

Ve výchozím nastavení se různé prohlížeče chovají odlišně, pokud jde o kontrolu pravopisu, ale nastavení atributu kontroly pravopisu vede ke konzistentnímu chování.

atribut automatického doplňování

Některé prohlížeče se snaží ušetřit čas uživatele tím, že při zadávání informací do pole navrhují hodnoty, které byly do tohoto pole dříve zadány. Toto chování není vždy žádoucí – jak zdůrazňuje specifikace HTML5, některé informace mohou být citlivé (např. kódy pro odpalování jaderných střel;) nebo mohou zůstat relevantní pouze po krátkou dobu (např. jednorázové heslo vchod do bankovní systém samoobsluha). U takových polí nastavte hodnotu atributu automatického doplňování na off, abyste zabránili prohlížeči ve výzvě možné možnosti doplnění textu zadaného do pole. A pro automatické doplňování konkrétního pole nastavte jeho atribut autocomplete na on.

Atributy autocorrect a autocapitalize

Tyto atributy se používají k ovládání schopností automatická korekce a používání velkých písmen v některých mobilních prohlížečích, jmenovitě Verze Safari pro iPad a iPhone

vícenásobný atribut

Weboví vývojáři použili atribut multiple s prvkem , včetně typu souboru (pro nahrávání souborů) a e-mailu. V prohlížeči, který tento atribut podporuje, může uživatel vybrat několik souborů k nahrání na server najednou nebo vložit několik e-mailových adres do jednoho pole.

Okraje a odsazení jsou velmi důležité styly při vytváření stránky HTML. Umožňují přesněji umístit prvky, vytvořit rám s potřebnými mezerami atd. Oba styly jsou velmi podobné a plní podobné funkce. Ale stále existují rozdíly.

Prvky mohou být vnořené nebo umístěné vedle sebe. Podívejme se na následující příklad:

Máme dva stoly, citron a modrá barva, umístěné pod sebou. Tabulky se skládají z jedné buňky. V první buňce tabulky je červený blok. Na tomto příkladu se podívejme, jak fungují okraje a odsazení.

Pole jsou nastavena stylem vycpávka. Tento styl se vztahuje pouze na prvky kontejneru, které mohou obsahovat další prvky. Styl umožňuje nastavit okraj mezi okraji prvku a jeho obsahem. Styl okraj umožňuje nastavit odsazení od prvku k nejbližším hranicím jiného prvku. Hranicemi jiného prvku mohou být hranice nadřazeného kontejneru i okraje samotné stránky.

Existuje několik způsobů, jak nastavit tyto styly. Například přímo zadejte velikost všech okrajů nebo odsazení jedním argumentem v nějaké měrné jednotce (px, ex, em, pt, cm atd.):

výplň: 3px;

okraj: 3px;

V tomto případě budou okraje a odsazení na všech čtyřech stranách stejné. Při zadávání dvou argumentů oddělených mezerou:

odsazení: 3px 5px;

okraj: 3px 5px;

první určí velikost okrajů/odsazení nahoře a dole, druhý vlevo a vpravo. Když jsou uvedeny tři argumenty:

odsazení: 3px 5px 2px;

okraj: 3px 5px 2px; první je okraj/odsazení nahoře, druhý je vlevo i vpravo, třetí je dole. Se čtyřmi argumenty:, odsazení: 3px 5px 2px 6px;, okraj : 3px 5px 2px 6px ;, první je okraj/mezera nahoře, druhý je vpravo, třetí je dole, čtvrtý je vlevo. Je snadné si to zapamatovat: první je shora, pak ve směru hodinových ručiček. Kromě toho můžete nastavit okraje a odsazení pro konkrétní okraj samostatně pomocí příslušných stylů:, polstrování-top, vycpávka-vpravo, vycpávka-dno, polstrování-vlevo margin-top

okraj-pravý

okraj-dole

okraj-levý

. Hodnotou těchto stylů může být pouze jeden argument, který určuje velikost okraje/výplně pro danou stranu.

Na obrázku je červený blok uvnitř buňky tabulky a sousedí s jejími okraji, to znamená, že buňka nemá žádné okraje. Nastavíme okraje buněk pomocí stylu:

výplň: 5px;

V důsledku toho se stránka změní na následující:

Podívejme se nyní na odsazení. Dvě tabulky sousedí vedle sebe, pokud je chceme trochu oddálit, můžeme použít odsazení. Zde jsou dvě možnosti: buď nastavit spodní odsazení první tabulky, nebo horní odsazení druhé tabulky. Použijme to druhé:

<margin-top: 5px; <Upozorňujeme, že odsazení nastavujeme konkrétně na tabulku, a ne na buňku tabulky, jako je tomu u polí. Zde je výsledek: <Mimochodem, v prvním případě (mezera mezi červeným blokem a hranicemi nadřazené buňky) by se stejného efektu dalo dosáhnout nastavením odsazení bloku. Obecně platí, že pokud něco není jasné, dejte nám vědět v komentářích. HTML kód testovací stránky:<html > <hlava > <titul > <Test </title> tabulka (šířka: 200px; výška: 150px; okraj: 1px plný #555; border-collapse: sbalit) td (vertikální-zarovnat: nahoře; odsazení: 0px) div (šířka: 100px; výška: 100px; pozadí: červené)</styl> <styl tabulky = "pozadí: limetka" > <tr > <td style = "padding: 5px" > <div style = "margin: 0px" ></div> </td> </tr> </tabulka> <styl stolu = "pozadí: skyblue; margin-top: 5px"> <tr > <td ></td> </tr> </tabulka> </body> </html>

Oblíbené v kategorii: