• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dlaczego nie widać pola tekstowego obok przycisku "Przeglądaj"

VPS Starter Arubacloud
0 głosów
324 wizyt
pytanie zadane 29 czerwca 2020 w HTML i CSS przez asdsad Początkujący (420 p.)

Witam wszystkich! :) Uczę się podstaw html i zastanawiam się dlaczego nie widać pola tekstowego obok przycisku "przeglądaj"? Dołączam poniżej efekt jaki chce uzyskać oraz kod napisany przeze mnie

<html>
<head>
</head>
<body>
<form action="..." method="post">
<p>Prześlij plik muzyczny MP3:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Prześlij" />
</form>
</body>
</html>

Z góry dziękuje za pomoc! :)

2 odpowiedzi

+1 głos
odpowiedź 29 czerwca 2020 przez Comandeer Guru (599,730 p.)
wybrane 29 czerwca 2020 przez asdsad
 
Najlepsza

Hmm… Z którego roku jest ta książka? I w jakiej przeglądarce jest zrobiony screen?

Bo myślę, że to nie jest pole tekstowe, tylko stary wygląd pola input[type=file] → https://www.quirksmode.org/dom/inputfile.html

Wstawienie tam pola tekstowego jest w końcu całkowicie bez sensu.

komentarz 29 czerwca 2020 przez asdsad Początkujący (420 p.)
Witaj :) Jest to książka - Jon Duckett "HTML i CSS", 2018r. Zrobiłem  zdjęcie fragmentu z tej książki. Strona została otworzona w Mozilli Firefox. Dziwne jest dla mnie to, że w książce jest napisane - "zastosowanie type="file" powoduje utworzenie pola przypominającego zwyczajne jednowierszowe pole tekstowe oraz umieszczonego obok niego przycisku "przeglądaj". Cały kod przepisałem z książki z wyjątkiem input text ponieważ go tam nie było i to pole tekstowe na otworzonej stronie się nie pojawiało, dodałem input text i wizualnie wszystko jest poprawnie :)
komentarz 29 czerwca 2020 przez Comandeer Guru (599,730 p.)

Książka Ducketta jest stara. Mam wrażenie, że Helion w 2018 po prostu odświeżyło tłumaczenie, nie treść.

To, o czym mówi Duckett, było prawdą te 5-6 lat temu, obecnie nie jest. To pole obecnie wygląda zupełnie inaczej, dlatego rozwiązanie z polem tekstowym jest błędne. Tam tego pola nie ma, po prostu od czasu napisania książki zmienił się wygląd pól formularza.

+1 głos
odpowiedź 29 czerwca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Ponieważ go nie dodałeś:p

przed

<input type="file" name="user-song" />

dodaj

<input type="text"><br />

 

komentarz 29 czerwca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
Tak jak napisali moi przedmówcy, ten "input" to część inputa typu file a nie osobny element
komentarz 29 czerwca 2020 przez DawidK Nałogowiec (37,910 p.)
Takie rozwiązanie jest trochę dziwne. W tej sytuacji można wpisać w input dowolny tekst i nie będzie się pokrywał ze ścieżką lub nazwą ładowanego pliku (zakładam, że taka funkcjonalność jest do osiągnięcia.)

To co przychodzi mi do głowy to dodanie np paragrafu w divie, ostylowanie go tak input i nasłuchiwanie eventu na zmianę pliku.
komentarz 29 czerwca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Można też dać temu inputowi readonly a następnie tak jak mówiłeś dać nasłuchiwanie na zmianę pliku a nastęnie ustwić value inpputa typu text na

document.getElelmentByTagName("User-song").value

Ale to raczej kilka poziomów zaawansowania wyżej :P

komentarz 29 czerwca 2020 przez Comandeer Guru (599,730 p.)

Ale po co… Przeglądarki nawet nie udostępniają ścieżki do pliku wybranego w input[type=file]. Dostajemy fake'ową ścieżkę.

komentarz 29 czerwca 2020 przez Comandeer Guru (599,730 p.)

Wyświetli sztuczną ścieżkę, np. C:\fakepath\Screenshot 2020-06-29 at 16.35.16.png – otrzymuję coś takiego, nawet pomimo pracy na macOS-ie.

Nazwa pliku jest prawdziwa, ale wcale by mnie nie zdziwiło, gdyby w przyszłości nawet ona była zamieniana na jakiś UUID.

Podobne pytania

0 głosów
1 odpowiedź 367 wizyt
0 głosów
8 odpowiedzi 795 wizyt
pytanie zadane 18 lipca 2016 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 299 wizyt
pytanie zadane 19 stycznia 2018 w C i C++ przez foruminfa Początkujący (310 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...