Zestaw formularzy HTML. Formularze HTML. Pole tekstowe wielowierszowe - znacznik

Witam, drodzy czytelnicy bloga. Kontynuując nasze badanie, przechodzimy do rozważenia formularzy i tagów wejściowych wraz z ich atrybutami (), za pomocą których można tworzyć różnorodne formularze dla witryny.

Niezależnie od tematu i zawartości konkretnego zasobu internetowego, najprawdopodobniej będzie on zawierał formularze w tej czy innej formie: pola tekstowe, menu rozwijane, różne przyciski lub przełączniki. Swoją drogą w jednej z publikacji wspominałam już o elementach pomagających urozmaicić formy.

Jaki jest praktyczny cel całej różnorodności możliwych form? Przede wszystkim potrzebne są do przesłania wprowadzonych przez użytkownika danych na serwer w celu dalszego przetwarzania za pomocą specjalnie stworzonego skryptu (handlera).

Formularze HTML - jak są tworzone za pomocą formularza i danych wejściowych

Jak mówiłem na początku, na każdej mniej lub bardziej rozwiniętej stronie internetowej musi znajdować się jakiś formularz internetowy, a nawet kilka naraz. Aby zrozumieć, jak ważne są one w świetle zgodności zasobu sieciowego ze współczesnymi wymaganiami, wystarczy od ręki podać trzy obiekty korzystające z formularzy opartych na tagach formularza i input, które już sama nazwa nie pozostawiają wątpliwości co do ich konieczność projektu w tym czy innym kierunku:

Jeśli podążysz np. za linkiem do artykułu o tworzeniu opinii (umożliwiającym wszystkim użytkownikom wysyłanie wiadomości do administracji strony), to kod HTML z formularzem, który ma otwór (

) i zamknięcie (

) Część:

W tym miejscu formularz odgrywa kluczową rolę, ponieważ inicjuje instalację formularza internetowego. Sam nie wyświetla obszaru na stronie internetowej, ale służy jako pojemnik zawierający inne znaczniki.

W naszym przypadku (patrz zrzut ekranu powyżej) jest ich kilka wejście(ten znacznik HTML jest pojedynczy, to znaczy nie ma elementu zamykającego), a także obszar tekstowy, z różnymi zestawami atrybutów. Każdy z nich definiuje swój własny element zawarty w formularzu.

16. Autofokus(brak parametrów) to atrybut logiczny, który ustawia fokus na polu natychmiast po załadowaniu strony internetowej, dzięki czemu można wprowadzać dane bez klikania na nie. Nie można zastosować tylko do danych wejściowych type="hidden".

17. Wyłączony(bez wartości) - wyłącza dla użytkownika element formularza, do którego został dodany. Najczęściej używany jest w połączeniu ze skryptami, gdzie określane są warunki, po spełnieniu których niedostępny element zostanie aktywowany.

18. Formularz— kojarzy element z formularzem, gdy znajduje się on poza kontenerem

. Aby połączyć, do znacznika formularza dodawany jest globalny atrybut id, a do znacznika wejściowego dodawany jest atrybut formularza, którego wartości są takie same (na przykład id="data" i form="data") .

19. Wiele(brak parametrów) - zestawy opcja wielokrotnego wyboru dla użytkownika i jest używane tylko w połączeniu z type="file" i type="email".

Jeśli korzystasz z pola przesyłania plików, możesz wybrać kilka plików z komputera jednocześnie, używając klawiszy Ctrl lub Shift. Jeżeli wyświetli się pole do wpisania adresu e-mail (type="email"), to adresy e-mail należy wpisać oddzielając je przecinkami.

20. Wymagany(brak wartości) – aktywuje wymóg wprowadzenia przez użytkownika danych. W związku z tym przeglądarka blokuje przesłanie formularza internetowego w przypadku pozostawienia wymaganego pola pustego i wyświetla stosowny komunikat o konieczności jego wypełnienia.

Atrybut ten nie jest używany w przypadku przycisków graficznych i standardowych (type="button | image"), a także ukrytych pól wejściowych (type="hidden").

21. Rozmiar— określa szerokość pola tekstowego w znakach (odpowiednie tylko dla elementów typu z parametrami „email | hasło | szukaj | tel | tekst | url”). Wartość domyślna to 20 znaków.

Kolejne cztery atrybuty (22-25) znacznika wejściowego mają prawie taką samą funkcjonalność jak znacznik , ale dla kompletności również o nich krótko wspomnę.

22. Maksymalna długość— nakłada ograniczenie maksymalnej liczby znaków, które można wpisać podczas wypełniania pola tekstowego. Jeśli spróbujesz przekroczyć ten limit, dalsze wprowadzanie danych zostanie zablokowane. Ten atrybut ma zastosowanie tylko do elementów tekstowych z type="email | hasło | search | tel | tekst | url".

23. Minimalna długość— nakłada ograniczenie minimalnej liczby znaków, jakie należy wpisać w polu tekstowym. W przypadku próby przesłania danych zawierających mniejszą liczbę znaków pojawi się krótki komunikat informujący o konieczności uzupełnienia treści formularza oraz informacja o liczbie już wprowadzonych znaków. Zasady korzystania są dokładnie takie same jak w przypadku maxlength.

24. Symbol zastępczy— możesz umieścić podpowiedź (będzie ona parametrem) bezpośrednio w polu tekstowym, która zniknie w momencie, gdy użytkownik zacznie wpisywać znaki. Tylko dla pól utworzonych przy użyciu parametrów e-mail, hasło, wyszukiwanie, tekst, tel, adres URL atrybut type znacznika wejściowego.

25. Tylko czytać(brak parametrów) - oznacza, że ​​wprowadzony wcześniej w polu tekst jest dostępny jedynie do odczytu i kopiowania. Zwykle jest używany w połączeniu ze skryptami, w których określone są warunki, które po spełnieniu mogą aktywować ten element formularza.

I na koniec jeszcze kilka atrybutów uzupełniających funkcjonalność różnych elementów formularza:

26. Wzór— jako jego wartość odzwierciedla wyrażenie regularne, na podstawie którego ustalane są zasady wprowadzania informacji. W takim przypadku zaleca się dodatkowo dodać globalny atrybut tytułu, jako parametr, do którego można dodać tekst objaśniający, ułatwiający użytkownikom wypełnianie pól. Wzorzec jest stosowany tylko do elementów e-mail, hasła, wyszukiwania, tekstu, telefonu i adresu URL. Rozumiemy to na przykładzie. Oto kod uproszczonego formularza rejestracyjnego (z ):

Zaloguj sie Hasło

Zaloguj sie Hasło

Dla pola logowania (type="text") jako wartość wzorca podaje się wyrażenie regularne (5,), co oznacza użycie znaków łacińskich i należy wpisać co najmniej pięć znaków.

W odniesieniu do obszaru tekstowego hasła (type="password") ustawiana jest wartość (8,), która określa w każdym przypadku wprowadzanie wyłącznie znaków łacińskich (duże i małe litery) oraz cyfr, przy czym łączna liczba wszystkich znaków nie powinna być mniejsza niż osiem.

W przypadku naruszenia określonych warunków wejściowych przeglądarka nie pozwoli na przesłanie danych i wyświetli odpowiednie ostrzeżenie:

27. Src— określa ścieżkę do obrazu (URL, czyli jego wartość) w celu wyświetlenia przycisku graficznego „obraz” (patrz tabela parametrów typu wejścia powyżej).

28. Krok— ustawia krok dla elementów zapewniających wybór wartości numerycznych (input type="date | datetime-local | miesiąc | liczba | zakres | tel | czas | tydzień..").

Jako parametr może przyjmować dowolną liczbę całkowitą lub ułamkową. Domyślny krok="1". Aby ustawić ostateczny zakres wejściowy, możesz ponownie użyć atrybutów min i max wspomnianych powyżej. Dla przejrzystości w formularzu testowym umieścimy 2 elementy type="number". Dla pierwszego ustaw step="2", a dla drugiego step="0,1":

Wprowadź wartość od 0 do 1:

Wprowadź wartość od -10 do 10: Wprowadź wartość od 0 do 1:

29. Wartość— ustawia wartość elementu formularza, który zostanie przekazany do procedury obsługi. Na serwer wysyłana jest para nazwa-parametr, gdzie nazwa jest określana na podstawie atrybutu name znacznika wejściowego, a parametr jest określany na podstawie atrybutu wartości. Ponadto dla różnych elementów formy wartość będzie odgrywać różne role:

• for type="button | reset | Submit" - ustawia etykietę tekstową na przyciskach;
• for type="checkbox | radio | image" - identyfikuje każde pole wyboru, przełącznik lub przycisk graficzny podczas wysyłania i przetwarzania danych na serwerze;
• for type="hasło | tekst" - od razu po załadowaniu formularza wyświetla w polu wstępny tekst, który użytkownik może zmienić lub całkowicie usunąć;
• for type="file" (przesyłanie pliku) nie ma zastosowania, ponieważ nie wpływa na ten element.

Przykładowe zastosowanie każdej z powyższych opcji:

Wybierz CMS-a: W.P. Joomla

Wybierz CMS-a: W.P. Joomla

Tutaj wartość wartość atrybutu definiuje następujące składniki każdego elementu: wyświetla fragment tekstu dla pola type="text" („Twoje imię”), identyfikuje każdy z przycisków opcji („1” i „2”) ustawionych za pomocą type="radio", a także aktywuje napis na przycisku („Wyślij”).

Przykład stworzenia pięknego formularza HTML

Następnie postaram się przedstawić Państwu przykładowy formularz internetowy, którego kod zawiera nie tylko kombinacje typów wejściowych z różnymi wartościami tworzącymi standardowe pola tekstowe i przyciski, ale także pozwalający np. elementu nie tylko poprzez bezpośrednie kliknięcie myszą, ale także poprzez kliknięcie na tekst.

Należy pamiętać, że w celu uzyskania niepowtarzalnego projektu, w formie umieszczane są poszczególne elementy formy, każdy z kompletem:

Tył (maks. szerokość: 350 pikseli; margines: 50 pikseli auto 0; dopełnienie: 20 pikseli; tło: #f3ebe1; rodzina czcionek: „Oswald”, bezszeryfowa;) .form-1, .form-2, .form-3 , .form-4 (dopełnienie: 15px; obramowanie: 4px double #909090) .form-1, .form-2, .form-3 (border-bottom:brak) .form-1 wejście (wyświetlanie:blok; margines- dół: 10 pikseli; szerokość: 100%).in (dopełnienie po lewej stronie: 40 pikseli) .in wejście (szerokość: 100%) ..png) brak powtórzeń; pozycja tła: 10 pikseli 10 pikseli) ..png) brak powtórzeń; położenie tła: 10px 10px) wejście .form-4 (wyświetlacz: blok; wysokość: 50 pikseli; rozmiar czcionki: 24 piksele; szerokość: 100%; kursor: wskaźnik)

W rezultacie taki formularz internetowy przyjmuje następujący zarys:

Bardziej szczegółowe informacje na temat tworzenia tego konkretnego formularza można znaleźć pod adresem ta strona(przy okazji, można tam nie tylko przetestować funkcjonalność poszczególnych obszarów tekstowych wpisując do nich dane, ale także poeksperymentować z formularzem internetowym edytując kod HTML i/lub właściwości CSS, zmieniając całkowicie lub częściowo jego wygląd).

Moim celem było zapoznanie Cię z algorytmem wykorzystania różnych wartości atrybutu type i tagu formularza do tworzenia różnych formularzy HTML na stronie. Mam nadzieję, że zadanie zostało wykonane. W każdym razie podziel się swoimi przemyśleniami na ten różnorodny temat w komentarzach.

Naturalnie w kolejnych publikacjach będę nadal opisywał główne znaczniki znaczników hipertekstowych, dlatego nie zapomnij zapisać się na aktualizacje bloga za pośrednictwem poczty elektronicznej. Aby to wzmocnić, spójrz na inną lekcję Jewgienija Popowa na temat tworzenia formularza kontaktowego.

Opis

Znacznik HTML

tworzy formularz HTML, który służy do wysyłania danych wejściowych użytkownika do serwera.

Ponieważ sam formularz nie umożliwia wprowadzania danych przez użytkownika, należy umieścić go wewnątrz elementu zawierać inne elementy, których celem jest zapewnienie użytkownikowi różnych możliwości wprowadzania danych:

Oprócz tych elementów wewnątrz formularza możesz zastosować dowolne inne elementy HTML.

Domyślnie formularz nie jest w żaden sposób wyświetlany na stronie internetowej, widoczne są jedynie elementy znajdujące się w jego wnętrzu, jednak za pomocą CSS można nadać formularzowi dowolny wygląd.

Atrybuty

Accept-charset: Określa kodowanie znaków lub listę zestawów znaków oddzielonych spacjami dla danych wejściowych z formularza przesyłanych do serwera w celu przetworzenia. Jeśli dane zawierają znaki, które nie są obsługiwane przez określone kodowanie, przeglądarka próbuje określić dla nich odpowiednie kodowanie. Jeżeli nie można ustalić odpowiedniego kodowania, wówczas znaki kodowane są w kody numeryczne.

Wartość domyślna to zastrzeżony ciąg znaków „UNKNOWN” (przeglądarki interpretują tę wartość jako kodowanie znaków identyczne z kodowaniem dokumentu zawierającego element ). akcja: Wskazuje adres do przesłania danych z wypełnionego formularza, gdzie informacje te będą przetwarzane. autouzupełnianie: Określa, czy włączyć, czy wyłączyć autouzupełnianie formularza. Gdy włączone jest autouzupełnianie, przeglądarka automatycznie wypełnia wartości, które użytkownik wprowadził podczas poprzedniego korzystania z formularza. Możliwe wartości atrybutów:

• NA: przeglądarka automatycznie wyświetla wartości wprowadzone wcześniej przez użytkownika (wartość domyślna).
• wyłączony: Użytkownik musi wprowadzić wartości dla każdego pola za każdym razem, gdy korzysta z formularza. Wcześniej wprowadzone wartości nie zostaną pokazane.

Uwaga: Atrybut autouzupełniania nie jest obsługiwany przez przeglądarkę Opera.

Enctype: Określa sposób kodowania danych formularza po przesłaniu na serwer. Można go używać tylko w połączeniu z atrybutem method="post". Możliwa wartość:

• aplikacja/x-www-form-urlencoded: domyślnie: wszystkie znaki są kodowane przed wysłaniem (spacje są konwertowane na znaki „+”, a znaki specjalne są konwertowane na wartości ASCII HEX).
• dane wieloczęściowe/formularza: znaki nie są kodowane. Używany do elementów , którego atrybut typu jest ustawiony na „plik”.
• Zwykły tekst: spacje są konwertowane na znak „+”, ale nie kodują znaków specjalnych, takich jak apostrofy, na wartości szesnastkowe.

metoda: Określa metodę przesyłania danych HTTP, która będzie używana podczas przesyłania danych formularza. Możliwa wartość:

• Dostawać: Dane są przekazywane do paska adresu przeglądarki w postaci par nazwa=wartość poprzez dołączenie ich na końcu adresu URL. Znak zapytania (?) służy jako separator między głównym adresem URL a przesyłanymi danymi, a znak ampersand (&) służy do oddzielania przesyłanych danych od siebie. Metodę tę stosuje się przy przesyłaniu niewielkich ilości danych.
• post: dane nie są wysyłane jako część adresu URL, ale jako treść żądania przeglądarki. Ta metoda służy do przesyłania dużych ilości danych.

Jeśli atrybut metody nie zostanie określony, domyślnie zostanie użyta metoda GET. nazwa: Określa nazwę formularza. Nazwy można używać w języku JavaScript w celu odniesienia się do elementu po nazwie lub do danych formularza po jego przesłaniu. Jeżeli w jednym dokumencie zastosowano kilka formularzy, nie należy powtarzać ich nazw, a jako wartości atrybutu nie należy pozostawiać pustego ciągu znaków. novalidate: Wskazuje, że dane wprowadzone do formularza nie zostaną sprawdzone przed przesłaniem. Możliwe wartości atrybutu logicznego novalidate:

Uwaga: atrybut novalidate nie jest obsługiwany w przeglądarce IE9 i wcześniejszych wersjach oraz w przeglądarce Safari.

Cel: definiuje nazwę ramki lub słowo kluczowe określające, gdzie wyświetlać odpowiedź otrzymaną po przesłaniu formularza.

• _pusty: otwiera dokument w nowym oknie lub nowej karcie.
• _samego siebie: otwiera dokument w tym samym katalogu, w którym znajduje się łącze (domyślnie).
• _rodzic: otwiera dokument w ramce nadrzędnej.
• _szczyt: otwiera dokument na całą szerokość okna.
• nazwa_ramki: otwiera dokument w elemencie iframe, którego nazwa została podana jako wartość.

Etykietka obsługuje także globalne atrybuty i zdarzenia

Domyślny styl

formularz (wyświetlanie: blok; górny margines: 0em; )

Przykład

Nazwa:
Nazwisko:

Przeglądając strony internetowe, użytkownik przeważnie po prostu klika spinki do mankietów do poruszania się po stronach internetowych.

Ale jasne jest, że użytkownik czasami musi zapewnić własne pola wejściowe. Do tego typu interakcji zaliczają się:

• rejestracja i logowanie na stronach internetowych;
• wprowadzanie danych osobowych (imię i nazwisko, adres, dane karty kredytowej itp.);
• filtrowanie treści (za pomocą list rozwijanych, checkboxów itp.);
• przeprowadzanie wyszukiwania;
• pobieranie plików.

Aby sprostać tym potrzebom, HTML oferuje rozwiązania interaktywne sterownica formularze:

• pola tekstowe (dla jednej lub większej liczby linii);
• przełączniki;
• pola wyboru;
• listy rozwijane;
• widżety do pobrania;
• przesłać przyciski.

Kontrole te obejmują różne tagi HTML, ale większość z nich używa tagu . Ponieważ jest to element samozamykający się, o typie pola decyduje jego atrybut type:

Element

jest elementem blokowym, który definiuje interaktywny część strony internetowej. W rezultacie wszystkie elementy sterujące (takie jak , Lub <button>) musi być <i>wewnątrz</i> element <form> .</p><p>Dwa atrybuty HTML <b>niezbędny</b>:</p><ul><li>Akcja zawiera adres, który określa <i>Gdzie</i> informacje z formularza zostaną przesłane;</li><li>metodą może być GET lub POST i określa, czy <i>Jak</i> Informacje z formularza zostaną przesłane.</li> </ul><p>Zazwyczaj informacje z formularza są wysyłane do <b>serwer</b>. <i>Jak</i> dane te będą następnie przetwarzane poza zakresem niniejszej instrukcji.</p><p>Pomyśl o formularzu jako o zbiorze kontrolek, które współpracują ze sobą <b>jeden</b> operacja. Jeśli napisałeś formularz logowania do witryny, być może tak <b>trzy</b> pola:</p><ul><li>pole e-mail <input type="email"> </li><li>pole hasła <input type="password"> </li><li>przycisk przesyłania <input type="submit"> </li> </ul><p>Te trzy elementy HTML będą zawarte w jednym formularzu <span><form action="/login" method="POST"> </span>.</p><p>Podobnie możesz dodać formularz rejestracyjny na tej samej stronie HTML, w osobnym elemencie <form> .</p><h2>Pola tekstowe</h2><p>Prawie wszystkie formularze wymagają <b>tekst</b> dane wejściowe od użytkowników, umożliwiające wprowadzenie ich imienia i nazwiska, adresu e-mail, hasła, adresu itp. Pola tekstowe formularzy występują w różnych odmianach.</p><p>Choć pola te są bardzo podobne i pozwalają na wprowadzenie dowolnego rodzaju tekstu (nawet niepoprawnego), ich typ zapewnia specyficzny <b>semantyka</b> dla danych wejściowych, określające, jakie informacje mają być zawarte w polu <b>musieć</b> zawierać.</p><p>Przeglądarki mogą później nieznacznie zmienić interfejs kontrolki, aby go ulepszyć <i>interaktywność</i> lub zasugeruj, jakiej treści oczekujesz.</p><p>Na przykład pole hasła wyświetla kropki zamiast symboli. Pole liczbowe umożliwia zwiększanie/zmniejszanie wartości za pomocą klawiszy „w górę” i „w dół”.</p><h2>symbol zastępczy</h2><p>Mogą być wyświetlane pola tekstowe <b>sugestywny</b> tekst, który zniknie po wprowadzeniu jakiegoś tekstu.</p><p> <input type="text" placeholder="Wpisz swoje imię"> </p><p>Jeśli zaczniesz coś wpisywać, komunikat „Wpisz swoje imię” zniknie.</p><h2><label></h2><p>Ponieważ same elementy formularza nie są zbyt opisowe, zwykle poprzedza się je tekstem. <b>etykieta</b>.</p><p> <label>E-mail</label> <input type="email"> </p><p>Chociaż symbol zastępczy już zapewnia wskazówkę dotyczącą oczekiwanej treści, etykiety mają tę zaletę, że pozostają widoczne przez cały czas i można ich używać razem z innymi typami elementów formularzy, takimi jak pola wyboru lub przyciski opcji.</p><p>Chociaż do opisu elementów formularza można używać krótkich akapitów, użycie <label>jest semantycznie bardziej poprawne, ponieważ istnieją tylko w formach. <label>można także powiązać z konkretnym elementem formularza za pomocą atrybutu for odpowiadającego wartości id pola.</p><p> <label for="first_name">Nazwa</label> <input id="first_name" type="text"> </p><p>Po kliknięciu etykiety fokus przechodzi do pola tekstowego i umieszcza w nim kursor. Na razie ten pakiet wydaje się bezużyteczny, ale przyda się z polami wyboru i przełącznikami.</p><h2>Pola wyboru</h2><p><b>Pola wyboru</b>- Są to elementy formularzy, które mają tylko dwa stany: włączony lub wyłączony. Zasadniczo pozwalają użytkownikowi powiedzieć na coś „Tak” lub „Nie”.</p><p> <input type="checkbox">Zapamiętaj mnie</p><p>Ponieważ kliknięcie małego pola wyboru może być trudne, zaleca się umieszczenie w nim pola wyboru i jego opisu <label> .</p><p> <label> <input type="checkbox">Zgadzam się z warunkami</label> </p><p>Możesz kliknąć tekst „Zgadzam się na warunki”, aby przełączyć pole wyboru.</p><p>Domyślnie pole wyboru jest wyłączone. Możesz oznaczyć tę opcję jako włączoną, po prostu używając zaznaczonego atrybutu.</p><p> <label> <input type="checkbox" checked>Użyj mojego adresu rozliczeniowego</label> </p><h2>Przełączniki</h2><p>Możesz podać użytkownikowi <b>lista opcji</b> wybierane za pomocą przełączników.</p><p>Aby ten element formularza działał, Twój kod HTML musi <b>Grupa</b> listę przycisków opcji razem. Osiąga się to poprzez użycie tej samej wartości atrybutu name:</p><p> <label>Status rodziny</label> <label> <input type="radio" name="status">Pojedynczy</label> <label> <input type="radio" name="status">Żonaty</label> <label> <input type="radio" name="status">Rozwiedziony</label> <label> <input type="radio" name="status">Wdowiec</label> </p><p>Ponieważ wszystkie przyciski opcji używają tej samej wartości atrybutu name (w tym przypadku wartości status ), wybranie jednej opcji spowoduje zastąpienie wszystkich pozostałych. Przełączniki są <b>wzajemnie się wykluczające</b>.</p><h3>Różnica między przyciskami radiowymi i polami wyboru</h3><p>Chociaż pole wyboru istnieje <b>samemu</b>, przełączniki mogą pojawiać się tylko w formularzu <b>lista</b>(co oznacza co najmniej dwie opcje).</p><p>Dodatkowo kliknięcie pola wyboru jest <b>arbitralny</b>, podczas wybierania jednego z przycisków opcji <b>obowiązkowy</b>. Dlatego nie można wyłączyć przełącznika, jeśli wybierzesz opcję najbliższą. Na koniec zawsze wybierany jest jeden z przełączników.</p><h2>Menu rozwijane</h2><p>Jeśli liczba opcji do wyboru zajmuje zbyt dużo miejsca, możesz skorzystać z menu rozwijanych <select> .</p><p>Działają podobnie jak przełączniki, różnią się jedynie układem.</p><p> <select> <option>Styczeń</option> <option>Luty</option> <option>Marsz</option> <option>Kwiecień</option> <option>Móc</option> <option>Czerwiec</option> <option>Lipiec</option> <option>Sierpień</option> <option>Wrzesień</option> <option>Październik</option> <option>Listopad</option> <option>Grudzień</option> </select> </p><h3>Wielokrotny wybór z menu rozwijanego</h3><p>Jeśli dodasz atrybut wielokrotny, możesz zapewnić możliwość wyboru wielu opcji.</p><p> <label>Z jakich przeglądarek korzystasz?</label> <select multiple> <option>GoogleChrome</option> <option>Internet Explorera</option> <option>Mozilla Firefox</option> <option>Opera</option> <option>Safari</option> </select> </p><p>Wybierz wiele opcji, przytrzymując klawisz Ctrl (lub ⌘) i klikając. Może to być dobra alternatywa dla używania wielu pól wyboru w jednej linii.</p><h2>Przykład: pełny formularz rejestracyjny</h2> <form action="/signup" method="POST"> <p> <label>Odwołanie</label> <label> <input type="radio" name="title" value="Pan">Pan.</label> <label> <input type="radio" name="title" value="pani">Pani.</label> </p> <p> <label>Nazwa</label> <input type="text" name="first_name"> </p> <p> <label>Nazwisko</label> <input type="text" name="last_name"> </p> <p> <label>E-mail</label> <input type="email" name="email"> </p> <p> <label>Telefon</label> <input type="tel" name="phone"> </p> <p> <label>Hasło</label> <input type="password" name="password"> </p> <p> <label>Potwierdź hasło</label> <input type="password" name="password_confirm"> </p> <p> <label>Kraj</label> <select name="country"> <option>Kanada</option> <option>Francja</option> <option>Niemcy</option> <option>Włochy</option> <option>Japonia</option> <option>Rosja</option> <option>Wielka Brytania</option> <option>USA</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Zgadzam się na warunki użytkowania</label> </p> <p> <button>Rejestr</button> </p> </form> <p>Dostępne są również inne elementy formularza, ale przyjrzeliśmy się najczęściej używanym.</p> <p><b>Tagi HTML definiujące formularze HTML w witrynie</b></p> <p><b>Tworzymy strony internetowe i pojedyncze strony w Internecie</b> do komunikowania się z gośćmi.</p> <p><b>Formularze HTML</b> służą do rejestracji osób odwiedzających witrynę, do interaktywnych ankiet i głosowania, umożliwiają wysyłanie wiadomości, dokonywanie zakupów itp. <b>HTML</b> Formularz tworzony jest w jednym celu: zbieraniu, a następnie przekazywaniu informacji do przetwarzania za pomocą skryptu oprogramowania lub za pośrednictwem poczty elektronicznej.</p> <i> </i><h2>Przykładowy formularz HTML | Wejdź na stronę</h2> <p>Tagi, atrybuty i wartości</p> <ul><li><form> </form>- określić kształt.</li> <li>name="" - definiuje nazwę formularza.</li> <li>method="" - określa sposób przesyłania danych z formularza. Wartości: „get” (domyślne) i „post” . Często stosowana jest metoda „post”, która umożliwia przesyłanie dużych ilości danych.</li> <li>action="" - określa adres URL, pod który dane są przesyłane do przetwarzania. W naszym przypadku - enter_data.php ..</li> <li><input />- zdefiniować takie elementy formularza jak przyciski, przełączniki, pola tekstowe do wprowadzania danych.</li> <li>type="text" - definiuje pole tekstowe do wprowadzania danych.</li> <li>type="password" - definiuje pole do wpisania hasła, którego tekst będzie wyświetlany w postaci gwiazdek lub kółek.</li> <li>type="checkbox" - definiuje przycisk radiowy.</li> <li>type="hidden" - definiuje ukryty element formularza - służący do przesyłania dodatkowych informacji do serwera.</li> <li>size="25" - długość pola tekstowego w znakach.</li> <li>maxlength="30" - maksymalna dozwolona liczba wprowadzanych znaków.</li> <li>wartość="" - definiuje wartość, która zostanie wysłana do przetworzenia, jeśli dotyczy przycisków radiowych lub przełączników. Wartość tego atrybutu jako część pola tekstowego lub przycisku będzie pokazana na przykład jako Vasya lub Login w powyższym przykładzie.</li> </ul><h2>Przykładowy formularz HTML | Komentarze na stronie</h2> <table class="jsexam"><tr><td> <span> <title>Przykładowy formularz HTML</title><br> </head><br> <body><br> <form action="http://сайт/comments.php" method="post" name="commentform" id="commentform"><br> <p><input type="text" name="author" id="author" value="" size="25" /><br> <small>Nazwa</small><br></p><br> <p><input type="text" name="email" id="email" value="" size="25" /><br> <small>Poczta</small><br></p><br> <p><textarea name="comment" id="comment" cols="48" rows="8">

Tagi, atrybuty i wartości

• action="http://site/comments.php" - określa adres URL, na który zostaną przesłane dane z formularza.
• id="" - określa nazwę i identyfikator elementu formularza.
• name="" - definiuje nazwę elementu formularza.
• - zdefiniuj pole tekstowe jako część formularza.
• cols="" - określa liczbę kolumn pola tekstowego formularza.
• rows="" - określa liczbę wierszy pola tekstowego formularza.

Jeśli pomiędzy umieść tekst, zostanie on wyświetlony wewnątrz pola jako przykład, który można łatwo usunąć.

Przykładowy formularz HTML | Lista rozwijana

Pierwsza pozycja Druga pozycja Trzecia pozycja Czwarta pozycja

Tagi, atrybuty i wartości

• - zdefiniuj listę pozycji do wyboru.
• size="" - określa liczbę widocznych pozycji na liście. Jeśli wartość wynosi 1, mamy do czynienia z listą rozwijaną.
• - określić pozycje (pozycje) listy.
• wartość="" - zawiera wartość, która zostanie wysłana przez formularz na podany adres URL w celu przetworzenia.
• wybrane="wybrane" - podświetla element listy jako przykład.

Przykładowy formularz HTML | Lista z paskiem przewijania

Zwiększając wartość atrybutu size="" otrzymamy listę z paskiem przewijania:

Pierwsza pozycja Druga pozycja Trzecia pozycja Czwarta pozycja

Pierwsza pozycja Druga pozycja Trzecia pozycja Czwarta pozycja

W przypadku tej opcji należy użyć flagi multiple="multiple", która umożliwia wybranie wielu pozycji. Jej brak pozwala na wybranie tylko jednej pozycji.

type="submit" - definiuje przycisk.

type="reset" - definiuje przycisk resetowania.

value="" - definiuje etykietę na przycisku.

Zobacz dodatkowo:

Formularz HTML to narzędzie, za pomocą którego dokument HTML może wysłać pewne informacje do określonego punktu w świecie zewnętrznym, gdzie informacje zostaną w jakiś sposób przetworzone.

W tutorialu poświęconym HTMLowi dość trudno jest mówić o formularzach. Powód jest bardzo prosty: utworzenie formularza HTML jest znacznie łatwiejsze niż utworzenie „punktu w świecie zewnętrznym”, do którego formularz HTML będzie wysyłał informacje. W większości przypadków takim „punktem” jest program napisany w języku Perl lub C.

Programy przetwarzające dane przesyłane przez formularze nazywane są często skryptami CGI. Akronim CGI oznacza Common Gateways Interface. Pisanie skryptów CGI w większości przypadków wymaga dobrej znajomości odpowiedniego języka programowania i możliwości systemu operacyjnego Unix.

Obecnie dość powszechny stał się język PHP/FI, którego instrukcje można osadzać bezpośrednio w dokumentach HTML (dokumenty zapisywane są w postaci plików z rozszerzeniem *.pht lub *.php).

Formularze HTML przekazują informacje do programów obsługi w postaci par [nazwa zmiennej]=[wartość zmiennej]. Nazwy zmiennych należy podawać literami łacińskimi. Wartości zmiennych są traktowane przez procedury obsługi jako ciągi znaków, nawet jeśli zawierają tylko liczby.

Jak działa formularz HTML

Formularz otwiera się za pomocą tagu

i kończy się tagiem

. Dokument HTML może zawierać kilka formularzy, ale formularze nie powinny znajdować się jeden w drugim. Tekst HTML, w tym znaczniki, można umieszczać w formularzach bez ograniczeń.

Etykietka

może zawierać trzy atrybuty, z których jeden jest wymagany. Oto atrybuty:

Wymagany atrybut. Określa, gdzie znajduje się procedura obsługi formularza.

Określa, w jaki sposób (innymi słowy, przy użyciu metody protokołu przesyłania hipertekstu) dane z formularza zostaną przesłane do procedury obsługi. Prawidłowe wartości to METHOD=POST i METHOD=GET. Jeśli wartość atrybutu nie jest ustawiona, domyślnie przyjmuje się METHOD=GET.

Określa sposób kodowania danych z formularza HTML w celu wysłania ich do procedury obsługi. Jeśli wartość atrybutu nie jest ustawiona, wartością domyślną jest ENCTYPE=application/x-www-form-urlencoded.

Najprostszy formularz HTML

Aby rozpocząć proces przesyłania danych z formularza do handlera, potrzebna jest pewnego rodzaju kontrola. Utworzenie takiego organu kontrolnego jest bardzo proste:

Po napotkaniu takiej linii w formularzu przeglądarka rysuje na ekranie przycisk z napisem Wyślij (czytaj „prześlij” z naciskiem na drugą sylabę, od angielskiego „prześlij”), po kliknięciu wszystkie dane dostępne w formularz zostanie przesłany do procedury obsługi zdefiniowanej w tagu .

Etykietę przycisku można ustawić dowolnie, wprowadzając atrybut WARTOŚĆ="[Label]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:!}

Teraz wiemy już wystarczająco dużo, aby napisać prosty formularz HTML (przykład 11). Nie będzie zbierać żadnych danych, a jedynie powróci nas do tekstu tego rozdziału.

Najprostsza forma

Napis umieszczony na przycisku można w razie potrzeby przekazać obsłudze poprzez wprowadzenie do definicji przycisku atrybutu NAZWA=[nazwa] (czytaj „nazwa”, z ang. „nazwa”), np.:

Po kliknięciu takiego przycisku handler wraz ze wszystkimi innymi danymi otrzyma zmienną przycisku o wartości Let's go! .

Formularz może zawierać wiele przycisków przesyłania o różnych nazwach i/lub wartościach. Procedura obsługi może zatem działać inaczej w zależności od tego, który przycisk przesyłania kliknął użytkownik.

Jak formularz HTML zbiera dane

Istnieją inne rodzaje elementów . Każdy element musi zawierać atrybut NAME=[nazwa], który określa nazwę elementu (i odpowiednio nazwę zmiennej, która zostanie przekazana do procedury obsługi). Należy podać nazwę tylko literami łacińskimi. Większość przedmiotów musi zawierać atrybut WARTOŚĆ="[wartość]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} I , jednakże ten atrybut jest opcjonalny, ponieważ wartość odpowiedniej zmiennej użytkownik może wprowadzić za pomocą klawiatury.

Podstawowe typy elementów :

TYP=tekst

Definiuje okno do wprowadzenia wiersza tekstu. Może zawierać dodatkowe atrybuty SIZE=[liczba] (szerokość okna wejściowego w znakach) oraz MAXLENGTH=[liczba] (maksymalna dozwolona długość ciągu wejściowego w znakach).

Przykład:

Definiuje okno o szerokości 20 znaków do wprowadzania tekstu. Domyślnie okno zawiera tekst Iwan, który użytkownik może edytować. Edytowany (lub nieedytowany) tekst jest przekazywany do procedury obsługi w zmiennej użytkownika.

TYP=hasło

Definiuje okno do wpisania hasła. Całkowicie podobny do typu tekstowego, tyle że zamiast symboli wprowadzonego tekstu wyświetla na ekranie gwiazdki (*). Przykład:

Definiuje okno o szerokości 20 znaków do wpisania hasła. Maksymalna dozwolona długość hasła wynosi 10 znaków. Wpisane hasło przekazywane jest do modułu obsługi w zmiennej pw.

TYP=radio

Definiuje przycisk radiowy. Może zawierać dodatkowy zaznaczony atrybut (wskazuje, że przycisk jest zaznaczony). W grupie przycisków radiowych o tej samej nazwie może znajdować się tylko jeden przycisk opcji oznaczony etykietą.

Przykład:

9600 b/s
14400 b/s
28800 b/s

Definiuje grupę trzech przycisków opcji oznaczonych jako 9600 bps, 14400 bps i 28800 bps. Pierwszy z przycisków jest początkowo oznaczony. Jeśli użytkownik nie zaznaczy innego przycisku, do procedury obsługi zostanie przekazana zmienna modemu o wartości 9600. Jeśli użytkownik zaznaczy inny przycisk, do procedury obsługi zostanie przekazana zmienna modemu o wartości 14400 lub 28800.

TYP=pole wyboru

Definiuje kwadrat, w którym można wykonać znak. Może zawierać dodatkowy zaznaczony atrybut (wskazuje, że kwadrat jest zaznaczony). W przeciwieństwie do przycisków opcji, grupa kwadratów o tej samej nazwie może mieć wiele oznaczonych kwadratów.

Przykład:

Komputery osobiste
Stacje robocze
Lokalne serwery sieciowe
Serwery internetowe

Definiuje grupę czterech kwadratów. Początkowo zaznaczono drugi i czwarty kwadrat. Jeżeli użytkownik nie dokona żadnych zmian, do procedury obsługi zostaną przekazane dwie zmienne: comp=WS i comp=IS.

TYP=ukryty

Definiuje ukryty element danych, który nie jest widoczny dla użytkownika podczas wypełniania formularza i jest przekazywany do obsługi w niezmienionej postaci. Czasami przydatne jest posiadanie takiego elementu w formularzu, który jest od czasu do czasu przeprojektowywany, aby osoba obsługująca wiedziała, z którą wersją formularza ma do czynienia. Możesz sam łatwo wymyślić inne możliwe zastosowania.

Przykład:

Definiuje ukrytą zmienną wersji, która jest przekazywana do procedury obsługi z wartością 1.1.

TYP=reset

Definiuje przycisk, którego kliknięcie przywraca formularz HTML do jego pierwotnego stanu. Ponieważ podczas używania tego przycisku do modułu obsługi nie są przekazywane żadne dane, przycisk resetowania może nie mieć atrybutu nazwy.

Przykład:

Definiuje przycisk Wyczyść pola formularza, którego kliknięcie przywraca pierwotny stan formularza HTML.

Oprócz elementów , formularze HTML mogą zawierać menu i pola wprowadzania tekstu .</p> <p>Menu <SELECT>z n elementów wygląda mniej więcej tak:</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[wartość 1]">[Tekst 1] <OPTION VALUE="[wartość 2]">[tekst 2] ... <OPTION VALUE="[n wartość]">[tekst nr]</SELECT> </p><p>Jak widać menu zaczyna się od tagu <SELECT>i kończy się tagiem</SELECT>. Etykietka <SELECT>zawiera wymagany atrybut NAME, który określa nazwę zmiennej generowanej przez menu.</p> <p>Etykietka <SELECT>może także zawierać atrybut MULTIPLE, którego obecność wskazuje, że z menu można wybrać wiele pozycji. Większość przeglądarek wyświetla menu <SELECT MULTIPLE>w postaci okna, w którym znajdują się pozycje menu (wysokość okna w wierszach można ustawić za pomocą atrybutu ROZMIAR=[liczba]). Menu <SELECT>w większości przypadków jest pokazane jako menu rozwijane.</p> <p>Etykietka <OPTION>definiuje pozycję menu. Wymagany atrybut VALUE ustawia wartość, która zostanie przekazana do procedury obsługi, jeśli zostanie wybrany ten element menu. Etykietka <OPTION>może zawierać zaznaczony atrybut wskazujący, że element jest domyślnie zaznaczony.</p> <h3>Spójrzmy na mały przykład:</h3> <SELECT NAME="selection"> <OPTION VALUE="opcja 1" checked>opcja 1 <OPTION VALUE="Opcja 2">Opcja 2 <OPTION VALUE="opcja 3">Opcja 3</SELECT> <p>Fragment ten definiuje menu składające się z trzech elementów: Opcja 1, Opcja 2 i Opcja 3. Domyślnie wybrany jest element Opcja 1. Programowi obsługi zostanie przekazana zmienna wyboru, której wartością może być opcja 1 (domyślna), opcja 2 lub opcja 3.</p> <p>Po wszystkim, czego już się nauczyliśmy, żywioł <TEXTAREA>może wydawać się całkiem proste. Na przykład:</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50>A oto twój adres...

Wszystkie atrybuty są wymagane. Atrybut NAME określa nazwę pod jaką zawartość okna zostanie przekazana do handlera (w przykładzie - adres). Atrybut ROWS ustawia wysokość okna w wierszach (w przykładzie 5). Atrybut COLS ustawia szerokość okna w znakach (w przykładzie 50).

Tekst umieszczony pomiędzy tagami I, reprezentuje domyślną zawartość okna. Użytkownik może go edytować lub po prostu usunąć.

Ważne jest, aby wiedzieć, że w oknie znajdują się rosyjskie litery przekazane do procedury obsługi mogą zostać przekonwertowane na odpowiadające im obiekty znakowe.</p> <h3>Przykład:</h3> <p>Aby zademonstrować użycie formularzy HTML, napisałem mały program w PHP, który znajduje się pod adresem:</p><p>Http://206.31.82.215/hp/nc/fd-win.pht</p><p>Dane źródłowe zostaną przesłane do tego programu w formie opisanej w przykładzie 12:</p><p> <HTML> <HEAD> <TITLE>Przykład 12</TITLE> </HEAD> <H1>Nieco bardziej złożona forma</H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Powiedz nam coś o sobie...</H2> <P>Podawanie prawdziwych informacji nie jest konieczne. Do celów demonstracyjnych odpowiednie są również fikcyjne.</P> <P>Nazwa: <INPUT TYPE=text SIZE=40 NAME=fn><BR>Nazwisko: <INPUT TYPE=text SIZE=40 NAME=ln><BR>Podłoga: <INPUT TYPE=radio NAME=gender VALUE="Mężczyzna" checked>Mężczyzna <INPUT TYPE=radio NAME=gender VALUE="Kobieta">Kobieta <BR>Wiek: <INPUT TYPE=text SIZE=5 NAME=age>lata <BR> <INPUT TYPE=submit VALUE="Uruchom moduł obsługi"></P> </FORM> </BODY> </HTML> </p><p>Wypełnij formularz HTML, kliknij przycisk i zobacz, co się stanie...</p> <p><b>Mała sztuczka <br>lub jak wysłać formularz pocztą</b></p><p>Wszystko w porządku, powiedzą sceptycy, ale po co, do cholery, ludziom potrzebne są formularze HTML, którzy nie mają nic, czym mogliby je przetworzyć? Jest to częściowo prawdą, ale tylko częściowo.</p> <p>HTML zapewnia dość potężny mechanizm wysyłania treści formularzy pocztą elektroniczną. Oto jak to wygląda w praktyce.</p> <p>Powiedzmy, że nieznacznie zmieniliśmy Przykład 12. Zamiast ciągu znaków</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>weszliśmy do szeregu</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>Pamiętaj, że zmieniliśmy algorytm kodowania na tekst/zwykły, co oznacza, że ​​​​właściwie całkowicie wyłączyliśmy kodowanie.</p> <p>Załóżmy teraz, że użytkownik podał imię Iwan, nazwisko Petrov, płeć męską i wiek 22 lata. Teraz pytanie brzmi: co się stanie, jeśli użytkownik kliknie przycisk Uruchom moduł obsługi?</p> <p>Odpowiedź jest prosta. Następująca wiadomość zostanie automatycznie wysłana na adres user@mail.box e-mailem:</p><p>Fn=Iwan ln=Petrow płeć=mężczyzna wiek=22</p><p>Niestety nie wszyscy użytkownicy będą mogli korzystać z tego formularza HTML. Faktem jest, że całą pracę związaną z redagowaniem wiadomości i uruchomieniem programu pocztowego w celu jej wysłania tak naprawdę przejmuje przeglądarka użytkownika. Oznacza to, że konfiguracja dostępu użytkownika do Internetu musi zapewniać jednoczesne funkcjonowanie protokołu przesyłania hipertekstu i protokołu dostarczania poczty wychodzącej. Nie zawsze jest to możliwe. Jednak nawet jeśli jest to niemożliwe, nie wydarzy się nic śmiertelnego. Przeglądarka wyświetli po prostu komunikat o błędzie.</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="data"> <div class="data__top clearfix"> <div class="data__print"> <a href='javascript:window.print(); void 0;'>Foka</a> </div> </div> <div class="data__bottom clearfix"> <div class="data__share"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,evernote,whatsapp,skype"></div> </div> </div> </div> <div class="navi"> <a href="https://comuedu.ru/pl/solutions/kakoi-teg-ispolzuetsya-dlya-sozdaniya-spiska-opredelenii-html-numerovannyi-i.html" class="navi__prev"></a> <!-- /next_post --> <a href="https://comuedu.ru/pl/windows/chto-takoe-promokod-i-kak-on-rabotaet-kak-ispolzovat-promokody.html" class="navi__next"></a> <!-- /next_post --> </div> </div> </div> <div class="news-blocks clearfix"> <div class="news-block"> <div class="papers"> <div class="papers__title">Również interesujące:</div> <div class="papers__items"> <style> </style> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/different/zavis-kompyuter-vyklyuchaetsya-chto-delat-kompyuter-zavis-i-ne-vyklyuchaetsya-chto-delat-nevernaya-nastr.html"><img src="/uploads/47a8b0c63b5d7d41dae62f903c3445ed.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/pl/different/zavis-kompyuter-vyklyuchaetsya-chto-delat-kompyuter-zavis-i-ne-vyklyuchaetsya-chto-delat-nevernaya-nastr.html">Komputer zawiesił się i nie można go wyłączyć!</a> </div> <div class="papers__category"> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/modems/nabor-form-html-html-formy-mnogostrochnoe-tekstovoe-pole--.html"><img src="/uploads/1b9deb911f7578d1d24d1e331a9c77b0.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/pl/modems/nabor-form-html-html-formy-mnogostrochnoe-tekstovoe-pole--.html">Zestaw formularzy HTML. Formularze HTML. Pole tekstowe wielowierszowe - znacznik</a> </div> <div class="papers__category"> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/network/kak-otsledit-iphone-sposoby-i-sekrety-poisk-aifona-po-geolokacii-cherez.html"><img src="/uploads/5ba9fc4720f22a8cffa65ea0124c7f62.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/pl/network/kak-otsledit-iphone-sposoby-i-sekrety-poisk-aifona-po-geolokacii-cherez.html">Wyszukiwanie iPhone'a poprzez geolokalizację za pomocą komputera za pomocą aplikacji, EMEI lub specjalnych programów Jak znaleźć iPhone'a za pomocą programu</a> </div> <div class="papers__category"> </div> </div> </div> </div> </div> </div> <div class="news-block"> <div class="papers"> <div class="papers__title">Zalecamy przeczytanie:</div> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/android/lg-l9-proshivka-sposoby-razblokirovki-zagruzchika-lg-optimus-l9.html"> <img width="50" height="50" src="/uploads/a6f2668d462935c90eca1f95be2c93c4.jpg" class="attachment-50 size-50 wp-post-image" alt="Metody odblokowania bootloadera LG Optimus L9" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-12 00:09:57</div> <div class="papers__name"> <a href="https://comuedu.ru/pl/android/lg-l9-proshivka-sposoby-razblokirovki-zagruzchika-lg-optimus-l9.html">Metody odblokowania bootloadera LG Optimus L9</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/operating-systems/adb-devices-ne-vidit-esli-ddms-ne-vidit-adb-devices-v-eclipse-chto-delat.html"> <img width="50" height="50" src="/uploads/f0fe4f4dabdcbe2f5385bb26f5892ded.jpg" class="attachment-50 size-50 wp-post-image" alt="Jeśli DDMS nie widzi urządzeń adb w Eclipse" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-12 00:09:57</div> <div class="papers__name"> <a href="https://comuedu.ru/pl/operating-systems/adb-devices-ne-vidit-esli-ddms-ne-vidit-adb-devices-v-eclipse-chto-delat.html">Jeśli DDMS nie widzi urządzeń adb w Eclipse</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/android/skachat-rasshirenie-yandeks-dlya-gugl-hrom-rasshireniya-dlya-yandeks-brauzera.html"> <img width="50" height="50" src="/uploads/f0263e6ce1e6116bcd0c2a00fd22e721.jpg" class="attachment-50 size-50 wp-post-image" alt="Pobierz rozszerzenie Yandex dla przeglądarki Google Chrome" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-11 00:06:50</div> <div class="papers__name"> <a href="https://comuedu.ru/pl/android/skachat-rasshirenie-yandeks-dlya-gugl-hrom-rasshireniya-dlya-yandeks-brauzera.html">Pobierz rozszerzenie Yandex dla przeglądarki Google Chrome</a> </div> </div> </div> </div> </div> </div> </div> <div class="rate clearfix"> <div class="papers__title">Kontynuując temat:</div> </div> <div class="rate clearfix"> <div class="rate__img"> <a href="https://comuedu.ru/pl/modems/kak-proshit-kastomnoi-proshivkoi-sony-xperia-p-pereproshivaem-sony-xperia-s-pomoshchyu.html"> <img width="150" height="150" src="/uploads/e149928eac5d2cbd8430b0a446131638.jpg" class="attachment-alm-thumbnail size-alm-thumbnail wp-post-image" alt="Flashowanie Sony Xperii za pomocą Flashtoola" sizes="(max-width: 150px) 100vw, 150px" / loading=lazy loading=lazy> </a> </div> <div class="rate__ovh"> <div class="rate__label"> <span>Modemy</span> </div> <div class="rate__name"> <a href="https://comuedu.ru/pl/modems/kak-proshit-kastomnoi-proshivkoi-sony-xperia-p-pereproshivaem-sony-xperia-s-pomoshchyu.html">Flashowanie Sony Xperii za pomocą Flashtoola</a> </div> <div class="rate__description"> <p>Sony Xperia P to smartfon japońskiej marki działający na systemie Android 2.3. Tutaj możesz znaleźć oprogramowanie sprzętowe, zresetować ustawienia, instrukcje, a także uzyskać informacje, jak uzyskać...</p> </div> </div> </div> <!-- /next_post --> </div> <div class="button-menu"></div> <div class="page__right"> <div class="menu"> <div class="menu__exit">×</div> <ul> <li><a href="https://comuedu.ru/pl/category/wi-fi/" class="link-catalog">Wi-Fi</a> </li> <li><a href="https://comuedu.ru/pl/category/linux/" class="link-catalog">Linuksa</a> </li> <li><a href="https://comuedu.ru/pl/category/windows/" class="link-catalog">Okna</a> </li> <li><a href="https://comuedu.ru/pl/category/different/" class="link-catalog">Różnorodny</a> </li> <li><a href="https://comuedu.ru/pl/category/network/" class="link-catalog">Sieci</a> </li> <li><a href="https://comuedu.ru/pl/category/smart-tv/" class="link-catalog">Smart TV</a> </li> <li><a href="https://comuedu.ru/pl/category/solutions/" class="link-catalog">Rozwiązania</a> </li> <li><a href="https://comuedu.ru/pl/category/android/" class="link-catalog">Android</a> </li> </ul> </div> <div id="husevi1" style="height:400px;width:290px;" align="center"></div> <div class="page__hidden-mobile"> <div class="papers"> <div class="papers__tabs"> <div class="active" data-eq="0">Nowe artykuły</div> <span>/</span> <div data-eq="1">Popularny</div> </div> <div class="papers__blocks"> <div class="papers__block active"> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/internet/novogodnii-million-bilain-kupi-telefon-vyigrai-million-akciya-ot.html"> <img width="50" height="50" src="/uploads/04932c51bfe08e9fdcfb781eeffe2e8e.jpg" class="attachment-50 size-50 wp-post-image" alt="Promocja od Beeline „Noworoczny milion!" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-11 00:06:50</div> <div class="papers__name"> <a href="https://comuedu.ru/pl/internet/novogodnii-million-bilain-kupi-telefon-vyigrai-million-akciya-ot.html">Promocja od Beeline „Noworoczny milion!</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/pl/category/internet/">Internet</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/computer/kakaya-antenna-dlya-interneta-ot-iota-luchshe-delaem-vneshnyuyu.html"> <img width="50" height="50" src="/uploads/dd132e75729aec098e23a064d5cef1f9.jpg" class="attachment-50 size-50 wp-post-image" alt="Wykonanie anteny zewnętrznej w celu wzmocnienia sygnału Yota własnymi rękami Domowe anteny na 3G Yota" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-11 00:06:50</div> <div class="papers__name"> <a href="https://comuedu.ru/pl/computer/kakaya-antenna-dlya-interneta-ot-iota-luchshe-delaem-vneshnyuyu.html">Wykonanie anteny zewnętrznej w celu wzmocnienia sygnału Yota własnymi rękami Domowe anteny na 3G Yota</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/pl/category/computer/">Komputer</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/android/kak-vosstanovit-akkaunt-gugl-na-androide-esli-zabyl-parol-kak.html"> <img width="50" height="50" src="/uploads/cdb8356d55d23e54b94048e54f1a9681.jpg" class="attachment-50 size-50 wp-post-image" alt="Jak odzyskać swoje konto Google (Google) – pełna instrukcja" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-10 00:09:22</div> <div class="papers__name"> <a href="https://comuedu.ru/pl/android/kak-vosstanovit-akkaunt-gugl-na-androide-esli-zabyl-parol-kak.html">Jak odzyskać swoje konto Google (Google) – pełna instrukcja</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/pl/category/android/">Android</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/apple/kak-vosstanovit-vse-fotografii-na-kompyutere-mozhno-li.html"> <img width="50" height="50" src="/uploads/520825e53e5658bab3098fc7bb764887.jpg" class="attachment-50 size-50 wp-post-image" alt="Czy można odzyskać usunięte zdjęcia?" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-10 00:09:22</div> <div class="papers__name"> <a href="https://comuedu.ru/pl/apple/kak-vosstanovit-vse-fotografii-na-kompyutere-mozhno-li.html">Czy można odzyskać usunięte zdjęcia?</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/pl/category/apple/">Jabłko</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/computer/narisovat-sebe-avatarku-kak-sdelat-avatarku-dlya-gruppy.html"> <img width="50" height="50" src="/uploads/38f3edbcca49643308b2c6a9833215e8.jpg" class="attachment-50 size-50 wp-post-image" alt="Jak zrobić awatar dla grupy VKontakte?" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-10 00:09:22</div> <div class="papers__name"> <a href="https://comuedu.ru/pl/computer/narisovat-sebe-avatarku-kak-sdelat-avatarku-dlya-gruppy.html">Jak zrobić awatar dla grupy VKontakte?</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/pl/category/computer/">Komputer</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="https://comuedu.ru/pl/modems/perekodirovka-pulta-dlya-shlagbauma-kak-zaprogrammirovat-pult-ot.html"> <img width="50" height="50" src="/uploads/c9e93d7c8fe8c0646d6cfeec57f543b2.jpg" class="attachment-50 size-50 wp-post-image" alt="Jak zaprogramować pilota do bramy" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-02-10 00:09:22</div> <div class="papers__name"> <a href="https://comuedu.ru/pl/modems/perekodirovka-pulta-dlya-shlagbauma-kak-zaprogrammirovat-pult-ot.html">Jak zaprogramować pilota do bramy</a> </div> <div class="papers__category"> <a href="https://comuedu.ru/pl/category/modems/">Modemy</a> </div> </div> </div> </div> </div> <div class="papers__block"> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/pl/operating-systems/kak-perenesti-sistemu-na-novyi-disk-perenos-sistemy-na-drugoi.html"> <img width="50" height="50" src="/uploads/814fae98f39e5c932bd32e78a073a9b8.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Przenoszenie systemu na inny lub nowy dysk twardy" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/pl/operating-systems/kak-perenesti-sistemu-na-novyi-disk-perenos-sistemy-na-drugoi.html">Przenoszenie systemu na inny lub nowy dysk twardy</a> </div> <div class="papers__category"><a href="https://comuedu.ru/pl/category/operating-systems/" rel="tag">system operacyjny</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/pl/internet/kak-rabotat-v-ehele-sozdanie-formul-v-excel-ispolzovanie-teksta-v.html"> <img width="50" height="50" src="/uploads/4a4d0a6e568856d8bdd138d76af988ed.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Jak pracować w Excelu. Tworzenie formuł w Excelu. Używanie tekstu w formułach" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/pl/internet/kak-rabotat-v-ehele-sozdanie-formul-v-excel-ispolzovanie-teksta-v.html">Jak pracować w Excelu. Tworzenie formuł w Excelu. Używanie tekstu w formułach</a> </div> <div class="papers__category"><a href="https://comuedu.ru/pl/category/internet/" rel="tag">Internet</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/pl/windows/osobennosti-plagina-savefrom-net-dlya-yandex-obozrevatelya-pochemu-ne.html"> <img width="50" height="50" src="/uploads/ee92051e0a9939d97de495d81bdc2bfe.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Jak pobrać dowolny film z YouTube za pomocą jednego klawisza Zapisz od oficjalnego" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/pl/windows/osobennosti-plagina-savefrom-net-dlya-yandex-obozrevatelya-pochemu-ne.html">Jak pobrać dowolny film z YouTube za pomocą jednego klawisza Zapisz od oficjalnego</a> </div> <div class="papers__category"><a href="https://comuedu.ru/pl/category/windows/" rel="tag">Okna</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/pl/computer/stoit-li-udalyat-zashchitnik-windows-10-kak-polnostyu-otklyuchit-zashchitnik.html"> <img width="50" height="50" src="/uploads/d1578f551a01fcae7a7d695c6b12c017.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Jak całkowicie wyłączyć program Windows Defender (Microsoft Defender)" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/pl/computer/stoit-li-udalyat-zashchitnik-windows-10-kak-polnostyu-otklyuchit-zashchitnik.html">Jak całkowicie wyłączyć program Windows Defender (Microsoft Defender)</a> </div> <div class="papers__category"><a href="https://comuedu.ru/pl/category/computer/" rel="tag">Komputer</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/pl/wi-fi/krasivye-znachki-na-rabochii-stol-gde-skachat-ikonki-dlya-papok-i-kak-ih.html"> <img width="50" height="50" src="/uploads/dbf75d872069880ad883f776070eb592.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Skąd pobrać ikony folderów i jak je zainstalować" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/pl/wi-fi/krasivye-znachki-na-rabochii-stol-gde-skachat-ikonki-dlya-papok-i-kak-ih.html">Skąd pobrać ikony folderów i jak je zainstalować</a> </div> <div class="papers__category"><a href="https://comuedu.ru/pl/category/wi-fi/" rel="tag">Wi-Fi</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="https://comuedu.ru/pl/solutions/kakoi-teg-ispolzuetsya-dlya-sozdaniya-spiska-opredelenii-html-numerovannyi-i.html"> <img width="50" height="50" src="/uploads/8361afa2938822c4cbec12cc776b53d6.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="HTML: Lista numerowana i wypunktowana" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="https://comuedu.ru/pl/solutions/kakoi-teg-ispolzuetsya-dlya-sozdaniya-spiska-opredelenii-html-numerovannyi-i.html">HTML: Lista numerowana i wypunktowana</a> </div> <div class="papers__category"><a href="https://comuedu.ru/pl/category/solutions/" rel="tag">Rozwiązania</a></div> </div> </div> </div> </div> </div> </div> <div class="comments"> <div id="husevi2" class="husevi-sticky" style="height:500px;width:254px;" align="center"></div> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="footer__top"> <div class="cnt"> <div class="footer__nav"> <ul> <li><a href="https://comuedu.ru/pl/feedback.html">Łączność</a></li> <li><a href="">Reklama</a></li> <li><a href="">O witrynie</a></li> </ul> </div> <div class="footer__counter"> </div> <div class="footer__logo1" align="right"> <img style="max-height:60px;" src="/assets/logo.png" alt="" loading=lazy loading=lazy> </div> </div> </div> <div class="footer__bottom"> <div class="cnt"> <div class="footer__copyright">© comuedu.ru 2024 Strona poświęcona technologii komputerowej</div> </div> </div> </div> <a href="#top" class="up"></a> </div> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/jquery-1.12.0.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/owl.carousel.min.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/mousewheel.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/jscrollpane.min.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/scripts.js?v=8"></script> <!--[if lt IE 10]> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/placeholder.js"></script> <![endif]--> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-ajaxify-comments/js/wp-ajaxify-comments.min.js?ver=1.5.0'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-polls/polls-js.js?ver=2.73.8'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp_testme/js/testme.js?ver=1.1'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-2", "margin_top" : 10, "margin_bottom" : 112, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['cb_widget-2'] } ; </script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9'></script> </body> </html>