Dodanie „wymagane” tekst do formularza HTML za pomocą CSS

mam <form>, który wygląda tak:Dodanie „wymagane” tekst do formularza HTML za pomocą CSS

<form> 
    <input type="text" name="name" id="name" /><span class="required"></span> 
</form>

Co chcę zrobić, to pokazać jakiś tekst, taki jak * lub Required w elemencie <span>, zamiast „hard coding” tekst o każdym takim miejscu muszę tekst tak forma wygląda mniej więcej tak:

[input box] Required

google wokół i stwierdził, że może to być zrobione przez style CSS za pomocą content takich jak:

.required:before 
{ 
    content: "aaaa" 
}

ale powinienem być przy użyciu tej techniki (nie jest obsługiwany w każdym większym przeglądarce na przykład) lub tam jest bardziej preferowany sposób zrobić tego rodzaju rzeczy?

Dzięki

UPDATE Ps. Nie chcę używać do tego JavaScriptu, wystarczy zwykły CSS.

Źródło

2010-09-09 Zabba

Zgadzam się, że dodanie treści za pomocą CSS jest w większości przypadków nieprawidłowe. Jednak wizualnie podkreślając wymagane pole uważam za całkowicie w porządku w ten sposób.

content nie jest obsługiwany wystarczająco szeroko (IE nie obsługuje go w ogóle IIRC).

To, co możesz może zrobić, ma "wymagany" zakres zawiera obraz tła zawierający "wymagany" tekst lub gwiazdkę. Używanie tekstu graficznego ma pewne wady, ale żadne z nich nie ma rozwiązania opartego na jQuery.

Źródło

2010-09-09 07:09:36

Pls zobacz mój komentarz @Pranay Rana powyżej również. Jeśli użyję atrybutu "obraz w tle", to nie jest on taki sam jak atrybut "content", z tą różnicą, że w przypadku "treści" dodaję ciąg znaków i "obraz-tła" dodaję obrazek? Ani "content", ale oba dodają "prezentowane" wizualnie "dane", prawda? – Zabba

@Zabba ściśle mówiąc, tak. Obaj nie są zsynchronizowani z filozofią oddzielania treści i prezentacji. Ale jeśli to działa dla ciebie, biorąc pod uwagę wszystkie wady (tekst graficzny nie jest czytelny w czytnikach ekranu, nie drukuje się itp.) Zazwyczaj mówię, że to nie ma znaczenia. –

@Zabba: Różnica polega na tym, że 'background-image' jest szeroko obsługiwany. – mpen

Myślę, że powinieneś patrzeć na JavaScript. Dodawanie treści do tagów z określonymi klasami/identyfikatorami to jedna z rzeczy, do której jest używany JavaScript. Istnieje wiele bibliotek, które przyspieszają czas programowania - jQuery, Prototype, Dojo i MooTools.

Źródło

2010-09-09 06:59:55 Extrakun

Dzięki Extrakun, powinienem był wspomnieć o tym, że chciałem tego uniknąć. Zaktualizowano pytanie. – Zabba

Nie sądzę, że oprócz JavaScript istnieje inne rozwiązanie po stronie klienta. Możesz wtedy spojrzeć na programowanie po stronie serwera, które pozwala używać szablonów i prostych programów do duplikowania treści. – Extrakun

możesz użyć jQuery do tego.

jQuery to biblioteka JavaScript:

zapisu w nagłówku ten kod

$(document).ready(function(){ 
    $(span[class=required]).innerText='<sometext>'; 
});

ale u musi pobrać tę wtyczkę. ale możesz używać javascript też

Źródło

2010-09-09 07:02:47 AEMLoviji

To jest doskonałe rozwiązanie, nawet z przykładowym kodem .: +1. Rozważ użycie "ty" zamiast "u", ale sprawi, że twój styl pisania będzie bardziej dojrzały. –

Nie działa dla mnie (błąd składni). Jednym ze sposobów, w jaki mogłem go uruchomić, było: $ (dokument) .ready (function() { $ ('span.required'). Text ('*'); }); – jarmod

Zdecydowanie nie powinien używać CSS, aby to zrobić! Boże nie! : p

Jak wspomniano wyżej użyj javascript - ale jeśli chcesz tego uniknąć, musisz użyć skryptów po stronie serwera - więc naucz się PHP.

Źródło

2010-09-09 07:05:47

+1 za obsługę strony serwera – cjk

, dlaczego dziękuję. :) –

Nie zgadzam się w tym konkretnym przypadku: Rozpoczęcie używania języka po stronie serwera do zbudowania formularza jest o wiele bardziej kludgy niż kawałek CSS do renderowania, powiedzmy, gwiazdki. Generalnie jednak masz rację. –

Sprawdź to: Content

aslo sprawdzić ten Kompatybilność alt text

Nie używaj

czuję, że nie należy korzystać z treści oświadczenia w ogóle. Dodaje zawartość do strony, a CSS służy do dodawania prezentacji do strony, a nie treści. Dlatego uważam, że powinieneś używać JavaScriptu, jeśli chcesz dynamicznie generować treści. CSS to niewłaściwe narzędzie do tej pracy.

Źródło

2010-09-09 07:07:24

microsoft znów uderza ... :( –

Ale jeśli CSS jest przeznaczony tylko do prezentacji, dlaczego CSS ma atrybut treści? Przeszukałem go w W3C (http://www.w3.org/TR/2009/CR- CSS2-20090908/generate.html # propdef-content) i mówi: "Wygenerowana zawartość nie zmienia drzewa dokumentu, w szczególności nie jest zwracana do procesora języka dokumentu (np. Do reparacji)." Oznacza to to jest naprawdę "prezentacja" i nie dodawanie "zawartości" do strony, prawda? – Zabba

Nie sądzę, żebym doszedł do tego argumentu, że nie powinien być używany, ponieważ dodaje "treść" do strony. Wymagane "blurb nie jest bardziej treścią niż obraz w tle, ikona lub kolory informacyjne, które CSS już przekazuje.Nie powinien być używany do wstawiania akapitów, ale na coś takiego, myślę, że jest to doskonale semantycznie odpowiednie. IE nie obsługuje go bardzo dobrze, a ja chciałbym użyć tagu darn, a następnie JS to fi x to tylko w uszkodzonych przeglądarkach. – mpen

Jak zauważyli inni, CSS może to zrobić, ale nie jest w pełni obsługiwany, a także nie jest właściwą metodą rozwiązania tego problemu. Jeśli jest to absolutnie niezbędne, aby pojawił się "wymagany" tekst, musisz go dodać do kodu HTML. JavaScript jest w pewnym stopniu odpowiednim rozwiązaniem, ale tylko wtedy, gdy nie można edytować kodu źródłowego. Podczas gdy treść może być generowana za pomocą JS, to widocznie będzie dostępna tylko dla osób z włączoną obsługą JavaScript, co dodatkowo komplikuje obsługę. Gdy ktoś za pięć lat znajdzie się na stronie, aby zmienić kod, początkowo zastanawia się, skąd pochodzi "wymagany" tekst.

Innym rozwiązaniem, które byłyby dość szybkie i bardzo schludny byłoby dać rozpiętości obraz tła gwiazdką i zawierają klucz wyżej postaci:

* required field

Źródło

2010-09-09 07:36:33

Podoba mi się część "Kiedy ktoś patrzy na stronę za pięć lat, aby dokonać zmiany kodu" - dziękuję, nie myślałem o tym kącie. – Zabba

Powinieneś dodać ten tekst w HTML. Inne rozwiązania nie są dostępne - niedowidzący użytkownicy (na przykład) nie będą świadomi, że pole jest wymagane.

Źródło

2010-09-09 08:14:41

Dodanie „wymagane” tekst do formularza HTML za pomocą CSS

Odpowiedz

Powiązane problemy