Како створити образац у ХТМЛ -у

Како створити образац у ХТМЛ -у

Прикупљање података од корисника веб странице може се обавити на неколико различитих начина. Обрасци на веб страницама могу имати једноставну функцију, као што је претплаћивање корисника на билтен, или сложенију сврху, као што је пријава за посао.





Међутим, једна ствар која је заједничка свим овим једноставним и сложеним облицима је ХТМЛ и тачније ХТМЛ таг.



Коришћење ознаке обрасца

Тхе таг је ХТМЛ елемент који се користи као контејнер за затварање других елемената који се могу сматрати саставним елементима за обрасце. Неки од ових основних елемената укључују ознака, ознака и таг.



Тхе ознака има важан атрибут који доприноси њеној функционалности. Овај атрибут се назива радња и користи се за идентификацију датотеке у коју ће се проследити подаци унети у образац.

Користећи пример ознаке





Горњи пример показује како да користите ознаку обрасца у својим пројектима. Једно од главних решења је да ако отворите ознаку обрасца, не заборавите да је затворите. Ово ће створити структуру обрасца и такође осигурати да се подаци унети у образац правилно обраде.



Коришћење ознаке

Тхе таг се користи за описивање података у сваком пољу за унос у облику. Ова ознака има за атрибут, који се користи за побољшање функционалности обрасца.

Повезан: Најбољи бесплатни мрежни ХТМЛ уређивачи за тестирање вашег кода



Ако се ид који је додељен одговарајућем пољу за унос подудара са за вредност у ознака, тада ће то поље за унос бити аутоматски истакнуто када кликнете на ознаку.

Користећи пример ознаке


First Name:

У горњем примеру можете видети да је за атрибуту се додељује вредност фнаме . Стога, ако креирате поље за унос са фнаме ид, ово поље ће бити истакнуто сваки пут када кликнете на Први Име етикета.



Коришћење ознаке

У свом најосновнијем облику, ознака се може посматрати као оквир за текст. Тхе ознака бележи податке од корисника, а једна од најважнијих карактеристика је тип атрибут. Тхе тип Атрибут означава врсту података које овај оквир за текст може прикупити.

Повезан: Како створити наслагани образац у ЦСС -у

Постоји неколико различитих вредности које можете доделити тип атрибут, али неки од популарнијих су следећи.

  • Тект
  • Број
  • Емаил
  • Слика
  • Датум
  • Поље за потврду
  • Радио
  • Лозинка

Коришћење ознаке Пример


First Name:

Тхе ознака у горњем коду има три различита атрибута од којих сваки има јединствену функцију. Тхе тип атрибуту је додељена текстуална вредност, што значи да ће оквир за текст прихватити само знакове.

Тхе ид Атрибут је јединствени идентификатор за текстуални оквир и важан је јер омогућава приступ овом елементу из ЦСС датотеке. Тхе име атрибут је такође јединствени идентификатор; међутим, атрибут наме се користи за интеракцију са елементом са серверске стране развоја.

Тхе ид и име атрибутима се обично додељује иста вредност као што један омогућава приступ елементу са клијентске стране, а други са серверске стране.

Коришћење елемента за потврду

Елемент цхецкбок је веома јединствен у поређењу са осталим елементима које можете користити са таг. Омогућава кориснику да изабере једну или више опција са листе повезаних избора. Поља за потврду се лако идентификују јер су представљена малим квадратним оквирима који садрже квачицу када су изабрани.

Коришћење примера елемента поља за потврду


Programming Languages:
Java
JavaScript
Python

У горњем примеру, сваки од елемената поља за потврду има атрибут вредности, а то је важно јер помаже у разликовању сваке опције поља за потврду из колекције. Стога, ако корисник одабере 'Јава' из горе наведених опција, подаци ће то одражавати.

Коришћење ознаке и радио елемената

Тхе ознака и радио елементи су слични у смислу да дозвољавају само кориснику да одабере једну вредност одједном; стога се може рећи да имају исту функцију. Међутим, по изгледу се веома разликују.

Радио елемент је по изгледу ближи елементу поља за потврду, међутим, са радио елементом имате кругове уместо квадрата.

Тхе таг производи оно што је у суштини падајући оквир, који омогућава кориснику да одабере једну вредност.

Коришћење примера ознаке и радио елемента


Sex:

Male
Female
Other


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

Коришћење елемента датума

Елемент датума производи мали оквир за текст који генерише календар када се кликне на њега. Користећи датум као тип уноса у вашим обрасцима штити од потенцијалног уноса корисника нетачним датумом, што потенцијално може довести до прикупљања погрешних података.

Користећи пример елемента датума


Коришћење елемента е -поште и лозинке

Када програмер додели вредности е -поште или лозинке атрибуту типа датотеке ознаку, сваки производи идентично поље за текст. Међутим, када почнете да користите ове кутије, разлике постају очигледне.

Елемент е -поште прати податке унете у оквир за текст и осигурава да сваки поднесак испуњава стандардне захтеве за адресу е -поште; што значи да има локални део, иза којег следи симбол @ и који завршава доменом.

Коришћење примера елемента е -поште


У горњем примеру упознали сте се са новим атрибутом који се зове чувар места , и овај атрибут узима текстуалну вредност која је приказана у оквиру за текст у избледелој сивој боји. Овај текст се користи за означавање података које треба ставити у оквир за текст, као што се види у горњем примеру.

Елемент лозинке претвара знакове у звездице док се уносе у оквир за текст. Стога, ако су екран вашег рачунара видљиви другим људима, они неће видети лозинку коју сте унели.

Коришћење примера елемента лозинке


Коришћење ознаке дугмета

У облику, обично постоје две различите врсте дугмади. Прво је дугме за слање које податке унете у образац доставља вредности додељеној атрибуту радње (који се налази у < форм> ознака).

Пример дугмета за слање

Submit

Друга врста дугмета која се обично користи у обрасцу је дугме за ресетовање, које брише податке у облику тако да корисник може да унесе свеже податке. Тхе ознака има а тип атрибут, који се користи за означавање функције дугмета. У горе наведеном примеру тип атрибут додељује вредност прихвати , дакле, дугме које има а тип Вредност ресетовање користи се за поништавање обрасца.

Пример дугмета за ресетовање

Reset

Креирање обрасца

Да бисте креирали једноставан образац у ХТМЛ -у, морате све горе наведене елементе приложити у таг.

Креирање примера обрасца






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




Горњи код ће произвести следећи облик:

како да вратите низ снапа

Сада можете креирати једноставан образац у ХТМЛ -у

Овај чланак нуди све алате за креирање функционалног ХТМЛ обрасца. Идентификује различите ХТМЛ ознаке које се користе при креирању обрасца и истражује различите атрибуте који се могу користити са овим ознакама.

Међутим, већина образаца које видите на веб страницама има једну додатну компоненту; ЦСС, који се користи за оживљавање форме и чини је естетски угоднијом.

Објави Објави Твеет Емаил Цхесс Схеет Особина ЦСС3 својстава

Савладајте есенцијалну ЦСС синтаксу помоћу нашег листа за ЦСС3 својства.

Прочитајте следеће Повезане теме
  • Програмирање
  • ХТМЛ
  • Веб Девелопмент
  • Кодирање Туториали
О аутору Кадеисха Кеан(Објављен 21 чланак)

Кадеисха Кеан је програмер софтвера и писац техничке/технологије. Она има изразиту способност да поједностави неке од најсложенијих технолошких концепата; производњу материјала који може лако разумети сваки почетник у технологији. Одушевљена је писањем, развојем занимљивог софтвера и путовањем по свету (кроз документарне филмове).

Више од Кадеисха Кеан

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили