آموزش W3CSS

آموزش W3.CSS – فرم ها

W3.CSS، برای طراحی فرم ها، CSSای بسیار زیبا و واکنش گرا داره. CSSهای زیر مورد استفاده قرار میگیرن:

نام کلاس

توضیحات

w3-group

یک container قاب دار (bordered) را نمایش میده. برای گروه بندی لیبل ها و ورودی ها (input) استفاده میشه.

w3-input

یک کنترل ورودی زیبا.

w3-label

یک لِیبلِ زیبا.

w3-checkbox w3-checkmark

یک دکمه ی رادیویی/checkbox زیبا.

مثال

w3css_forms.htm

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body> 
      <form class="w3-container w3-card-8">
         <div class="w3-group">      
            <input class="w3-input" type="text" style="width:90%" required>
            <label class="w3-label">User Name</label>
         </div>
         <div class="w3-group">      
            <input class="w3-input" type="text" style="width:90%" required>
            <label class="w3-label">Email</label>
         </div>
         <div class="w3-group">      
            <textarea class="w3-input" style="width:90%" required></textarea>
            <label class="w3-label">Comments</label>
         </div>
         <div class="w3-row">
            <div class="w3-half">
               <label class="w3-checkbox">
                  <input type="checkbox" checked="checked">
                  <div class="w3-checkmark"></div> Married
               </label>
			   <br>
               <label class="w3-checkbox">
                  <input type="checkbox">
                  <div class="w3-checkmark"></div> Single
               </label>
			   <br>
               <label class="w3-checkbox">
                  <input type="checkbox" disabled>
                  <div class="w3-checkmark"></div> Don't know (Disabled)
               </label>
			   <br>
			   <br>
            </div>
            <div class="w3-half">
               <label class="w3-checkbox">
                  <input type="radio" name="gender" value="male" checked>
                  <div class="w3-checkmark"></div> Male
               </label>
			   <br>
               <label class="w3-checkbox">
                  <input type="radio" name="gender" value="female">
                  <div class="w3-checkmark"></div> Female
               </label>
			   <br>
               <label class="w3-checkbox">
                  <input type="radio" name="gender" value="female" disabled>
                  <div class="w3-checkmark"></div> Don't know (Disabled)
               </label>
            </div>
         </div>
      </form>       
   </body>
</html>

نتیجه

خروجی کد بالا بصورت زیر خواهد بود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...