Как да създадете формуляр в HTML

Как да създадете формуляр в HTML

Събирането на данни от потребител на уебсайт може да се извърши по няколко различни начина. Формулярите на уебсайтове могат да имат проста функция, като например абониране на потребител за бюлетин, или по -сложна цел, като например да действате като формуляр за кандидатстване за работа.





Едно обаче, което всички тези прости до сложни форми имат общо, е HTML и по -конкретно HTML етикет.



Използване на маркера за формуляр

The tag е HTML елемент, който се използва като контейнер за затваряне на други елементи, които могат да се разглеждат като градивни елементи за формуляри. Някои от тези основни елементи включват маркер, таг и етикет.





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

Използване на примера с етикет





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



Използване на маркера

The tag се използва за описание на данните във всяко поле за въвеждане във форма. Този маркер има за атрибут, който се използва за подобряване на функционалността на формуляра.

Свързани: Най -добрите безплатни онлайн HTML редактори за тестване на вашия код



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

Използване на примера с етикет


First Name:

В горния пример можете да видите, че за на атрибута се присвоява стойността fname . Следователно, ако създадете поле за въвеждане с fname id, това поле ще бъде осветено всеки път, когато кликнете върху Първо Име етикет.



Използване на маркера

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

Свързани: Как да създадете подреден формуляр в CSS

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

  • Текст
  • Номер
  • електронна поща
  • Образ
  • Дата
  • Поле за отметка
  • Радио
  • Парола

Използване на етикета Пример


First Name:

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

The документ за самоличност атрибутът е уникален идентификатор за текстовото поле и е важен, защото осигурява достъп до този елемент от CSS файл. The име атрибут също е уникален идентификатор; атрибутът name обаче се използва за взаимодействие с елемент от страна на сървъра на разработката.

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

Използване на елемента за отметка

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

Използване на пример за елемент на квадратчето за отметка


Programming Languages:
Java
JavaScript
Python

В горния пример всеки от елементите на квадратче за отметка има атрибут на стойност и това е важно, защото помага да се разграничи всяка опция за отметка от колекцията. Следователно, ако потребителят избере „Java“ от горните опции, данните ще го отразят.

Използване на етикета и радиоелементите

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

Радио елементът е по -близо до елемента на квадратчето за външен вид, но с радио елемента имате кръгове вместо квадратчета.

The tag произвежда това, което по същество е падащо поле, което позволява на потребителя да избере единична стойност.

Използване на пример за етикет и радио елемент


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer

Използване на елемента Дата

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

Използване на пример за елемент на дата


Използване на елемента имейл и парола

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

Електронният елемент следи въведените в текстовото поле данни и гарантира, че всяко подаване отговаря на стандартното изискване за имейл адрес; което означава да има локална част, последвана от символа @ и завършваща с домейн.

Пример за използване на имейл елемент


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

Елементът парола превръща знаците в звездички, докато се въвеждат в текстовото поле. Следователно, ако екранът на компютъра ви се вижда от други хора, те няма да видят въведената от вас парола.

Използване на пример за елемент на парола


Използване на маркера на бутона

Във форма обикновено има два различни типа бутони. Първият е бутонът за изпращане, който изпраща въведените във формуляра данни към стойността, присвоена на атрибута за действие (който се намира в < форма> етикет).

Пример за бутон за изпращане

Submit

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

Пример за бутон за нулиране

Reset

Създаване на формуляр

За да създадете прост формуляр в HTML, ще трябва да включите всички споменати по -горе елементи в a етикет.

Създаване на пример за формуляр






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset




Кодът по -горе ще създаде следната форма:

как да получите подвижен тапет windows 10

Сега можете да създадете прост формуляр в HTML

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

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

Дял Дял Туит електронна поща Кодът за основни свойства на CSS3

Овладейте съществения CSS синтаксис с нашия лист за мами за свойства на CSS3.

Прочетете Напред Свързани теми
  • Програмиране
  • HTML
  • Уеб разработка
  • Уроци по кодиране
За автора Кадейша Кийн(21 статии са публикувани)

Kadeisha Kean е разработчик на софтуер с пълен набор и технически/технологичен писател. Тя има отличителната способност да опростява някои от най -сложните технологични концепции; производство на материал, който може лесно да бъде разбран от всеки начинаещ в технологиите. Тя е запалена по писането, разработването на интересен софтуер и пътуването по света (чрез документални филми).

Още от Kadeisha Kean

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате