När du surfar på dina favoritwebbplatser visas kryssrutor när du behöver välja ett alternativ av de många tillgängliga. Dessa kryssrutor skapas i med hjälp av en speciell tagg. I den här artikeln kommer vi att se hur man skapar en kryssruta i HTML och hur rutorna fungerar i följande ordning:
Hur skapar jag en kryssruta i HTML?
En kryssruta är ett formulärelement som låter dig välja flera alternativ från olika tillgängliga alternativ. Kryssrutor skapas med HTMLtaggen. Det kan kapslas inuti aelement eller så kan de stå ensamma. De kan också associeras med ett formulär med hjälp av formattribut av taggen.
Här är ett grundläggande exempel för att skapa en enkel kryssruta:
Röd grön blå
Produktion:
Låt oss överväga ett annat exempel och lägga till en skicka-knapp så att kryssrutorna kan bli användbara. Här kan du också placera kryssrutorna i ett element som anger en sida för att behandla formuläret.
Vilken är din favorit färg? Röd grön blåResultat:
Produktion:
Kryssruta mot radioknappar
Med radioknapparna kan användaren endast välja ett alternativ. Medan kryssrutorna tillåter användaren att välja valfritt antal alternativ. Låt oss ta ett exempel och se hur alternativknappar och kryssrutor fungerar:
vad gör en Linux-administratör
Kryssrutor
Vilken är din favorit färg? Röd grön blåRadioknappar
Välj ditt kön? Man Kvinna OkändResultat:
Produktion:
I exemplet ovan kan du se att du kan markera så många kryssrutor du vill. Det gör kryssrutan lämplig för tider där användaren ska kunna välja flera alternativ. Men om du försöker välja mer än en alternativknapp avmarkeras det tidigare valet. Detta hjälper dig att tvinga användare att välja bara ett alternativ.
Inaktivera en kryssruta i HTML
Du kan inaktivera en kryssruta i genom att använda det inaktiverade attributet. Detta kan göras i kombination med ett skript för att aktivera eller inaktivera kryssrutan beroende på om vissa kriterier har uppfyllts.
Låt oss ta ett exempel för att se hur vi kan inaktivera en kryssruta:
Röd grön blå
Produktion:
I exemplet ovan har vi inaktiverat färgen röd. Så du kan välja grönt och blått från kryssrutan men inte färgen röd.
Med detta har vi kommit till slutet av vår artikel. Jag hoppas att du förstod hur kryssrutor i HTML fungerar och hur de kan användas annorlunda.
datadriven testning i selen
Nu när du känner till kryssrutan i HTML, kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig att skapa imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuera den till Amazon Simple Storage Service (S3).
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i 'Kryssruta i HTML' så återkommer vi till dig.