• 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"

Aruba Cloud - Virtual Private Server VPS
0 głosów
511 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 (606,480 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 (606,480 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 (606,480 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 (606,480 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ź 712 wizyt
0 głosów
8 odpowiedzi 1,115 wizyt
pytanie zadane 18 lipca 2016 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 385 wizyt
pytanie zadane 19 stycznia 2018 w C i C++ przez foruminfa Początkujący (310 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,654 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...