От време на време попадам на текстови полета, които са достатъчно необичайни, за да направят общи характеристики HTML и CSS не е възможно. Има криви, градиенти, сенки и други графични звънци и свирки. И в тази статия ще ви кажа, как да направите красиво текстово поле на HTML страница , който има всички тези графични звънци и свирки.
На първо място, трябва да направите 3
снимки от текстовото поле:
Ляв ъгъл . Трябва да докосне самото начало на текстовото поле (например сянката му) отляво и да продължи до момента, в който вече няма закръгляване.Десен ъгъл . Подобно на левия ъгъл, но от другата страна.Лента за тяло . Тази лента трябва да е широка 1 пиксел и трябва да се изреже някъде по средата на текстовото поле.Много важен момент е това всичките 3 снимки трябва да са с еднаква височина . Следващият етап е HTML код :
Както можете да видите, направихме маса от 1-ви ред и 3 колони . В първата колона планираме левия ъгъл, във втората - самото текстово поле, в третата - десния ъгъл.
И сега CSS код :
Input_left(
Ако сте направили всичко правилно, сега можете да се любувате на красивото текстово поле на вашата страница. На практика този метод се използва постоянно (не само за текстови полета), така че всеки дизайнер на оформление трябва да го знае.
HTML форми са контроли, които се използват за събиране на информация от посетителите на уебсайта.
Уеб формулярите се състоят от набор от текстови полета, бутони, списъци и други контроли, които се активират с щракване на мишката. Технически, формулярите предават данни от потребителя към отдалечен сървър.
За да получавате и обработвате данни от формуляри, езиците за уеб програмиране, като напр PHP , Perl .
Преди появата на HTML5 уеб формулярите бяха колекция от няколко елемента имейл и URL адреси.
HTML5 формуляри реши повечето от тези общи проблеми благодарение на наличието на нови атрибути, предоставящи възможност за промяна външен вид елементи на формата поради CSS3 .
Създаване на HTML5 формуляр
1. Елемент . Не изисква никакво въвеждане, тъй като е контейнер, който държи всички контроли на формуляра заедно - полета . Атрибутите на този елемент съдържат информация, която е обща за всички полета на формуляра, така че полетата, които са логически комбинирани, трябва да бъдат включени в един формуляр.
Таблица 1. Атрибути на тагове
2. Групиране на елементи от формата
елемент
... предназначени да групират елементи, свързани един с друг, като по този начин разделят формата на логически фрагменти.
Всяка група от елементи може да бъде наименувана с помощта на елемента , който идва веднага след маркера
. Името на групата се появява в лявата горна граница . Например, ако в елемент Информацията за контакт се съхранява:
Таблица 2. Атрибути на тагове
Атрибут
Значение/Описание
деактивиран
Ако атрибутът присъства, тогава група от свързани елементи на формуляр, разположени вътре в контейнера , забранено за попълване и редактиране. Използва се за ограничаване на достъпа до определени полета на формуляр, съдържащи предварително въведени данни. Атрибутът се използва без посочване на стойност - .
форма
име
Определя Име , който ще се използва за препращане към елементи в JavaScript или за препращане към данни от формуляр, след като формулярът бъде попълнен и изпратен. Той е аналогичен на атрибута id.
3. Създайте полета на формуляр
елемент
С помощта на CSS стилове можете да промените размера на шрифта, типа на шрифта, цвета и други свойства на текста, както и да добавите граници, цвят на фона и фоново изображение . Ширината на полето се определя от свойството width.
Таблица 3. Атрибути на тагове Атрибут
Значение/Описание
приемам
Определя типа файл, разрешен за изпращане към сървъра. Посочва се само за
алт
Определя алтернативен текст за изображения, посочени само за
автоматично довършване
Отговаря за запомнянето на стойностите, въведени в текстовото поле, и автоматичното им заместване при следващото въвеждане:
автофокус
Позволява ви да се уверите, че в заредената форма едно или друго поле за въвеждане вече има фокус (избрано е), като е готово за въвеждане на стойност.
проверено
Атрибутът проверява дали квадратчето за отметка по подразбиране е маркирано при зареждане на страницата за полета като type="checkbox" и type="radio".
деактивиран
форма
Стойността на атрибута трябва да е равна на атрибута id на елемента
образуване
Указва url на файла, който ще обработва данните, въведени в полетата при подаване на формуляра. Задайте само за полета type="submit" и type="image". Атрибутът замества стойността на атрибута за действие на самия формуляр.
formenctype
Определя как данните от полетата на формуляра ще бъдат кодирани, когато бъдат изпратени до сървъра. Заменя стойността на атрибута enctype на формуляра. Задайте само за полета type="submit" и type="image". Опции:
formmethod
Атрибутът указва метода, който браузърът ще използва за изпращане на данни от формуляра към сървъра. Задайте само за полета type="submit" и type="image". Заменя стойността на атрибута на метода на формуляра. Опции:
formnovalidate
Указва, че данните от полетата на формуляра не трябва да се проверяват, когато формулярът бъде изпратен. Заменя стойността на атрибута novalidate на формуляра. Може да се използва без посочване на стойност на атрибут.
formtarget
Определя къде да се покаже отговорът, получен след изпращане на формуляра. Задайте само за полета type="submit" и type="image". Заменя стойността на целевия атрибут на формуляра.
височина
Стойността на атрибута съдържа броя на пикселите, без да посочва мерна единица. Задава височината на поле на формуляр от тип type="image" , например,
списък
Е препратка към елемент , съдържа своя id Позволява ви да предоставите на потребителя няколко опции за избор, когато той започне да въвежда стойност в съответното поле.
макс
Позволява ви да ограничите разрешеното въвеждане на числови данни до максимална стойност; стойността на атрибута може да съдържа цяло число или дробно число. Препоръчва се този атрибут да се използва заедно с атрибута min. Работи с следните видове полета: число, диапазон, дата, дата и час, дата и час-локално, месец, час и седмица.
максимална дължина
Атрибутът определя максималния брой знаци, въведени в полето. Стойността по подразбиране е 524288 знака.
мин
Позволява ви да ограничите разрешеното цифрово въвеждане до минимална стойност.
множество
Позволява на потребителя да въвежда множество стойности на атрибути, разделени със запетая. Отнася се за файлове и имейл адреси. Посочено без стойност на атрибут.
име
Указва името, което ще се използва за достъп до елемента
модел
Позволява ви да определите използването регулярен израз
малки букви , числото във фигурни скоби показва, че имате нужда от три малки букви, последвани от тире, след което три числа, вариращи от 0 до 9.
контейнер
Съдържа текста, който се показва в полето за въвеждане, преди да бъде попълнено (най-често това е подсказка).
само за четене
Не позволява на потребителя да променя стойностите на елементите на формуляра; изборът и копирането на текст все още са налични. Посочено без стойност на атрибут.
изисква се
Показва съобщение, което показва, че това поле е задължително. Ако потребителят се опита да изпрати формуляра без да въведе необходимата стойност в това поле, на екрана ще се покаже предупредително съобщение. Посочено без стойност на атрибут.
размер
Задава видимата ширина на полето в знаци. Стойността по подразбиране е 20. Работи със следните типове полета: текст, търсене, телефон, url, имейл и парола.
src
Указва URL адреса на изображението, използвано като бутон за изпращане на формуляр. Посочва се само за полето
стъпка
Използва се за елементи, които изискват въвеждане на числови стойности, показва количеството, с което стойностите се увеличават или намаляват по време на процеса на регулиране на диапазона (стъпка).
тип
бутон - създава бутон.
отметка - превръща поле за въвеждане в отметка, която може да бъде отметната или изчистена, напр.
цвят - Генерира цветови палитри в поддържащи браузъри, позволявайки на потребителите да избират цветови стойности в шестнадесетичен формат.
дата — позволява ви да въведете дата във формат дд.мм.гггг.
datetime-local - позволява ви да въведете дата и час, разделени с главни букви английско писмо T по образеца дд.мм.гггг чч:мм.
имейл - Браузърите, които поддържат този атрибут, ще очакват потребителят да въведе данни, които съответстват на синтаксиса на имейл адресите.
файл - позволява ви да изтегляте файлове от компютъра на потребителя.
скрит - Скрива контролата, която не се показва от браузъра и не позволява на потребителя да променя стойностите по подразбиране.
изображение - създава бутон, който ви позволява да вмъкнете изображение вместо текст върху бутона.
месец - Позволява на потребителя да въведе годината и номера на месеца, като използва модела гггг-мм.
номер - предназначен за въвеждане на цели числа. Неговите атрибути min , max и step определят съответно горната, долната граница и стъпката между стойностите. Тези атрибути се приемат за всички елементи, които имат цифрови индикатори. Техните стойности по подразбиране зависят от типа на елемента.
парола - създава текстови полета във формуляра, като символите, въведени от потребителя, се заменят със звездички, водещи символи или други, инсталиран от браузъра икони.
радио - създава превключвател - контрол под формата на малък кръг, който може да се включва или изключва.
диапазон - ще ви позволи да създадете интерфейсен елемент като плъзгач, min / max - ще ви позволи да зададете диапазона за избор
нулиране - създава бутон, който изчиства полетата на формуляра от въведените от потребителя данни.
търсене - обозначава поле за търсене, по подразбиране полето за въвеждане е с правоъгълна форма.
submit - създава стандартен бутон, който се активира с щракване на мишката. Бутонът събира информация от формата и я изпраща за обработка.
текст – Създава текстови полета във формуляр, като извежда едноредово текстово поле за въвеждане на текст.
време - позволява ви да въведете час в 24-часов формат, като използвате модела чч:мм. В поддържащите браузъри се появява като контрола на цифрово поле за въвеждане със стойност, която може да се редактира с мишката, и позволява да се въвеждат само стойности за време.
url—полето е предназначено за посочване на URL адреси.
седмица - Съответният инструмент за показалец позволява на потребителя да избере една седмица от годината, след което ще осигури въвеждане на данни във формат nn-yyyy. В зависимост от годината броят на седмиците може да бъде 52 или 53.
стойност
Определя текста, който се появява на бутон, в поле или в свързан текст. Не е посочено за полета от тип файл.
ширина
Стойността на атрибута съдържа броя на пикселите. Позволява ви да зададете ширината на полетата на формуляра.
4. Полета за въвеждане на текст
елемент използва се вместо елемент
Таблица 4. Атрибути на тагове
котка
7. Бутони
елемент ... създава бутони с възможност за кликване. За разлика от създадените бутони можете да поставите съдържание - текст или изображение.
За правилно показване на елемента различни браузъри трябва да посочите атрибута type, например,
Бутоните позволяват на потребителите да изпращат данни във формуляр, да изчистват съдържанието на формуляра или да предприемат други действия. Можете да създавате граници, да променяте фона и да подравнявате текст върху бутон.
Таблица 9. Атрибути на тагове
Атрибут
Значение/Описание
автофокус
Поставя фокус върху бутона, когато страницата се зареди.
деактивиран
Деактивира бутона, което го прави невъзможен за кликване.
форма
Показва една или повече форми, към които принадлежи този бутон. Стойността на атрибута е идентификаторът на съответната форма.
образуване
Стойността на атрибута съдържа URL адреса на манипулатора на данни на формуляра, изпратен при щракване върху бутона. Само за тип бутон type="submit" . Заменя стойността на атрибута за действие, указан за елемента
formenctype
Задава типа кодиране на данните от формуляра, преди да ги изпрати на сървъра, когато се щракнат върху бутони като type="submit". Заменя стойността на атрибута enctype, определен за елемента
formmethod
Атрибутът указва метода, който браузърът ще използва за изпращане на формуляра. Заменя стойността на атрибута на метода, указан за елемента
formnovalidate
Атрибутът указва, че данните от формуляра не трябва да бъдат валидирани при изпращане. Указва се само за бутони от типа type="submit".
formtarget
Атрибутът указва в кой прозорец да се покаже резултатът след изпращане на формуляра. Указва се само за бутони от типа type="submit". Заменя стойността на целевия атрибут, посочен за елемента
име
Задава името на бутона, стойността на атрибута е текст. Използва се за връзка към данни от формуляра, след като формулярът е бил изпратен, или за връзка към даден бутон(и) в JavaScript.
тип
Определя типа бутон. Възможни стойности:
стойност
Задава стойността по подразбиране, изпращана при щракване върху бутона.
8. Полета за отметка и радио бутони във формуляри
Квадратчетата за отметка във формуляри се задават с помощта на конструкцията
Квадратчетата за отметка, за разлика от радио бутоните, могат да бъдат зададени на няколко в една форма. Ако атрибутът checked е указан за квадратчета за отметка, тогава, когато страницата се зареди, квадратчетата за отметка в съответните полета на формуляра вече ще бъдат избрани.
елемент използва се при прилагане на селекция чрез радио бутони и квадратчета за отметка. Можете да изберете елемента, който искате, като просто щракнете върху текста, свързан с него. За да направите това, трябва да поставите .
CSS предлага на уеб разработчика огромни възможности за проектиране на HTML страници. Те ще изглеждат сложни за начинаещ, но ако внимателно и методично ги разберете, технологията на стиловия лист ще бъде завладяна и оформлението на уебсайта вече няма да създава затруднения. Едно от незаменимите свойства на CSS -
подплата . Използва се за задаване на полетата на блокове на HTML страници.
Какво представляват блоковете? Обектът е изграден от тухли - блокчета. Освен това всеки елемент, независимо от съдържанието му, трябва да има правоъгълна форма. Тоест, всички изображения и надписи са умствено затворени от разработчика в „кутии“, подреждайки които той създава уеб страница.
Най-често блоковете се определят чрез тагове
,
-, . Свойствата на CSS се прилагат към всеки такъв елемент:
подплата ,
марж ,
граница ,
ширина и други. Ширината на правоъгълния блок се определя от свойството
ширина , тогава всеки елемент е украсен с полета, които са очертани с помощта на атрибута
граница. И накрая, компонент на страница може да има външни полета или подложка -
марж , отделяйки го от друг блок.
Синтаксис на свойството за подпълване на CSS Създателите на Cascading Style Sheets са предоставили няколко опции за писане на атрибут в зададени полета. Можете да направите празна зона вътре в блок с осем по различни начини ! Таблицата по-долу показва примери за всяка опция и дава кратко обяснение за тях.
Пример за употреба
Обяснение
подложка: 15 px;
Ако атрибутът е последван от едно число, това означава, че елементът ще има равни полета от всички страни. Записвайте px предполага, че стойността е посочена в пиксели. Тоест накрая блокът ще има полета от 15 пиксела.
подложка: 18 px 36 px;
Първото от двете числа показва, че вертикалните полета ще бъдат 18 пиксела, страничните полета ще бъдат два пъти по-големи - 36 пиксела.
подложка: 6 px 12 px 18 px;
Средното число е стойността на полетата отстрани (ляво и дясно), другите две са вертикалните полета. В този случай първото число (6 px) се отнася за горното поле, а последното (18 px) се отнася за долното.
подложка: 6 px 12 px 18 px 36 px;
CSS формуляр за запис на собственост подплата , който съдържа четири числа, ви позволява да зададете полета от всички страни на блока. Числовите стойности се прилагат последователно към горното поле и след това по посока на часовниковата стрелка надясно, долу и наляво.
padding-left: 14 px;
Послепис наляво говори само за себе си - маржът ще бъде зададен само отляво на елемента.
padding-right: 14 px;
Подобно на предишната опция за запис - полето ще бъде създадено само от дясната страна на блока.
padding-top: 14 px;
Записът определя полето в горната част.
padding-bottom: 14 px;
Записът определя полето по-долу.
Трябва да се отбележи, че подложката по подразбиране в CSS е нула. Този атрибут не се наследява, т.е. трябва да бъде зададен за всеки блок. В допълнение към обичайните и разбираеми пиксели, ширината на празното пространство около блоковете също е посочена в относителни единици. Например в горните примери можете да напишете 5% - в резултат на това ширината на полето ще бъде изчислена автоматично от браузъра.
Как да използвате имота? И така, разгледахме формите за писане на атрибут, но как да го използваме на HTML страница? Първият вариант е по-„красив“, когато всичко, свързано с CSS технологията, не е написано в HTML, а е поставено в отделен файл със съответното разширение.
Вторият вариант е да пишете директно в етикета<стил >. CSS подплата в този случай се посочва, както следва:
<
див стил=" подложка: 22 px">
Дизайнерът на оформление избира как да напише атрибута. Във всеки случай трябва да знаете всички начини за използване на свойството за дефиниране на полета, за да го използвате, ако е необходимо.
В тази глава ще говорим за полета (свойство марж ) и подложка (свойство подплата ) елемент. Тези два имота са много сходни един с друг, но все пак са две напълно различни свойства.
Нека разберем тези понятия...
поле ( марж ) - Това е разстоянието от външната граница на елемента до границата на прозореца на браузъра или родителския елемент... е, границата на блока, в който е вложен нашият елемент.
отстъп ( подплата ) - Наричат разстоянието от вътрешната граница на елемент до съдържанието му от текст, картини, таблици..
Фигурата ясно показва тези разстояния, както и пространството, заемано от бордюра ( граница ) не бива да забравяме и него.
Разстояния марж И подплата са посочени:
px - В пиксели или други валидни CSS мерни единици.%
- В проценти.авто - Размерът на полетата и отстъпите се изчислява автоматично от браузъра.Нека се опитаме да направим същото нещо, както е показано на фигурата, използвайки блокове
и CSS свойства.
Полета и подложка
Опитайте да промените стойностите на свойствата марж И подплата и ще разберете какво е какво.. и ако вече е ясно, да продължим..
Възможни стойности на марж и подложка.
В примера по-горе, присвояване на свойства марж И подплата използвайки една стойност, ние определихме полетата и подложката на елемент от четирите страни. За да се посочи различни размери полета и подложки за всяка страна на елемента, трябва да посочите два, три или четири аргумента, разделени с интервал. Освен това, в зависимост от броя на стойностите, резултатът ще бъде различен.
Ето примери:
поле: 5px ; - една стойност .
поле: 5px 40px; - две значения.
поле: 5px 40px 20px; - три значения.
поле: 5px 40px 20px 1px; -четири значения.
СЪС подплата въпросът следва същия принцип като при марж , подложката от вътрешните граници на елемента до съдържанието приема размери в зависимост от броя на аргументите и техните стойности.
Полета и подложка
Като разбираме мислите в смисъл на смисъл, има смисъл да мислим за немислимото!
Марж и подложка на дъщерни свойства.
CSS свойства марж И подплата са основни и имат редица дъщерни свойства.
U марж това:
margin-top - поле от горната граница на родителския елемент,margin-left - поле от лявата граница на родителския елемент,margin-right - поле от дясната граница на родителския елемент,margin-bottom - Поле от долната граница на родителския елемент.И подплата съответно:
подложка-отгоре - Отстъп от горната граница на елемента към неговото съдържание,padding-left - Отстъп от лявата граница на елемента до неговото съдържание,padding-right - Отстъп от дясната граница на елемента към неговото съдържание,подплънка-отдолу - Отстъп от долната граница на елемента към неговото съдържание.Е, мисля, че е ясно... ако има нужда да се определи отстъпът или полето от една единствена страна на елемент, по-добре е да се използва едно от горните свойства.
Полета и подложка
Като разбираме мислите в смисъл на смисъл, има смисъл да мислим за немислимото!
Малко хора знаят колко много трябва да знаем, за да разберем колко малко знаем!
Полетата и подложките са един от основните компоненти на дизайна на уебсайта и има няколко насоки, които трябва да следвате в това отношение.
Избягвайте къси и още повече нулеви подложки от съдържанието до границите на елемента, особено за текстови блокове. Текст с малки полета и отстъпи е труден за четене и лепкав.
Спазвайте правилата за пропорционалност и съизмеримост на полетата и отстъпите както за отделен елемент, така и за цялата страница (композиция от елементи) като цяло.
Един от начините да фокусирате вниманието на посетителя на страницата върху мястото, от което се нуждаете, е да използвате по-големи отстъпи от обикновено; такъв контраст ще принуди зрителя да погледне и да обърне внимание на „специални“ места в текста.
В предишната глава споменахме такива CSS свойства , като поле (поле) и подложка (отстъп). Сега ще ги разгледаме по-подробно и ще разгледаме как се различават един от друг и какви характеристики имат.
Можете да създавате интервали между елементите по един или друг начин, но ако padding е отстъпът от съдържанието до ръба на блока, тогава margin е разстоянието от един блок до друг, междублоковото пространство. Екранната снимка показва ясен пример:
Подложката отделя съдържанието от границата на блока, а полето създава празнини между блоковете
Както можете да видите, полетата и CSS подложка се различават един от друг, въпреки че понякога без разглеждане на кода е невъзможно да се определи кое свойство се използва за задаване на разстоянието. Това се случва в случаите, когато рамката или фонът на блока със съдържание липсват.
Съществуват следните свойства за задаване на поле или подложка в CSS от всяка страна на елемент:
Подплата:
подложка-отгоре: значение;
padding-right: значение;
padding-bottom: значение;
padding-left: значение;
Полета:
поле отгоре: значение;
margin-right: значение;
марж-отдолу: значение;
поле-ляво: значение;
Стойностите могат да бъдат зададени във всякакви CSS единици - px, em, % и т.н. Пример: margin-top: 15px.
Има и много удобно нещо като стенограма за CSS за марж и подложка . Ако трябва да зададете полета или подложки на четирите страни на елемент, не е нужно да пишете свойството за всяка страна поотделно. Всичко е направено по-просто: за поле и подложка можете да посочите 1, 2, 3 или 4 стойности наведнъж. Броят на стойностите определя как се разпределят настройките:
4 стойности: подложка се задава за всички страни на елемента в следната последователност: отгоре, отдясно, отдолу, отляво: подложка: 2px 4px 5px 10px;
3 стойности: подложката се задава първо за горната страна, след това едновременно за лявата и дясната страна и след това за долната: подложка: 3px 6px 9px;
2 стойности: подложката се задава първо едновременно от горната и долната страна, а след това едновременно отляво и отдясно: подложка: 6px 12px;
1 стойност: еднаква подложка е зададена за всички страни на елемента: подложка: 3px;
Същите правила важат за свойството CSS margin. Моля, обърнете внимание, че можете също да използвате отрицателни стойности за марж (например -3px), което понякога може да бъде доста полезно.
Свиване на полето
Представете си ситуацията: две блоков елемент са разположени един върху друг и им се дават марж полета. Горният блок е зададен на margin: 60px, а долният блок е зададен на margin: 30px. Би било логично да се предположи, че двете гранични полета на два елемента просто ще се докоснат и в резултат на това разстоянието между блоковете ще бъде равно на 90 пиксела.
Нещата обаче са различни. Всъщност в такава ситуация се получава ефект, който се нарича колапс, когато от две съседни полета от елементи се избира най-големият по размер. В нашия пример крайното разстояние между елементите ще бъде 60 пиксела.
Разстоянието между блоковете е равно на по-голямата от стойностите
Свиването на полето работи само за горното и долното поле на елементите и не се прилага за полетата от дясната и лявата страна. Крайната стойност на разликата се изчислява по различен начин в различни ситуации:
Когато и двете стойности на маржа са положителни, полученият размер на маржа ще бъде равен на по-голямата стойност.
Ако една от стойностите е отрицателна, тогава за да изчислите размера на полето, трябва да получите сумата от стойностите. Например със стойности от 20px и -18px размерът на полето ще бъде:
Ако и двете стойности са отрицателни, модулите на тези числа се сравняват и се избира числото с по-голям модул (следователно по-малкото от отрицателните числа). Пример: трябва да сравните стойностите на полетата -6px и -8px. Модулите на сравняваните числа са съответно 6 и 8. От това следва, че 6 -8. Полученият размер на полето е -8 пиксела.
В случай, че стойностите са посочени в различни единици CSS се свеждат до единица, след което се сравняват и се избира по-голямата стойност.
Размерът на маржа за дъщерните елементи се определя по още по-интересен начин: ако дъщерният марж има по-голям марж от своя родител, тогава му се дава приоритет. В този случай размерите на горното и долното поле на родителя ще бъдат същите като тези, посочени за детето. В този случай няма да има дистанция между родител и дете.
Нов
Как да възстановите менструалния цикъл след раждане:
ориз. 1. Подобрени уеб формуляри с HTML5