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

HTML формуляр

Преглед

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

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

ЗАБЕЛЕЖКА: Вече добавих Styling с помощта на CSS и така елементите ми ще изглеждат различно, но те ще работят по абсолютно същия начин.
Ако искате да направите вашите елементи да изглеждат като моите, можете да намерите моя CSS файл в връзките, дадени по-долу:
Персонализиран CSS: https://gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751
Нормализиране на CSS:
https://gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Формен елемент

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

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

Атрибути:

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

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

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

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

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

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

Тип

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

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

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

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

име

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

контейнер

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

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

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

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

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

Елементи за въвеждане без заместител (отляво) и с атрибут на заместител (вдясно)

Textarea Element

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