webdesign / development + awesome
Hráme sa s formulármi, CSS3 a jQuery [video]
Aké jednoduché je vytvoriť formulár ako tento od nuly? Takto jednoduché:
Klikni na "povedz mi o tom viac" a dozvieš sa, ako presunúť labels priamo do inputov, ako zariadiť aby zmizli, keď do nich človek klikne a iné JavaScript srandy (warning: includes jQuery).
Update: ako správne poznamenal Andrej v diskusii, toto .focus( function() { if (elem.val() === text) ... ) } )
nie je ideálne riešenie. Neošetruje situáciu, keď používateľ napíše "Meno" do kolonky Meno. "Malo by si to nejak pamätať, či je v inpute text od užívateľa, alebo label."
Môžeme napríklad využiť jQuery.data() a o každom inpute evidovať, či bol editovaný.
elem.data('edited', false);
elem.change(function() { elem.data('edited', true); });
<-- zmena hodnoty inputu
Následne:
.focus( function() { if ( !elem.data('edited') ) { elem.val('').css( css_focused ); } })
.blur ( function() { if ( !elem.val() ) { elem.val( text ).css( css_blured ); elem.data('edited', false); } });
HTML
<form action="" method="post"> <label for="meno">Meno</label> <input type="text" id="meno" name="meno"> <label for="email">Email</label> <input type="text" id="email" name="email"> <label for="text">Text</label> <textarea id="text" name="text"></textarea> <input type="submit" value="do something"> </form>
CSS
body { background: #e3e3e3; font: 13px/16px Tahoma; color: #555; } form { width: 350px; margin: 0 auto; margin-top: 75px; } h1 { margin-bottom: 25px; text-shadow: 1px 1px 0px #f3f3f3; } input, textarea { display: block; margin-bottom: 15px; padding: 7px; background: #fafafa; border: 1px solid; border-color: #ccc #fcfcfc #fcfcfc #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } input { width: 150px } textarea { width: 330px; height: 75px; } input[type=submit] { width: 100px; cursor: pointer; border-color: #fcfcfc #ccc #ccc #fcfcfc; color: #555; font: bold 11px Tahoma; box-shadow: 1px 1px 1px #ddd; -moz-box-shadow: 1px 1px 1px #ddd; -webkit-box-shadow: 1px 1px 1px #ddd; } input[type=submit]:hover { border-color: #999; }
jQuery
$(function() { var form = $('form'), inputs = $('form').find(':input').not(':input[type=submit]'); inputs.each(function() { var elem = $(this), label = elem.prev(), text = label.text(); var css_blured = { 'color': '#afafaf', 'font-style': 'italic' }, css_focused = { 'color': '#333', 'font-style': 'normal' }; label.hide(); elem.data('edited', false); elem.change(function() { elem.data('edited', true); }); elem.val( text ) .css( css_blured ) .focus( function() { if ( !elem.data('edited') ) { elem.val('').css( css_focused ); } }) .blur ( function() { if ( !elem.val() ) { elem.val( text ).css( css_blured ); elem.data('edited', false); } }); }); $('#meno, #email').css('float', 'left'); $('#text').css('clear', 'both'); $('#meno').css('margin-right', '14px'); form.submit(function() { return false; }); });
6 komentárov
komentuj ku každému komentáru sa v databáze ukladá iba meno, text a dátum, iba za účelom zobrazenia pod článkomneukladá sa email, IP adresa ani informácie o prehliadači a údaje sa nepoužívajú na reklamu, newsletter, na žiadnu ekonomickú aktivitu, nikam sa neposielajú, sú v databáze len aby sa mohli zobraziť pod článkom
Andrej Herich [ Piatok 8.10.2010, 15:29 ]
Videá sú výborné, ale zdá sa mi, že toto je trochu blbé, nie?
.focus( function() { if (elem.val() === text) elem.val('').css( css_focused ) } )
Čo ak sa niekto volá "Meno"? Napíše to tam, klikne preč, klikne späť a vymaže sa mu to. Malo by si to nejak pamätať, či je v inpute text od užívateľa, alebo label.
yablko [ Piatok 8.10.2010, 16:53 ]
Máš pravdu. :)
Napadlo ma to po dokončení videa, ale ako som spomínal tu som hovado lenivé a točiť tie videá je vcelku pain, tak som to nechal tak. ehm :)
Rozhodne ale máš pravdu a budem sa snažiť tieto veci písať aspoň do príspevkov, keď už mi vo videu uniknú.
alliedko [ Nedeľa 2.1.2011, 23:14 ]
pekny tutorial :)
yablko [ Pondelok 3.1.2011, 00:20 ]
ďakujem :)
kubo [ Nedeľa 8.5.2011, 09:04 ]
Ešte ma napadlo, zrušiť Chrome outline. (outline: none)
Aj tuto na BRM... Lebo potom pri písaní nieje vidieť krásu jednoduchosti :)
etet [ Štvrtok 22.8.2013, 17:30 ]
erteetete