Hvordan deaktivere skjemafelt ved hjelp av CSS

En HTML -skjema er en komponent i et HTML -dokument som ofte brukes til å få brukerinngang. HTML -skjemaene består av komponenter, for eksempel inngangsfelt, påloggingsfelt, sjekklister, radioknapper, en innsendingsknapp, menyer og mange flere. I noen scenarier ønsker brukere imidlertid å deaktivere eller skjule inngangsfeltet for å oppfylle forutsetningen, som å merke av en boks. I CSS kan hendelser deaktiveres ved å bruke "funksjonshemmet”Og“peker-hendelser" egenskaper.

Denne artikkelen vil forklare metodene for å deaktivere skjemafeltet ved hjelp av CSS.

Hvordan deaktivere skjemafelt ved hjelp av CSS?

For å deaktivere ethvert skjemafelt i HTML, kan brukere enten bruke CSS -egenskap eller "funksjonshemmet" Egenskap. For dette formålet har vi listet opp metodene for å deaktivere skjemafeltene:

• Metode 1: Hvordan deaktivere skjemafelt ved bruk av CSS “peker-event”Eiendom?
• Metode 2: Hvordan deaktivere formfelt ved bruk av “funksjonshemmet" Egenskap?

Metode 1: Hvordan deaktivere skjemafelt ved bruk av CSS “Pointer-Event” -egenskap?

For å deaktivere skjemafeltet ved hjelp av CSS -egenskapen, oppretter du et skjema ved hjelp av de gitte instruksjonene.

• Først må du legge til en "”Element for å lage et skjema.
• Deretter, bruk "”Element for å legge inn etiketten i formen, og“”Element vil bli brukt til å spesifisere skjemafelt.
• “til”Attributt festet etiketten med inngangsfeltet gjennom“id”.
• Inngangstypen som “tekst”Brukes til å stille inn tekstfeltet i skjemaet.
• Inngangstypen "sende inn”Brukes til å legge til en knapp i skjemaet.

For eksempel har vi laget tre forskjellige tekstfelt og tre knapper:

Skriv inn ditt fornavn




Skriv inn etternavnet ditt




Gå inn i din alder

Deaktiver skjemafeltet gjennom CSS
Deaktiver nå skjemafeltet ved hjelp av CSS -egenskap. For eksempel vil vi deaktivere skjemafeltet hvis inngangstype er "Antall”. For dette formålet får du tilgang til formfeltet gjennom "input [type = nummer]”Og angi verdien av CSS”peker-hendelser”Eiendom som“ingen" som følger:

input [type = number]
Peker-hendelser: Ingen;

Fra utgangen nedenfor kan du se at "Gå inn i din alder”Feltet er helt deaktivert:

La oss gå videre mot neste avsnitt for å deaktivere skjemafeltet gjennom HTML -attributtet “funksjonshemmet”.

Metode 2: Hvordan deaktivere skjemafeltet ved bruk av "deaktivert" attributt?

For å deaktivere skjemafeltet ved å bruke “funksjonshemmet”Attributt, gå gjennom den gitte instruksjonen:

• Legg til elementet med “innhold”Klassenavn for å lage et skjema:
• Juster skjemafeltet i henhold til instruksjonen omtalt i den første delen:
• Bruk “funksjonshemmet”Attributt til skjemafeltet du vil deaktivere. For eksempel vil vi deaktivere "NESTE”Knapp:

Skriv inn ditt fornavn




Skriv inn etternavnet ditt




Gå inn i din alder

Produksjon

Bruk CSS på .Innholdsklasse
“.innhold”Klasse brukes til å få tilgang til skjemaet. I “.innhold ”-klasse, angi eiendommen”polstring”For å legge til plass rundt formfelt:

.innhold
polstring: 10px;

Stilinngangselement der "type = send"

input [type = send]
Bredde: 100px;
polstring: 5px;
bakgrunnsfarge: RGB (200, 158, 224);
Border-Radius: 5px;

Ovennevnte kode får tilgang til inngangselementet der typen er lik innsending. Bruk styling på utvalgte felt ved å bruke de under-nevnte egenskapene:

• “bredde”Brukes til å sette bredden på utvalgte felt.
• “polstring”Brukes til å sette plass rundt de valgte elementene.
• “bakgrunnsfarge”Eiendom brukes til å stille bakgrunnen.
• “Border-Radius”Eiendom setter kantene på utvalgte elementer.

Stil “deaktivert” element

input: deaktivert
Bokseskygge: 1px 1px 1px 1px RGB (230, 229, 229);
Grense: 1px Solid #999999;
Bakgrunnsfarge: #DDD1D1;
Farge: #666666;

Stil elementet som “funksjonshemmet”Attributt brukes ved å bruke flere egenskaper:

• “Bokseskygge”Setter en skygge rundt elementet.
• “grense”Eiendom brukes til å sette grensen rundt funksjonshemmede element.

Produksjon

Vi har gitt metodene for å deaktivere skjemafeltet ved hjelp av CSS.

Konklusjon

For å deaktivere skjemafelt ved hjelp av CSS, kan brukere bruke CSS -egenskapen "peker-hendelser”Eller HTML -attributtet”funksjonshemmet”. For å deaktivere skjemafeltet, oppretter du et skjema, og sett deretter CSS-egenskapen “Pointer-Events” som “ingen”På en spesifikk inngangstype for å deaktivere den. Imidlertid kan brukere direkte bruke "deaktiverte" attributtet på et bestemt skjemafelt for å deaktivere det. Dette innlegget forklarte metoden for å deaktivere skjemafeltet ved hjelp av CSS.