Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Formularz rejestracji
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
starach
Cześć wszystkim.
Przez lekkie pozycjonowanie rozumiem pozycjonowanie elementów strony - w tym wypadku formularza -
- przy użyciu jak najmniejsze ilości znaczników HTML. Czyli zrzucenie większości zadań na CSS

Chciałbym aby pola formularza były oddalone od tekstu je opisującego.
W taki sposób aby owe pola znalazły się równo jedno pod drugim.
Jak to zrobić oszczędzając sobie wpisywania dużej ilości znaczników HTML ? Albo jak to zrobić w ogóle ?
CSS:
  1. div.registration { padding:50px; }
  2. div.registration form { width:80%; margin:0 auto; border:1px solid #000; }
  3. div.registration form p { width:100%; margin:5px; text-align:left; font-size:14px; }
  4. div.registration form input { height:12px; width:120px; font-size:12px; line-height:20px; background:none; }
  5. div.registration form input.button { height:21px; width:240px; font-size:12px; line-height:21px; background:none; }
HTML:
  1. <div class="registration">
  2. <form method="POST" action="http://localhost/registration/confirm.html">
  3. <p>Name (display) <input type="text" name="name"></p>
  4. <p>User name (login) <input type="text" name="username"></p>
  5. <p>Password <input type="password" name="password1"></p>
  6. <p>Retype password <input type="password" name="password2"></p>
  7. <p>Email address <input type="text" name="email1"></p>
  8. <p>Confirm your email <input type="text" name="email1"></p>
  9. <p><input class="button" type="submit" value="Register"> <input class="button" type="button" value="Resend avtivation email"></p>
  10. </form>
  11. </div>
Crozin
Popraw kod na bardziej semantyczny:
  1. <div class="registration">
  2. <form method="post" action="...">
  3. <legend>Formularz rejestracji</legend>
  4. <label><input type="text" name="name" /> Name (display)</label>
  5. <label><input type="text" name="username" /> User name (login)</label>
  6. <label><input type="password" name="password" /> Password</label>
  7. </form>
  8. </div>
CSS
Kod
.registration legend{display: none;}
.registration label{
  display: block;
  width: 300px;
  margin: 2px 0;
  overflow: hidden;
}
.registration input{
  float: right;
}
starach
Wielkie dzięki.
Jest jednak jeszcze kilka szczegółów o które chciałbym zapytać.
1) IE. opisy pól są wyśrodkowane mimo iż dodałem text-align:left; - Jak temu zaradzić ?
2) Co masz na myśli pisząc semantyczny ? Że po label jest input a nie opis pola ?
3) Czy w swoim kodzie w parametrze fieldset dałeś display:none w jakiś szczególnym celu ?
4) Słyszałem że znaczniki <fieldset> są niepoprawnie obsługiwane przez IE wpłynie to jakoś na wyświetlanie tego formularza ?
CSS:
  1. div.registration { padding:25px; }
  2. div.registration fieldset { width:70%; padding:10px; }
  3. div.registration label { display:block; width:100%; margin:2px 0; font-size:14px; text-align:left; overflow:hidden; }
  4. div.registration form input { float:right; width:45%; height:12px; font-size:12px; line-height:20px; background:none; }
  5. div.registration form input.btn_submit { width:100%; height:21px; margin-top:5px; font-size:12px; line-height:12px; background:none; }
HTML:
  1. <div class="registration">
  2. <form method="post" action="http://localhost/deidara/registration/confirm.html">
  3. <legend>Registration</legend>
  4. <label><input type="text" name="name" /> Name (display)</label>
  5. <label><input type="text" name="username" /> User name (login)</label>
  6. <label><input type="password" name="password1" /> Password</label>
  7. <label><input type="password" name="password2" /> Retype password</label>
  8. <label><input type="text" name="email1" /> Email address</label>
  9. <label><input type="text" name="email2" /> Confirm your email</label>
  10. <label><input class="btn_submit" type="submit" value="Register" /></label>
  11. </form>
  12. </div>

No i oczywiście wielki plus ( Pomógł ) dla ciebie smile.gif
Crozin
Ad. 1) W stylach dla div.registration form input dodaj text-align: left; (teraz masz ustawione jedynie dla <label />)
Ad. 2) Chodziło mi o dziesiątki elementów <p> - to są akapity, a lista pół formularza (z opsami) nie jest akapitem. Dodaktowo pola formlarza powinny być grupowane przy użyciu <fieldset> (dobrze jest też dodać <legend> aby w przypadku braku włączonej obsługi stylów było wiadomo czego dotyczy formularz (a dokładniej dany zestaw pól) - <legend> ułatwia też nawigację po stronie osobom niewidomym)
Ad. 3) Element <legend> ukryłem (nie wiem jak ma wyglądać Twoja strona, ale jeżeli jest on niepotrzebny to już lepiej dodać mu display: none niż go w ogóle nie dawać)
Ad. 4) Nie przypominam sobie, aby IE miał jakiś problem z <fieldset>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.