در حال نمایش 1 نوشته (از کل 1)
  • نویسنده
    نوشته ها
  • #33024

    academyit
    مشارکت کننده

    آموزشی در رابطه با switching فرم های ورود و ثبت نام با زبان ها HTML و CSS

    نمایش دمو

    در این آموزش ما میخواهیم که 2 تا HTML فرم بسازیم که بین فرم ورود و ثبت نام سوییچ میشه که ابزاراون به وسیله شبه کد :target می باشد.ما به وسیله CSS به اون طرح هاو آیکون هایی رو اضافه می کنیم.
    ایده ای که پشت این دمو است اینه که به کاربران یه فرم ورود ای نشون میدیم که میتونن به فرم ثبت نام سوییچ کنن.
    در ادامه ما به بررسی دمو می پردازیم.
    قسمت HTML

    در HTML ما هر 2 تا فرم رو قرار می دهیم و به وسیله ی CSS دومین فرم رو پنهان می کنیم. در زیر شما کد را مشاهده می کنید. و چند قسمت جالبش رو به شما توضیح خواهیم داد.
    ?

    <div id=”container_demo” >
    <!– hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 –>


    <div id=”wrapper”>
    <div id=”login” class=”animate form”>
    <form action=”mysuperscript.php” autocomplete=”on”>
    <h1>Log in</h1>
    <p>
    <label for=”username” class=”uname” data-icon=”u” > Your email or username </label>
    <input id=”username” name=”username” required=”required” type=”text” placeholder=”myusername or mymail@mail.com“/>
    </p>
    <p>
    <label for=”password” class=”youpasswd” data-icon=”p”> Your password </label>
    <input id=”password” name=”password” required=”required” type=”password” placeholder=”eg. X8df!90EO” />
    </p>
    <p class=”keeplogin”>
    <input type=”checkbox” name=”loginkeeping” id=”loginkeeping” value=”loginkeeping” />
    <label for=”loginkeeping”>Keep me logged in</label>
    </p>
    <p class=”login button”>
    <input type=”submit” value=”Login” />
    </p>
    <p class=”change_link”>
    Not a member yet ?
    Join us
    </p>
    </form>
    </div>

    <div id=”register” class=”animate form”>
    <form action=”mysuperscript.php” autocomplete=”on”>
    <h1> Sign up </h1>
    <p>
    <label for=”usernamesignup” class=”uname” data-icon=”u”>Your username</label>
    <input id=”usernamesignup” name=”usernamesignup” required=”required” type=”text” placeholder=”mysuperusername690″ />
    </p>
    <p>
    <label for=”emailsignup” class=”youmail” data-icon=”e” > Your email</label>
    <input id=”emailsignup” name=”emailsignup” required=”required” type=”email” placeholder=”mysupermail@mail.com”/>
    </p>
    <p>
    <label for=”passwordsignup” class=”youpasswd” data-icon=”p”>Your password </label>
    <input id=”passwordsignup” name=”passwordsignup” required=”required” type=”password” placeholder=”eg. X8df!90EO”/>
    </p>
    <p>
    <label for=”passwordsignup_confirm” class=”youpasswd” data-icon=”p”>Please confirm your password </label>
    <input id=”passwordsignup_confirm” name=”passwordsignup_confirm” required=”required” type=”password” placeholder=”eg. X8df!90EO”/>
    </p>
    <p class=”signin button”>
    <input type=”submit” value=”Sign up”/>
    </p>
    <p class=”change_link”>
    Already a member ?
    Go and log in
    </p>
    </form>
    </div>

    </div>
    </div>
    ما یک سری مزیت های HTML5 رو به این جا اضافه می کنیم و ازیه سری input های جدید هم استفاده می کنیم. Input type=password به صورت اتوماتیک چیزی که کاربر وارد می کند را از دید کاربر پنهان می کند. و همینطور input type=email به مرورگر اجازه می دهد که که چک کند که آیا ایمیلی که کاربر ایجاد کرده به فرم قابل قبولی هست یا نه. ما همینطور ازصفت require=required استفاده کردیم. مرورگری که داریم از این صفت براش استفاده می کنیم اجازه نمیده که یه کاربر بدون پر کردن اون فیلد ها دکمه ی submit را فشار دهد. و به javascript ای نیاز نیست.
    Autocomplete=on فیلد های فرم رو بر اساس کاربر قبلی پر می کند . ما می توانیم Placeholder های زیبایی هم برای input هامون در نظر بگیریم که راهنما های خوبی به شمار میاند.
    حالا 2 نکته وجود دارد یکی این که شما ممکنه که متوجه 2 تا تگ a شده باشین که در بالای فرم هاتون قرار دارند.این باعث میشه که وقتی داریم با لینک ها کار میکنیم پروژه ما درست کار کنه . برای همین باعث میشه که صفحه ی ما یک لود کلی نداشته باشه و باعث بشه فقط سوییچ کنه.
    ترفند دومی که میشه زد اینه که از همون فونت هابا ایکون استفاده کنیم. ما از data-attribute برای نمایش آیکون ها استفاده خواهیم کرد . با قرار دادن data-icon=”icon_character” با اون character مورد نظر در HTML فقط لازمه که یک صفت CSS اضافه کنیم که به همه ی آیکون ها استایل بده.
    قسمت css
    برای وضوح کد در این قسمت آموزش من اون قسمت های تابع رو پاک کردم ولی خب تو فایل ها میتونین به راحتی درسترسی داشته باشین . دوباره من یه سری کد های پیشرفته ی CSS3 و یه سری ترفندهای عالی اون رو استفاده میکنم که البته در همه ی مرور گر ها ممکن کار نکنه . بیاین شروع کنیم.
    ادامه مطلب

در حال نمایش 1 نوشته (از کل 1)

کاربر گرامی برای پاسخ به این موضوع اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.