Forum PHP.pl > [CSS]Formatowanie formularzy

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Formatowanie formularzy

Forum PHP.pl > Forum > Przedszkole

gizmo1985

16.03.2010, 22:39:48

Witam
Może to głupie pytanie, ale nie mam dużego doświadczenia z CSS

Muszę sformatować formularz, ale nie wiem jak to zrobić poprawnie

Załóżmy, że mamy formularz:

[PHP] pobierz, plaintext 
<form action="login.php" method="post">
 
   Login:  <input type="text" name="login" >
   Hasło: <input type="password" name="haslo"> 
 
[PHP] pobierz, plaintext

No i tu wiadomo jakoś da się to układać, ale jak mam różne długości tekstu, to już nie jest tak fajnie ...

[PHP] pobierz, plaintext 
border:1px dashed #3399CC; 
background:#DDF1FB; 
width:200px; 
font-size:12px; 
font-weight:bold; 
padding:5px; 
[PHP] pobierz, plaintext

To mi formatuje sam input...Ale nie wiem jak poustawiać te divy, żeby np. inputy były w jednej linii , tekst w drugiej..., żeby to miało ręce i nogi ...

krzysztof_kf

16.03.2010, 22:43:49

dodaj klasę do danego inputa np

Kod

.selektor {
// Twoja zawartość

Potem dla inputa

Kod

gizmo1985

16.03.2010, 22:48:10

No ok

To działa fajnie ... nowa umiejętność

Generalnie teraz jak stworzę DIVA dla całości, to poformatuję czcionki i.t.d, ale dalej nie wiem jak to ładnie ułożyć

[PHP] pobierz, plaintext 
text                                      pole
bardzodługaśnyteskt              pole
[PHP] pobierz, plaintext

Rozumiesz, gdzie mam problem ?

krzysztof_kf

16.03.2010, 22:53:48

z czuciem kolego przykład

Kod

.selektor {
// Twoja zawartość
}

.selektor input.text {
//ustawienie wyglądu co tylko chcesz dla inputa text
}

.selektor input.password {
//ustawienie wyglądu co tylko chcesz dla password text
}

gizmo1985

16.03.2010, 23:02:01

Rozumiem idee, ale:

1. W dalszym ciągu edytujemy chyba tylko inputboxy ?
2. Nie działa to u mnie :/

krzysztof_kf

16.03.2010, 23:07:07

tak tylko inputy a co byś chciał więcej hmmm najlepiej pokaż na przykładzie obrazek czy coś kolwiek

gizmo1985

16.03.2010, 23:10:40

hehe

Tak jak pisałem wczesniej...Sam input, już mam ładny

Teraz problem polega na tym, zeby cały formularz wyglądał po ludzku ...

[PHP] pobierz, plaintext 
login                                     input
haslo                                    input
aletentekstjuzjestdluzszy        input
 
 
[PHP] pobierz, plaintext

A nie w taki sposób :

[PHP] pobierz, plaintext 
login  input
haslo input
aletentekstjuzjestdluzszy input
 
[PHP] pobierz, plaintext

Rozumiesz mój pomysł ?

krzysztof_kf

16.03.2010, 23:14:24

może to zmęczenie konkrety co chcesz oprócz inputa zmienić sam nie wiem co tło jakąś kobietę itp itd

gizmo1985

16.03.2010, 23:16:34

Estetyczne poukładanie

tylko o to mi chodzi ...

Nie wiem, jak ustawić w kolumnach input boxy
i w osobnych kolumnach labele ...

Cały czas chodzi mi o estetyczne ustawienie całości ...

nitek

16.03.2010, 23:23:39

zapewne chodzi o coś w stylu:

Kod

<html>
<head>
<title></title>
<style>
label {display:block;width:300px;float:left;clear:left;}
input {float:left;}
</style>
</head>
<body>

<label>bla bla bla</label> <input type="text">
<label>bla bla bla bla bla</label> <input type="text">

</body>
</html>

gizmo1985

16.03.2010, 23:46:02

Dokłądnie o to mi chodziło

DZIĘKUJĘ

nitek

16.03.2010, 23:51:54

nie wiem czemu się nie dostosowuje - pisałem z ręki bez sprawdzania.
bardziej elegancko możesz tez spróbować w ten sposób:

Kod

<html>
<head>
<title></title>
<style>
ul {list-style:none;}
ul li {width:500px;}
label {float:left;}
input {float:right;width:100px;clear;both;}
</style>
</head>
<body>

<ul>
<li> <label>bla bla bla</label> <input type="text" value="1"> </li>
<li> <label style="clear:both;">bla bla bla bla bla</label> <input type="text"> </li>
</ul>

</body>
</html>

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.