Ръководство стъпка по стъпка за започване на работа с HTML формуляри

Общ преглед

HTML формулярите се изискват, когато искате да съберете някои данни от човека, който посещава вашия уебсайт. Например, когато се регистрирате / влезете за приложения като Uber, Netflix или Facebook, въвеждате информация като Име , Имейл и Парола чрез HTML формуляри .

Сега ще научим всички необходими елементи за създаване на формуляр.

ЗАБЕЛЕЖКА: Вече добавих стила с помощта на CSS и така елементите ми ще изглеждат по различен начин, но те ще работят по абсолютно същия начин.

Ако искате да направите вашите елементи да изглеждат като моите тогава, можете да намерите моя CSS файл в връзките, дадени по-долу:

Персонализиран CSS: //gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751

Нормализиране на CSS:

//gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Елемент на формуляр

Това е първият елемент, който ще научим. Този елемент обгръща всички останали елементи, които влизат в нашата форма. Това е елементът на формата.

Нашият формуляр няма да изпраща данните никъде, защото не е свързан със сървър. За да свържем формуляра си със сървър и да обработим данните си, можем да използваме всеки език от страна на сървъра като Node, Python, Ruby или PHP. Частта от обработката на данните включва два важни атрибута, които са прикрепени към елемента на формуляра. Нека да разгледаме тези атрибути.

Атрибути:

  1. действие: Атрибутът за действие е уеб адресът (URL) на програма, която обработва информацията, предоставена от нашия формуляр.
  2. метод: Това е HTTP методът, който браузърът използва за изпращане на формуляра, възможните стойности са POST и GET.
  • POST - Данните от тялото на формуляра се изпращат към сървъра.
  • GET - Данните се изпращат вътре в URL адреса и параметрите са разделени с въпросителна.
Забележка: Не можете да имате формуляри, вложени в друг формуляр . Това означава, че не можете да имате елемент вътре в друг елемент.

Входен елемент

Входният елемент е най-често използваният елемент на формуляра. Използва се за създаване на текстово поле, където потребителят може да въведе някаква информация, например имейл , парола и т.н.

Нека направим текстово поле, където потребителят може да въведе името си.

Забележка: Входният елемент е самозатварящ се маркер, така че няма нужда да въвеждате затварящ маркер, за да съответства на началния маркер.

Добавих три атрибута в горния входен таг. Нека да разгледаме всеки един в детайли.

Тип

В тип атрибут показва какъв вход искаме. Ако придадем стойност на текст на атрибута type , тогава имаме предвид това, че стойността, която въвеждаме в полето за въвеждане, е от тип text. Има много възможни стойности за този конкретен атрибут. Някои възможни стойности са имейл, тел за телефон и парола и т.н.

Пример: Когато влезете в някой от акаунтите си (Amazon / Netflix), трябва да въведете две неща: имейл и парола . Така че в този конкретен случай се използва входният елемент. В тип атрибут се дава със стойността на имейл и парола съответно.

документ за самоличност

Атрибутът ID не е задължителен, но е добре да добавите такъв. В някои случаи това е полезно за насочване на елементи с CSS / JavaScript. Атрибутът ID се добавя, за да можем да свързваме етикети с конкретни контроли на формуляра .

име

Атрибутът на името е необходим. Когато формуляр е изпратен на кода от страна на сървъра, сървърът може да разбере данните на формуляра и да обработи стойностите по подходящ начин.

заместител

Това е кратък намек, който се показва в полето за въвеждане, преди потребителят да въведе стойност. Когато потребителят започне да пише в полето за въвеждане, заместителят изчезва.

Нека да видим как изглеждат няколко други основни входни елемента.

Забележка: Използването на различни стойности за атрибута type ще доведе до различни резултати. Например можете да направите въвеждането от тип имейл, текст или парола и т.н. Всички те показват малко по-различно поведение, което ще видите по-долу.

Множество входни елементи (текст, имейл, парола)

Множество входни елементи (текст, имейл, парола)

Текстарен елемент

Понякога един ред текст не е достатъчен и обикновен елемент за въвеждане няма да работи. Например някои уебсайтове имат формуляр за контакт, за да могат хората да въвеждат своите заявки или съобщения. В тези случаи е най-добре да използвате textareaелемента.

The ea> не е самозатварящ се таг, така че трябва да напишем както отварящия, така и затварящия таг. ()

Атрибути:

  • id: Същото, както е споменато по-горе в елемента.
  • име: Същото, както е споменато по-горе в елемента.
  • cols: Указва видимата ширина на текстова област.
  • редове: Указва видимия брой редове в текстова област.

Original text


Можете да видите, че текстовото поле ни позволява да въвеждаме няколко реда. Потребителят може да преоразмерява текстова област, можете да видите на горната илюстрация, че аз преоразмерявам текстовата област.

Забележка: В повечето браузъри елементът textarea може да се преоразмерява.

Бутон Елемент

Бутонният елемент е един от най-важните елементи на формуляра. Без бутон не можете да изпратите никакъв формуляр на сървъра за обработка.

Елементът бутон приема атрибута, наречен тип. Този атрибут приема три стойности подаване , нулиране и бутон .

Атрибути:

  • type = ”reset”: Ще изчисти всички данни на формуляра, когато щракнете върху него.
  • type = ”button”: Той няма поведение по подразбиране и се използва най-вече с JavaScript, за да го програмира за потребителско поведение .
  • type = ”submit”: Поведението по подразбиране на типа подаване е, както подсказва името, да изпратите формуляра и да изпратите всички данни на сървъра.

Елемент на етикета

В момента е невъзможно за потребителя да разбере кой формуляр за контрол какво прави. Няма начин да разберете къде ще въвеждате имейла и къде ще въвеждате паролата. Формата изглежда много непълна и разхвърляна.

Можем да маркираме всеки един от нашите контроли за формуляри с помощта на елемента label.

Най-използваният атрибут с етикет е за.

Атрибути:

  • за: The за атрибут Associates етикета със специален елемент. Начинът, по който съвпада, е по ID . Както можете да видите в горния пример, стойността на атрибута ID , даден на входния елемент, е имейл. Стойността на атрибута for , даден на елемента етикет, също е имейл, така че и двамата са свързани помежду си.
Забележка: Когато щракнем върху етикета, автоматично получаваме фокуса към полето за въвеждане, което е свързано с етикета. Това е поведение по подразбиране.

Сега нашата форма изглежда много добре?.

Изберете Менюта

Понякога, когато създавате формуляр, не искате потребителят да може да въвежда текста. По-скоро може да искате да избират от някои предварително зададени опции, които предоставяте .

Всеки път, когато имате списък с опции, който е по-дълъг от, да речем, четири или пет неща, най-добре е да изберете менюто за избор, тъй като това спестява място.

Да кажем, че нашата форма е насочена към студенти, които ще търсят прием в университет. Искаме да позволим на студентите да избират от предварително дефиниран списък с университетски програми.

Елементът на менюто за избор се прави с отваряне и затваряне ct> таг.

ct> - Избраният елемент изобразява падащо меню n, което съдържа избираеми опции . Избраният елемент сам по себе си няма да направи нищо. Този елемент на формуляр всъщност се нуждае от допълнителни елементи вътре в него, точно като е

    еле MENT нужди и
  • елементи. Елементите ще се постави вътре в изберете д lement се наричат опции елементи.

    Атрибути:

    • име: Същото, както е споменато по-горе в елемента.

    on> - Елементът за опция представлява един от изборите, които потребителят може да избере в менюто за избор . В & л т; опция> ELEM вх използва за attri Bute в alled стойност.

    Атрибути:

    • стойност: Когато изпращате формуляр към сървърния код, всеки елемент на формуляр има свързана стойност за въвеждане на текст и текстови области. Тази стойност е каквато потребителят въведе в полето. Тъй като обаче създаваме тези предварително дефинирани опции, трябва да посочим как трябва да изглежда стойността, когато е изпратена. Така че, ние използваме атрибута value , за да зададем стойностите на предварително дефинирани опции.

    Сега имаме етикет Select Courses с менюто за избор, което току-що създадохме. Сега можем също да организираме нашия списък в логически групи снагоре> елемент.

    Атрибути:

    • етикет: Името на групата опции. В дадения по-долу пример нашият списък с опции е разделен на две групи с етикет „Инженеринг и управление“.

    В примера, даден по-долу

    Радио бутони

    Избраните менюта са чудесни, ако имате много опции. Ако имате нещо като 5 или по-малко опции, по-добре е да използвате радиобутони.

    Разликата между Select Menu и Radio Button е, че радиобутоните ви показват всички опции наведнъж. Подобно на менюто за избор, потребителят може да избира само от един от тях.

    Атрибути:

    • име: Същото, както е споменато по-горе в елемента.
    • стойност: Тъй като създаваме тези предварително дефинирани опции, трябва да посочим как трябва да изглежда стойността, когато е изпратена. Така че, ние използваме атрибута value , за да зададем стойностите на предварително дефинирани опции.
    Забележка: Ако изберете една опция и след това се опитате да изберете друга опция, ще видите, че тя отменя предишната опция. Начинът, по който той знае да прави това, е защото имаме атрибута name абсолютно същият. Така че той знае, че тези два радио бутона са част от една и съща група. Забележка: Името трябва да е същото, ако искаме радио бутоните да бъдат част от същата група радио бутони.

    Квадратчета за отметка

    Понякога може да имате група от предварително дефинирани опции. Искате потребителят да може да избира множество опции, а не само една от тях. Тук полезните квадратчета са полезни.

    Атрибути:

    • име: Същото, както е споменато по-горе в елемента.
    • стойност: Тъй като създаваме тези предварително дефинирани опции, трябва да посочим как трябва да изглежда стойността, когато е изпратена. Така че, ние използваме атрибута value , за да зададем стойностите на предварително дефинирани опции.
    • проверено: По подразбиране въвеждането на отметка не е отметнато. Можете да зададете състоянието по подразбиране на проверено, като използвате атрибута, наречен проверен . Не забравяйте, че това е булев атрибут.

    В примера, даден по-долу, използвах етикета за всяка отделна опция. Свързах квадратчето за отметка и етикет, използвайки атрибута for на етикета и id атрибута на квадратчето .

    Забележка: Може да е трудно да щракнете върху малко квадратче за отметка. Препоръчително е да увиете елемент около квадратчето. Ако щракнем върху етикета, тогава и нашето квадратче за отметка ще бъде отметнато или премахнато. Не съм го правил по-долу, но можете да го направите, за да направите UX b etter.

    Разлика между отметка и радио бутон

    1. Полето за отметка може да съществува самостоятелно , докато радиобутоните могат да се показват само като група (там трябва да има минимум 2 радио бутона).
    2. Поставянето на отметка не е задължително, но избирането на един от радио бутона е задължително .

    Пълният формуляр

    Научихме за много елементи на HTML формуляра и разгледахме най-важното.

    Не се притеснявайте да запомните всичко. Почти никой професионален уеб разработчик не може да назове всеки атрибут или елемент. По-важното от запаметяването е да се научите как да търсите нещата в документацията, когато имате нужда от тях.

    Можете да опитате да добавите свой собствен CSS, за да накарате този формуляр да изглежда така, както искате.

    Можете да научите повече за формулярите в връзката, дадена по-долу

    HTML форми

    Този модул предоставя поредица от статии, които ще ви помогнат да овладеете HTML форми. HTML формулярите са много мощен инструмент за ... developer.mozilla.org

    Надявам се, че този пост е бил информативен и полезен. Ще се радвам да чуя вашите отзиви!

    Благодаря ви, че прочетохте!