WEB DİZAYN
ADIM ADIM KAYIT
Adım adım yapacağımız işlemler için alternatif bir uygulamadır. Sitelerde kullanılan kayıt sistemleri için veya anketler içini iyi ve faydalı bir uygulamadır. HEAD kısmına aşağıdaki kodu yapıştırınız.
< link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
< script src="js/jquery-1.2.6.js" type="text/javascript" charset="utf-8">< /script>
< script src="js/form-fun.jquery.js" type="text/javascript" charset="utf-8">< /script>
BODY kısmına bunu yazmamız yeterli olacaktır.
< div id="page-wrap">
< h1>Adım Adım < span>Kayıt< /span>< /h1>
< form action="#" method="post">
< fieldset id="step_1">
< legend>1. Adım< /legend>
< label for="num_attendees">
Kaç kişi kayıt edeceksiniz.
< /label>
< select id="num_attendees">
< option id="opt_0" value="0">Lütfen Seçiniz< /option>
< option id="opt_1" value="1">1< /option>
< option id="opt_2" value="2">2< /option>
< option id="opt_3" value="3">3< /option>
< option id="opt_4" value="4">4< /option>
< option id="opt_5" value="5">5< /option>
< /select>
< br />
< div id="attendee_1_wrap" class="name_wrap push">
< h3>Tam olarak adınızı giriniz :< /h3>
< label for="name_attendee_1">
1. İsim :
< /label>
< input type="text" id="name_attendee_1" class="name_input">< /input>
< /div>
< div id="attendee_2_wrap" class="name_wrap">
< label for="name_attendee_2">
2. İsim :
< /label>
< input type="text" id="name_attendee_2" class="name_input">< /input>
< /div>
< div id="attendee_3_wrap" class="name_wrap">
< label for="name_attendee_3">
3. İsim :
< /label>
< input type="text" id="name_attendee_3" class="name_input">< /input>
< /div>
< div id="attendee_4_wrap" class="name_wrap">
< label for="name_attendee_4">
4. İsim :
< /label>
< input type="text" id="name_attendee_4" class="name_input">< /input>
< /div>
< div id="attendee_5_wrap" class="name_wrap">
< label for="name_attendee_5">
5. İsim :
< /label>
< input type="text" id="name_attendee_5" class="name_input">< /input>
< /div>
< /fieldset>
< fieldset id="step_2">
< legend>2. Adım< /legend>
< p>
Şirket adınıza ait rozet istermisiniz ?
< /p>
< input type="radio" id="company_name_toggle_on" name="company_name_toggle_group">< /input>
< label for="company_name_toggle_on">Evet< /label>
< input type="radio" id="company_name_toggle_off" name="company_name_toggle_group">< /input>
< label for="company_name_toggle_off">Hayır< /label>
< div id="company_name_wrap">
< label for="company_name">
Şirket İsmi :
< /label>
< input type="text" id="company_name">< /input>
< /div>
< div class="push">
< p>
Gruptaki herkes, özel konaklama ihtiyacı olacak mı?
< /p>
< input type="radio" id="special_accommodations_toggle_on" name="special_accommodations_toggle">< /input>
< label for="special_accommodations_toggle_on">Evet< /label>
< input type="radio" id="special_accommodations_toggle_off" name="special_accommodations_toggle">< /input>
< label for="special_accommodations_toggle_off">Hayır< /label>
< /div>
< div id="special_accommodations_wrap">
< label for="special_accomodations_text">
Lütfen aşağıda yazınız :
< /label>
< textarea rows="10" cols="10" id="special_accomodations_text">< /textarea>
< /div>
< /fieldset>
< fieldset id="step_3">
< legend>3. Adım< /legend>
< label for="rock">
Eğlenceye hazırmısınız ?
< /label>
< input type="checkbox" id="rock">< /input>
< br />
< input type="submit" id="submit_button" class="push" value="KAYIT">< /input>
< /fieldset>
< /form>
< /div>
