Volite web dizajn?
Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.
Login & register form – basic HTML + Css styles
Nedavno smo objavili post sa osnovnim HTML kodovima za Search box i nekoliko različitih Css stilova. Danas nastavljamo uređivanje formi sa Login i Register formama odnosno sa formularima za prijavu i registraciju.
Za početnike i one koji su zaboravili, da se podsjetimo osnovnog HTML koda:
<div class="box"> <form> <fieldset> <legend>Login</legend> Login to complete your purchase. <label>Username: </label> <label>Password: </label> </fieldset> </form> < !–end of login form–> <form> <fieldset> <legend>Register</legend> If you do not already have an account, please create a new account to register. </fieldset> </form> < !–end of register form–></div> < !–end of box–> |
Time smo dobili ovo:
login form basic
Želimo li u css-u uljepšati izgled naše login-register forme potrebno je dati klasu svim dijelovima. Uzeti ćemo za primjer formu čije dijelove možete vidjeti na slici 2
dijelovi login i register forme
Za ovu formu kodovi idu ovako:
HTML
<div class="box3"> <form action="""> <fieldset> <legend>Login</legend> Login to complete your purchase. <label>Username: </label> <label>Password: </label> </fieldset> </form> < !–end of login form–> <form action="”""> <fieldset> <legend>Register</legend> If you do not already have an account, please create a new account to register. </fieldset> </form> < !–end of register form–></div> < !–end of box3–> |
CSS
.box3{background:#000; width:272px} .box3 fieldset {padding:10px 4px; position:relative; margin-bottom:10px; border:#f6e4a6 1px dotted;} .box3 p{color:#fff;} .box3 legend {font-size:1.1em; padding:8px 0; font-weight:bold;color:#fff;} .box3 .login p {margin-bottom:1em; margin-top:0pt;} .box3 p label {width:98%;} .box3 p input {width:98%; background:#f6e4a6; padding:3px; color:#d27d00; border: 1px solid #d27d00;} .box3 .login p label {float:left; line-height:2em; margin-right:3%; text-align:right; width:32%; } .box3 .login p input {width:60%; background:#f6e4a6; padding:3px; color:#d27d00; border:1px solid #d27d00;} .box3 .login-button {margin-left:35%; width:55px; cursor: pointer; border:none; width:55px; height:20px; background:url(images/orangebutton.png) right no-repeat; cursor:pointer; outline:none; border:none; color:#ffffff;} form p.notice {font-weight:bold;} .box3 .login .submit-button{border:none;width:100px;height:20px;background:url(images/bigorangebutton.png) right no-repeat; cursor: pointer;outline:none;border:none;color:#ffffff;} |
Pogledajte DEMO sa 5 različitih gotovih stilova login i register forme, a downloadirati ih možete zajedno sa slikama i ikonama na mojoj web stranici www.weberica.net. Tamo ćete naći i iste takve stilove za search formu.
osnovni HTML + Css form stilovi
Slični sadržaj:
- Search box - HTML basic + Css styles (Jako slično)
- Višestruki "span" u CSS-u (jedan jako zanimljivi logo) (Slično)
- Zašto trebamo koristiti "blending options" u WEB dizajnu (Slično)
- Basic layout - osnovni raspored i širine kolona u web dizajnu (Slično)
- Web stranica na više jezika - google translate - automatski online prevoditelj na vašoj web stranici (Slično)
8 komentara
Trackbacks & Pingbacks
Ostavite komentar
Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.
Super! Kako ste znali da mi baš ova tematika treba?
Mogu samo reći da ste me totalno zarazili i svaki dan nešto novo naučim kod vas.
Hvala i mnogo uspjeha u radu.
Drago mi je da smo ti pomogli, svrati nam opet 🙂
nice1
odlican blog!
html nece da mi prihvati java skript i ne pojavljuje se obrazac na sajtu za registraciju.
javascript?
java skript koji ste naveli uopste ne funkcionise.
Ubacim ga u html kod i dignem ga na stranicu i nista.
Adresa sajta je http://www.pirate.rs
e odlican tut bas mi ovo treba uzeo sam host i ocu da uradim svoj sajt i ovo mi bas treba svaka cas autoru 😀