Home-theater-designers
Duomenis iš svetainės naudotojo galima rinkti keliais skirtingais būdais. Formos svetainėse gali turėti paprastą funkciją, pavyzdžiui, užsiprenumeruoti vartotoją naujienlaiškį, arba turėti sudėtingesnį tikslą, pavyzdžiui, veikti kaip darbo prašymo forma.
Tačiau vienas dalykas, kurį visos šios paprastos ir sudėtingos formos turi bendro, yra HTML, o konkrečiau - HTML žyma.
Formos žymos naudojimas
The žyma yra HTML elementas, naudojamas kaip sudėtinis rodinys, skirtas kitiems elementams, kurie gali būti laikomi formų bloku, uždėti. Kai kurie iš šių pagrindinių elementų apima žyma, žyma, ir žyma.
The žyma turi svarbų atributą, kuris prisideda prie jos funkcionalumo. Šis atributas vadinamas veiksmu ir naudojamas identifikuoti failą, į kurį bus perduoti į formą įvesti duomenys.
Žymos pavyzdys
Aukščiau pateiktame pavyzdyje parodyta, kaip naudoti formos žymą savo projektuose. Viena iš pagrindinių pastabų yra ta, kad jei atidarote formos žymą, nepamirškite jos uždaryti. Tai sukurs formos struktūrą ir užtikrins, kad į formą įvesti duomenys būtų tvarkomi teisingai.
Žymos naudojimas
The žyma naudojama kiekvienos formos įvesties lauko duomenims apibūdinti. Ši žyma turi dėl atributas, kuris naudojamas formos funkcionalumui pagerinti.
Susijęs: Geriausi nemokami internetiniai HTML redaktoriai, skirti patikrinti jūsų kodą
Jei atitinkamam įvesties laukui priskirtas ID atitinka dėl vertę žymą, tada šis įvesties laukas bus automatiškai paryškintas, kai spustelėsite etiketę.
Žymos pavyzdys
First Name:
Aukščiau pateiktame pavyzdyje galite pamatyti, kad dėl atributui priskiriama vertė f vardas . Todėl, jei sukursite įvesties lauką naudodami f vardas id, šis laukas bus paryškintas kiekvieną kartą spustelėjus Pirmas vardas etiketė.
Žymos naudojimas
Savo pagrindine forma, žymą galima pamatyti kaip teksto laukelį. The žyma fiksuoja vartotojo duomenis, o viena iš svarbiausių jos funkcijų yra tipo atributas. The tipo atributas nurodo, kokio tipo duomenis gali rinkti šis teksto laukelis.
Susijęs: Kaip sukurti sukrautą formą CSS
Yra keletas skirtingų reikšmių, kurias galite priskirti tipo atributas, tačiau kai kurie populiaresni yra šie.
- Tekstas
- Skaičius
- Paštu
- Vaizdas
- Data
- Žymimasis langelis
- Radijas
- Slaptažodis
Žymos naudojimas Pavyzdys
First Name:
The žyma aukščiau esančiame kode turi tris skirtingus atributus, kurių kiekviena turi unikalią funkciją. The tipo atributui priskiriama teksto reikšmė, o tai reiškia, kad teksto laukelyje bus priimami tik simboliai.
The id atributas yra unikalus teksto laukelio identifikatorius ir tai svarbu, nes suteikia prieigą prie šio elemento iš CSS failo. The vardas atributas taip pat yra unikalus identifikatorius; tačiau pavadinimo atributas naudojamas sąveikai su elementu iš kūrimo serverio pusės.
The id ir vardas atributams paprastai priskiriama ta pati vertė, nes vienas suteikia prieigą prie elemento iš kliento pusės, o kitas-iš serverio pusės.
Naudojant žymės langelio elementą
Pažymėtas langelis yra labai unikalus, palyginti su kitais elementais, kuriuos galite naudoti su žyma. Tai leidžia vartotojui pasirinkti vieną ar daugiau parinkčių iš susijusių pasirinkimų sąrašo. Žymės langeliai yra lengvai atpažįstami, nes juos žymi mažos kvadratinės dėžutės, kuriose pažymėtas žymės langelis.
Naudojant žymės langelio elemento pavyzdį
Programming Languages:
Java
JavaScript
Python
Anksčiau pateiktame pavyzdyje kiekvienas žymės langelio elementas turi vertės atributą, ir tai svarbu, nes tai padeda atskirti kiekvieną žymės langelio parinktį nuo kolekcijos. Todėl, jei vartotojas iš aukščiau pateiktų parinkčių pasirenka „Java“, duomenys tai parodys.
Žymos ir radijo elementų naudojimas
The žymė ir radijo elementai yra panašūs ta prasme, kad jie leidžia vartotojui pasirinkti tik vieną reikšmę vienu metu; todėl galima sakyti, kad jie atlieka tą pačią funkciją. Tačiau jie labai skiriasi savo išvaizda.
Radijo elementas savo išvaizda yra arčiau žymės langelio elemento, tačiau radijo elementas turi apskritimus, o ne kvadratus.
The žyma sukuria iš esmės išskleidžiamąjį laukelį, kuris leidžia vartotojui pasirinkti vieną vertę.
Žymos ir radijo elemento pavyzdys
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Datos elemento naudojimas
Datos elementas sukuria nedidelį teksto laukelį, kuris spustelėjus sukuria kalendorių. Naudojant data kaip įvesties tipas jūsų formose apsaugo vartotoją nuo galimo neteisingos datos įvedimo, todėl gali būti renkami klaidingi duomenys.
Naudojant datos elemento pavyzdį
Pašto ir slaptažodžio elemento naudojimas
Kai kūrėjas priskiria el. Pašto adreso arba slaptažodžio reikšmes tipo atributui kiekviena iš jų sukuria identišką teksto laukelį. Tačiau kai pradedate naudoti šias dėžutes, skirtumai išryškėja.
El. Pašto elementas stebi į teksto laukelį įvestus duomenis ir užtikrina, kad kiekvienas pateiktas dokumentas atitiktų standartinius el. Pašto adreso reikalavimus; tai reiškia, kad turi vietinę dalį, po kurios yra simbolis @ ir baigiasi domenu.
El. Pašto elemento pavyzdys
Aukščiau pateiktame pavyzdyje esate supažindintas su nauju atributu, vadinamu vietos žymeklis , ir šis atributas įgauna teksto reikšmę, kuri teksto laukelyje rodoma išblukusios pilkos spalvos. Šis tekstas naudojamas nurodyti duomenis, kurie turi būti dedami į teksto laukelį, kaip parodyta aukščiau pateiktame pavyzdyje.
Slaptažodžio elementas simbolius paverčia žvaigždutėmis, kai jie įvedami į teksto laukelį. Todėl, jei jūsų kompiuterio ekranas yra matomas kitiems žmonėms, jie nematys jūsų įvesto slaptažodžio.
Naudojant slaptažodžio elemento pavyzdį
Naudojant mygtuko žymę
Formoje paprastai yra du skirtingi mygtukų tipai. Pirmasis yra mygtukas „Pateikti“, kuris pateikia formoje įvestus duomenis vertei, priskirtai veiksmo atributui (kuris yra < forma> žyma).
Pateikimo mygtuko pavyzdys
Submit
Antro tipo mygtukas, dažniausiai naudojamas formoje, yra atstatymo mygtukas, kuris išvalo duomenis formoje, kad vartotojas galėtų įvesti naujus duomenis. The etiketėje yra tipo atributas, kuris nurodo mygtuko funkciją. Aukščiau esančiame pavyzdyje tipo atributas yra priskirti vertę Pateikti , todėl mygtukas, turintis a tipo vertė atstatyti naudojamas iš naujo nustatyti formą.
Atstatymo mygtuko pavyzdys
Reset
Formos kūrimas
Norėdami sukurti paprastą HTML formą, turėsite pridėti visus aukščiau paminėtus elementus a žyma.
Formos kūrimo pavyzdys
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
Aukščiau pateiktas kodas sudarys tokią formą:
kaip sukurti sau el. pašto adresą
Dabar galite sukurti paprastą formą HTML
Šiame straipsnyje rasite visas priemones, skirtas funkcinei HTML formai sukurti. Jame identifikuojamos skirtingos HTML žymos, naudojamos formų kūrimui, ir nagrinėjami įvairūs atributai, kuriuos galima naudoti su šiomis žymomis.
Tačiau dauguma formų, kurias matote svetainėse, turi vieną papildomą komponentą; CSS, naudojamas formai atgaivinti ir padaryti ją estetiškesnę.
Dalintis Dalintis „Tweet“ Paštu „Essential CSS3 Properties“ apgaulės lapasĮvaldykite esminę CSS sintaksę naudodami mūsų CSS3 savybių apgaulės lapą.
Skaityti toliau Susijusios temos- Programavimas
- HTML
- Interneto svetainių kūrimas
- Kodavimo pamokos
Kadeisha Kean yra „Full Stack“ programinės įrangos kūrėja ir techninė/technologijų rašytoja. Ji turi aiškų sugebėjimą supaprastinti kai kurias sudėtingiausias technologines sąvokas; gaminti medžiagą, kurią lengvai supranta bet kuris naujokas. Ji aistringai rašo, kuria įdomią programinę įrangą ir keliauja po pasaulį (per dokumentinius filmus).
Daugiau iš Kadeisha KeanPrenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia