teksti- attribuutin arvo ilmaisee, että tavallinen tekstikenttä näytetään, aluksi muokattavissa.

arvo attribuutti ei vaadita, se voidaan jättää kokonaan pois. Jos sinun on kuitenkin määritettävä oletusarvo, joka tulee aluksi näkyviin kenttään, se on täytettävä.

salasana- muuttaa syötteen salasanakenttään. Erona tekstiin on se, että syötetyt tiedot näkyvät tähtinä, ja koko lomakkeen täyttämisen jälkeen selain ymmärtää salasanan olevan tässä kentässä ja kysyy, tarvitseeko se tallentaa.

lähetä- Samanlainen type-attribuutin arvo määrittelee syötteen painikkeeksi, kun sitä painetaan, tietty skripti käsitellään (myöhemmin opit, mikä skripti on, tutkimalla PHP- ja JavaScript-kieliä). Painiketta käytetään tietojen lähettämiseen lomakkeista käsittelijälle esimerkiksi yllä olevilla kielillä kirjoitettuna. Muitakin on, mutta mainitsin suosituimmat.

nollaa- Tämä on toisentyyppinen painike, joka nollaa kaikki lomakkeen arvot. Sen painamisen jälkeen ne on täytettävä uudelleen.

radio- Tämä arvo luo valintanapin eli kytkimen. Yleensä käytetään arvoille, joissa on pieni määrä vaihtoehtoja. Valitse esimerkiksi sukupuoli, ikäryhmä jne. näyttää tältä:

Tyyppimääritteeksi on asetettu radio - tämä on valintanappi. Arvon arvo sisältää lauseen tai sanan, jonka haluat vastaanottaa, jos joku valitsi tietyn valintanapin ja lähetti tiedot.

On myös muita tapauksia, joissa käyttäjän on valittava useita vastausvaihtoehtoja. Tässä tapauksessa ei enää käytetä valintanappia (hyväksyy vain yhden vaihtoehdon), vaan valintaruutu tai valintaruutu.

valintaruutu on kenttä, joka toimii samalla tavalla kuin valintanappi. Ainoa ero on, että voit valita useita valintaruutuja vastausvaihtoehdoiksi. Kuten valintanapin kohdalla, jos kysymyksessä on useita valintaruutuja, niiden name-attribuutti tulee täyttää tasaisesti. Arvo näyttää vastaavasti valitun kentän arvon.

Ominaisuudet syöttökenttien toiminnasta

Kuinka varmistaa, että käyttäjä valitsee vastauksen välittömästi (valintaruutu tai valintanappi)?
Tätä varten on yksi valittu attribuutti. Se on määritettävä syöttötunnisteen lopussa. Koska attribuutti on yksittäinen, sillä ei ole arvoja. Sinun tarvitsee vain lisätä se syöttöelementtiin. Esimerkiksi kuten alla olevassa merkinnässä:

Kuinka voin varmistaa, että valintaruudun tai valintanapin vieressä näkyy teksti, joka selittää tämän valinnan?
Tätä varten kirjoitamme tunnisteen ennen ja jälkeen valintanapin tai valintaruudun . Ja lisäämme myös itse selityksen tagin sisään. Katsotaanpa esimerkkiä:

Olen lukenut sopimuksen
Vastaavasti ilmoitat avaus- ja sulkemistunnisteessa itse valintaruudun ja tarvittavat sanat. Ja huomio! Vaikka käyttäjä napsauttaa sanaa, valintaruutu on silti korostettuna.

Viimeisin päivitys: 08.04.2016

Valintaruutu

Valintaruutu edustaa elementtiä, joka voi olla kahdessa tilassa: valittu ja valitsematon. Valintaruutu luodaan käyttämällä syöttöelementtiä type="checkbox"-attribuutilla:

Tutkitut tekniikat

Checked-määritteen avulla voit asettaa valintaruudun valituksi tilaan.

Kytkimet

Valintanapit tai valintanapit ovat samanlaisia ​​kuin valintaruudut, ja ne voivat myös olla valittuna tai valitsematta. Vain valintanapeille voit luoda yhden ryhmän, jossa voidaan valita vain yksi valintanappi kerrallaan. Esimerkiksi:

Luodaksesi valintanapin, sinun on määritettävä type="radio"-attribuutti. Ja nyt toinen nimi-attribuutti ei viittaa elementin nimeen, vaan sen ryhmän nimeen, johon valintanappielementti kuuluu. Tässä tapauksessa meillä on kaksi valintanappien ryhmää: sukupuoli ja tekniikka. Jokaisesta ryhmästä voimme valita vain yhden valintanapin. Jälleen, merkitse valintanappi asettamalla sen valittu attribuutti:

Tärkeä attribuutti on arvo-attribuutti, jonka avulla palvelin voi lomakkeen lähetyksen yhteydessä määrittää, mikä valintanappi on valittu.

Lisätään esimerkkiin hieman koodia, jotta voimme tutkia tämän lomakkeen tuottamia tietoja. HTML on tarkistettu lisäämällä elementti edustaa esimuotoiltua tekstiä, joka tulee esittää täsmälleen HTML-tiedostossa kirjoitetulla tavalla.">

lohko tulostaaksesi lomaketiedot:

 

 
 

 
 Sähköposti
 
 Puhelin
 
 Mail
 
 

 Lähetä
 


Radiotulojen käyttö
Kävimme jo yllä radiopainikkeiden perusteista.  Katsotaanpa nyt muita yleisiä valintanäppäimiin liittyviä ominaisuuksia ja tekniikoita, joista sinun on ehkä tiedettävä.
Oletuksena valintanappi
Jos haluat valita oletusvalintanapin, lisää vain valittu attribuutti, kuten edellisen esimerkin tässä tarkistetussa versiossa näkyy:

 

 
Valitse haluamasi yhteydenottotapa:
 

 
 Sähköposti
 
 Puhelin
 
 Mail
 
 

 Lähetä
 

Tässä tapauksessa ensimmäinen valintanappi on nyt valittu oletuksena.
Huom: Jos laitat valitun määritteen useampaan kuin yhteen valintanappiin, myöhemmät esiintymät ohittavat aikaisemmat;  eli viimeksi valittu valintanappi on valittuna.  Tämä johtuu siitä, että vain yksi valintanappi ryhmästä voidaan valita kerralla, ja käyttäjäagentti poistaa automaattisesti valinnan muista aina, kun uusi valintanappi merkitään valituksi.
Tarjoaa suuremman osumaalueen valintanappeillesi
Yllä olevissa esimerkeissä olet ehkä huomannut, että voit valita valintanapin napsauttamalla siihen liittyvää elementtiä, joka edustaa kohteen otsikkoa käyttöliittymässä."> elementtiä sekä itse valintanappia.  Tämä on todella hyödyllinen HTML-lomaketunnisteiden ominaisuus, joka helpottaa käyttäjien napsauttamista haluamansa vaihtoehdon avulla, erityisesti pieninäyttöisissä laitteissa, kuten älypuhelimissa.
Helppokäyttöisyyden lisäksi tämä on toinen hyvä syy tehdä oikein elementtejä lomakkeissasi.
Validointi
Valintanapit eivät osallistu rajoitusten validointiin; niillä ei ole todellista arvoa, jota pitäisi rajoittaa.
Radiotulojen muotoilu
Seuraava esimerkki näyttää hieman perusteellisemman version koko artikkelissa näkemästämme esimerkistä, jossa on lisätyyliä ja parempi semantiikka, joka on luotu käyttämällä erikoiselementtejä. HTML-koodi näyttää tältä:

 

 

 
Valitse haluamasi yhteydenottotapa:
 

 
 Sähköposti
 
 Puhelin
 
 Mail
 
 

 Lähetä
 
 

Tässä ei ole paljoa uutta huomautettavaa, paitsi että elementin lisäämistä käytetään useiden säätimien ja tunnisteiden ryhmittelyyn ( ) verkkolomakkeessa."> 
ja elementti edustaa ylätasonsa sisällön kuvatekstiä 
."> 
elementtejä, jotka auttavat ryhmittelemään toiminnallisuuden hienosti ja semanttisesti.

Mukana oleva CSS on hieman merkittävämpi:
Html ( font-family: sans-serif; ) div:first-of-type ( näyttö: flex; align-items: flex-start; margin-bottom: 5px; ) label ( margin-right: 15px; rivin korkeus: 32 pikseliä lineaarinen: ei ole oikeaa: 4px; ) -painike: aktiivinen ( taustaväri: valkoinen; väri: musta; ääriviivat: 1px tasainen musta;
Merkittävin tässä on ominaisuuden -moz-appearance käyttö (joidenkin selainten tukemiseen tarvitaan etuliitteitä).  Oletusarvoisesti valintanapit (ja valintaruudut) on tyylitelty näiden säätimien käyttöjärjestelmän alkuperäisillä tyyleillä. Määrittämällä ulkoasun: none , voit poistaa alkuperäisen tyylin kokonaan ja luoda niille omia tyylejä. Tässä olemme käyttäneet reunus yhdessä reunasäteen kanssa ja siirtymä mukavan animoivan radiovalikoiman luomiseksi.  Huomaa myös, kuinka ), -valintaruutu ( ), tai vaihtoehto ( kohdassa a ) -elementti, joka on valittuna tai kytketty päälle."> :checked pseudo-luokkaa käytetään määrittämään tyylit valintanapin ulkoasulle, kun se on valittuna.

Yhteensopivuushuomautus: Jos haluat käyttää ulkonäköominaisuutta, sinun tulee testata se erittäin huolellisesti.  Vaikka useimmat nykyaikaiset selaimet tukevat sitä, sen toteutus vaihtelee suuresti.  Vanhemmissa selaimissa edes avainsanalla none ei ole samaa vaikutusta eri selaimissa, ja jotkut eivät tue sitä ollenkaan.  Erot ovat pienemmät uusimmissa selaimissa.
Huomaa, että kun napsautat valintanappia, häivytys tapahtuu mukavasti ja tasaisesti, kun kaksi painiketta vaihtavat tilaa. Lisäksi selitteen ja lähetyspainikkeen tyyli ja väritys on mukautettu niin, että niillä on voimakas kontrasti. Tämä ei välttämättä ole mahdollista. katsoa mitä haluat todellisessa verkkosovelluksessa, mutta se näyttää ehdottomasti mahdollisuudet.
Tekniset tiedot
Erittely
 
Status
 


HTML Living Standard 
määritelmä " "tässä eritelmässä.
 
Elintaso
 



Chrome Androidille
Edge Mobile
Firefox Androidille
Opera Androidille
Safari iOS:ssä
Samsung Internet
type="radio"
Chrome Täysi tuki Kyllä
Edge Täysi tuki Kyllä
Firefox Täysi tuki Kyllä
IE Täysi tuki Kyllä
Opera Täysi tuki Kyllä
Safari Täysi tuki Kyllä
WebView Android Täysi tuki Kyllä
Chrome Android Täysi tuki Kyllä
Edge Mobile Täysi tuki Kyllä
Firefox Android Täysi tuki 4
Opera Android Täysi tuki Kyllä
Safari iOS Täysi tuki Kyllä
Samsung Internet Android?
Legenda
 
 Täysi tuki Täysi tuki Yhteensopivuus tuntematon Yhteensopivuus tuntematon 
Katso myös
elementtiä käytetään luomaan vuorovaikutteisia ohjausobjekteja verkkopohjaisille lomakkeille tietojen vastaanottamiseksi käyttäjältä;  saatavilla on laaja valikoima erityyppisiä syöttötietoja ja ohjauswidgetejä laitteesta ja käyttäjäagentista riippuen."> ja elementit."> HTMLInputElement-käyttöliittymä, joka toteuttaa sen.
 
tai a 
element."> RadioNodeList : käyttöliittymä, joka kuvaa valintanappiluettelon

a!  Luotko usein erilaisia ​​lomakkeita ja kyselyitä verkkosivustollesi?  Jos kyllä, halusit todennäköisesti muuttaa vakioelementtejä.  Tässä artikkelissa näytän sinulle, kuinka voit helposti ja yksinkertaisesti korvata vakioelementtejä valintaruutu(valintaruudut) ja valintanappi(vaihtuu) omaan.  Käytämme varat Vain CSS3!
Katso ja kokeile, mitä sinulla on demosivulla tai lataa lähteet: 
HTML-merkintä
Järjestetään elementit sivulla:
Tässä ei ole mitään erityistä, annamme jokaiselle elementille tunnuksen ja nimen, käytämme myös nimiötä kuvaamaan "kytkin"- ja "valintaruutu"-elementtejä.  Lisää tarratunnisteen sisään jänne.  Miksi tarkalleen, on kirjoitettu alla.
CSS-säännöt
Nyt hauskuus alkaa.  Analysoidaan vain "checkbox"-elementin luominen "kytkin" muodostetaan samalla tavalla.  Ensimmäinen asia, jonka teemme, on piilottaa vakiovalintaruutu näkyvistä:

input[ type= "checkbox" ] ( 
näyttö: ei mitään; 
}


Nyt käy selväksi, mitä varten span elementti on tarkoitettu.  Piilotetun vakiovalintaruudun sijaan luomme uuden käyttämällä span :ta:
1
2
3
4
5
6
7
8
9

input[ type= "checkbox" ] + etikettiväli ( 
näyttö: inline-block; 
leveys: 19px; 
korkeus: 19px; 
marginaali : -1px 4px 0 0 ; 
pystysuuntaus: keskellä; 
tausta : url () vasen ylhäällä ei toistoa ; 
kohdistin: osoitin; 
}


Valitse CSS-valitsimella kaikki tarratunnisteen sisällä olevat jaksot, jotka kuuluvat tyypin syöttöelementteihin valintaruutu(eli valitse kaikki "valintaruudut").  Ja käytämme tätä spritea (yksi yhteinen kuva useiden sijaan): 

Aseta valitun alueen korkeudeksi ja leveydeksi 19 pikseliä ja aseta taustakuva.
Jäljelle jää vain säännön järjestäminen aktiiviselle "valintaruudulle" (pseudovalitsin :checked).  Voit tehdä tämän siirtämällä tätä kuvaa vasemmalle 19 pikseliä:

input[ type= "checkbox" ] : valittu + etikettiväli ( 
tausta : url () -19px top no-repeat ; 
}


Tällä yksinkertaisella tavalla, käyttämällä useita taktiikoita, voit järjestää sivuston elementtejä makusi mukaan.  "Kytkimille" säännöt rakennetaan samalla tavalla, vain vastaavasti taustakuvaa siirretään vielä 19px ja CSS-valitsinta muutetaan hieman type="checkbox" type="radio" sijaan.

 
Jatkamme edellisen oppitunnin aihetta ja tarkastelimme siinä tavallisten tekstinsyöttökenttien luontiprosessi.  Tänään, jatkona, opimme luomaan toisen lomakeelementin - valintanapit.  Tällaisia ​​painikkeita käytetään, kun sinun on ilmoitettava jokin valinnan vastausvaihtoehdoista, esimerkiksi "kyllä" tai "ei", eikä molempia vaihtoehtoja.  Luodaan nämä valintanapit, otetaan viimeisen oppitunnin lopputulos ja kenttien jälkeen syöttö
 luodaan uusi kappale ja kirjoitetaan toinen tunniste 
 ja siinä osoitamme seuraavat attribuutit.
Ensimmäinen on kentän tyyppi tyyppi="radio"- attribuutti, joka määrittää painikkeen tyypin.  Toinen on attribuutti, joka määrittää painikkeemme nimen nimi ="aika".  Tämä arvo lähetetään käsittelijällemme heti, kun vierailija napsauttaa "lähetä"-painiketta.  Eli jos tämä valintanappi on aktiivinen, tämä arvo lähetetään käsittelijälle arvo="kyllä".  Tämän seurauksena päädyimme tällaiseen linjaan.  Lisäämällä tämän rivin editoriin ja päivittämällä selaimen, saamme yksinkertaisen valintanapin.
HTML
 

Tietenkin nyt valintanappi näyttää täysin epäselvältä, ei ole kysymys- eikä vastausvaihtoehtoa, eli ei ole selvää, mitä se tekee.  Siksi luodaan ensin vastausvaihtoehto tagin avulla 

HTML
Nyt painikkeellamme on jo vastausvaihtoehto (sen arvo).  Luodaan nyt toinen valintanappi päinvastaisella vastauksella "ei".  Tämä tehdään hyvin yksinkertaisesti, kopioi jo luotu painike ja muuta sana "kyllä" sanaksi "ei" siinä ja määritteessä arvo
 aseta arvo ei
.  On tärkeää olla tietoinen siitä, että valintanappien nimien tulee pysyä samoina, koska tämä osoittaa selaimelle, että nämä kaksi painiketta kuuluvat samaan ryhmään ja että ne ovat toisensa poissulkevia.
HTML
 


Tässä meillä on toinen valintanappi, ja jos napsautamme yhtä painikkeista, valitsemamme painike korostetaan.  Toisin sanoen ne ovat toisensa poissulkevia, ja tämä tapahtuu, koska niillä on samat nimet.  Jos määrität kaksi eri nimeä, on mahdollista valita kaksi painiketta kerralla, mikä ei loogisesti ole täysin oikea.
No, nyt kysytään itse kysymys painikkeillemme, ennen painikkeitamme luomme toisen kappaleen kysymyksellämme.
HTML
 

 
Pidätkö hedelmistä?


No, nyt on toinen mielenkiintoinen kohta, joka voi olla hyödyllinen radiopainikkeita käytettäessä: painikkeen automaattinen aktivointi.  Jos päivität sivun nyt, useampi kuin yksi painike ei ole aktiivinen.  Aluksi voimme määrittää, mikä painike on aktiivinen, lisäämällä sen painikkeeseen, se aktivoituu oletuksena.  Ja tätä ominaisuutta kutsutaan tarkistettu
, joka tarkoittaa "merkitty" englanniksi.  Tämä ominaisuus on melko epätavallinen, se ei vaadi arvoa.
Siinä kaikki radiopainikkeille.  Kahden oppitunnin summana saimme seuraavan koodin:
 
HTML