Jak wyłączyć pola formularzy za pomocą CSS

Formularz HTML jest elementem dokumentu HTML często używanego do uzyskania wprowadzania użytkownika. Formularze HTML składają się z komponentów, takich jak pola wejściowe, pola logowania, listy kontrolne, przyciski opcji, przycisk Przesyłania, menu i wiele innych. Jednak w niektórych scenariuszach użytkownicy chcą wyłączyć lub ukryć pole wejściowe, aby spełnić warunki wstępne, na przykład zaznaczenie pudełka. W CSS zdarzenia można wyłączyć, wykorzystując „wyłączony" I "Wskaźniki" nieruchomości.

W tym artykule wyjaśniono metody wyłączania pola formularza za pomocą CSS.

Jak wyłączyć pola formularzy za pomocą CSS?

Aby wyłączyć dowolne pole formularzy w HTML, użytkownicy mogą korzystać z właściwości CSS lub „wyłączony" atrybut. W tym celu wymieniliśmy metody wyłączania pól formularzy:

• Metoda 1: Jak wyłączyć pola formularzy przy użyciu CSS ”Wskaźnik" Nieruchomość?
• Metoda 2: Jak wyłączyć pole formularza za pomocą „wyłączony" Atrybut?

Metoda 1: Jak wyłączyć pola formularzy przy użyciu właściwości CSS „Wskaźnik”?

Aby wyłączyć pole formularza za pomocą właściwości CSS, utwórz formularz przy użyciu podanych instrukcji.

• Najpierw dodaj „„Element do utworzenia formularza.
• Następnie użyj „„Element do osadzania etykiety w formie i„„Element zostanie użyty do określenia pól formularzy.
• „„Do”Atrybut dołączył etykietę do pola wejściowego przez„ID".
• Typ wejściowy jako „tekst”Służy do ustawienia pola tekstowego w formie.
• Typ wejściowy „składać”Jest wykorzystywany do dodania przycisku do formularza.

Na przykład utworzyliśmy trzy różne pola tekstowe i trzy przyciski:

Wpisz swoje imię




Wprowadź swoje nazwisko




Wpisz swój wiek

Wyłącz pole formy za pośrednictwem CSS
Teraz wyłącz pole formularza za pomocą właściwości CSS. Na przykład wyłączymy pole formularza, którego typem wejściowym jest „numer". W tym celu uzyskaj dostęp do pola formularza przez „wejście [typ = liczba]”I ustaw wartość CSS”Wskaźniki„Nieruchomość jako„nic" następująco:

wejście [type = liczba]
Wskaźniki: Brak;

Z poniższego wyjścia widać, że „Wpisz swój wiek„Pole jest całkowicie wyłączone:

Przejdźmy do następnej sekcji, aby wyłączyć pole formularza za pomocą atrybutu HTML „wyłączony".

Metoda 2: Jak wyłączyć pole formularza za pomocą atrybutu „Wyłączone”?

Aby wyłączyć pole formularza za pomocą „wyłączony„Atrybut, przejdź przez podaną instrukcję:

• Dodaj element za pomocą „treść„Nazwa klasy, aby utworzyć formularz:
• Dostosuj pole formularza zgodnie z instrukcją omówioną w pierwszej sekcji:
• Aplikować "wyłączony”Atrybut do pola formularza, które chcesz wyłączyć. Na przykład wyłączymy „Następny" przycisk:

Wpisz swoje imię




Wprowadź swoje nazwisko




Wpisz swój wiek

Wyjście

Zastosuj CSS do .klasa treści
".treść„Klasa jest wykorzystywana do dostępu do formularza. W ".Treść ”klasa, ustaw właściwość„wyściółka„Aby dodać przestrzeń wokół pola formularza:

.treść
Wyściółka: 10px;

Element wejściowy stylu, w którym „type = prześlij”

wejście [type = prześlij]
szerokość: 100px;
Wyściółka: 5px;
kolor tła: RGB (200, 158, 224);
RADIUS BERDER: 5px;

Powyższy kod będzie dostępny do elementu wejściowego, w którym typ jest równy przesłaniu. Zastosuj stylizację na wybranych polach, wykorzystując poniżej wspomniane właściwości:

• "szerokość”Służy do ustawienia szerokości wybranych pól.
• "wyściółka”Służy do ustawiania miejsca wokół wybranych elementów.
• „„kolor tła„Właściwość jest wykorzystywana do ustawienia tła.
• "Radiusz graniczny”Właściwość ustawia krawędzie wybranych elementów.

Styl „Wyłączony” element

wejście: niepełnosprawne
Shadow Box: 1px 1px 1px 1px RGB (230, 229, 229);
Border: 1px Solid #999999;
kolor tła: #ddd1d1;
Kolor: #666666;

Stylizować element, na którym „wyłączony„Atrybut jest stosowany za pomocą wielu właściwości:

• "Shadow Box”Ustawia cień wokół elementu.
• "granica„Właściwość służy do ustawienia granicy wokół elementu niepełnosprawnego.

Wyjście

Podaliśmy metody wyłączania pola formularza za pomocą CSS.

Wniosek

Aby wyłączyć pól formularzy za pomocą CSS, użytkownicy mogą korzystać z właściwości CSS ”Wskaźniki”Lub atrybut HTML„wyłączony". Aby wyłączyć pole formularza, utwórz formularz, a następnie ustaw właściwość CSS „Wskaźniki” jako „nic”Na określonym typie wejściowym, aby go wyłączyć. Jednak użytkownicy mogą bezpośrednio korzystać z atrybutu „Wyłączone” w polu określonego formularza, aby go wyłączyć. W tym poście wyjaśniono metodę wyłączenia pola formularza za pomocą CSS.