۱۹
خرداد

جلسه ۰۵ : آموزش کار با فرم ها در Pure CSS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و آن دسته از کاربرانی که علاقمند به دوره آموزش Pure CSS هستند. در جلسه گذشته کار با گریدها را فراگرفتیم و آموختیم که Pure.CSS مفهوم Pure Grid را با دو نوع کلاس، pure-g، یک کلاس شبکه و کلاس های واحد، pure-u- * فراهم می کند. عرض واحد ها در تقسیم بندی مهم هستند. به عنوان مثال، pure-u-1-2 نشان دهنده ۱/۲ یا ۵۰٪ عرض است. pure-u-2-5 نیز نشان دهنده عرض ۲/۵ یا ۴۰٪ و غیره است. Children های گرید در Pure (عنصر با کلاس pure-g) باید از نامهای کلاس pure-u یا pure-u- * استفاده کنند. در این جلسه و در ادامه دوره آموزشی Pure CSS با آموزش کار با فرم ها در Pure CSS همراه شما هستیم.

آموزش کار با فرم ها در Pure CSS

Pure CSS فرم های CSS بسیار زیبا و ریسپانسیوی برای طراحی دارد.
در ادامه به تعدادی از این CSS ها اشاره می نماییم.

شماره CSS	توضیحات
۱	pure-form یک فرم داخل خط را فشرده نشان می دهد.
۲	pure-form-stacked یک stacked form را با عناصر ورودی زیر بر چسب ها را نشان می دهد تا از آن برای pure-form استفاده نماید.
۳	pure-form-aligned یک فرم aligned form را با عناصر زیر برچسب ها نشان می دهد تا از آن برای pure-form استفاده نماید.
۴	pure-input-rounded یک کنترل فرم form control را با گوشه های گرد نمایش می دهد.
۵	pure-button از این کلاس برای زیبا سازی یک دکمه استفاده می شود.
۶	pure-checkbox از این کلاس برای زیبا سازی یک چک باکس استفاده می شود.
۷	pure-radio این کلاس radio ها را به صورت شکلیل تری در می آورد.

مثال

purecss_forms.htm

مثال :

<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <form class = "pure-form pure-form-aligned">
         <fieldset>
            <div class = "pure-control-group">      
               <label for = "name">Username</label>
               <input id = "name" type = "text" placeholder = "Username" required>
            </div>
			
            <div class = "pure-control-group"> 
               <label for = "email">Email</label>
               <input id = "email" type = "text" placeholder = "Email Address" required>       
            </div>
			
            <div class = "pure-control-group">   
               <label for = "comments">Comments</label>
               <input id = "comments" type="text" placeholder = "Comments">       
            </div>
			
            <div class = "pure-controls">
               <label  for = "married" class = "pure-checkbox">
                  <input id = "married" type = "checkbox" checked = "checked">
                  Married
               </label>
               <br>
			   
               <label  for = "single" class = "pure-checkbox">
                  <input id = "single" type = "checkbox">
                  Single
               </label>
               <br>
			   
               <label for = "dontknow" class = "pure-checkbox">
                  <input id = "dontknow" type = "checkbox" disabled>
                  Don't know (Disabled)
               </label>               
               <br>
               <br>
            </div>
			
            <div class = "pure-controls">
               <label for = "male" class = "pure-radio">
                  <input id = "male" type = "radio" name = "gender" value = "male" checked>
                  Male
               </label>
               <br>
			   
               <label for = "female" class= "pure-radio">
                  <input id = "female" type = "radio" name = "gender" value = "female">
                  Female
               </label>
               <br>
			   
               <label for = "dontknow1" class = "pure-radio">
                  <input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled>
                  Don't know (Disabled)
               </label>
               <button type = "submit" class = "pure-button pure-button-primary">Submit</button>
			   
            </div>
         </fieldset>
      </form>       
   </body>
</html>

<html>

<head>

<title>The PURE.CSS Forms</title>

</head>

<body>

<label for = "name">Username</label>

</div>

<label for = "email">Email</label>

</div>

<label for = "comments">Comments</label>

</div>

Married

</label>

<br>

Single

</label>

<br>

Don't know (Disabled)

</label>

<br>

</div>

Male

</label>

<br>

Female

</label>

<br>

Don't know (Disabled)

</label>

<button type = "submit" class = "pure-button pure-button-primary">Submit</button>

</div>

</fieldset>

</form>

</body>

</html>

نتیجه

نتیجه را تأیید کنید.
نتیجه به صورت تصویر زیر آشکار خواهد شد.

آموزش کار با فرم ها در Pure CSS

کلام آخر

در این جلسه به آموزش کار با فرم ها در Pure CSS پرداختیم.
در جلسه بعدی می آموزیم که چگونه به طراحی دکمه ها در Pure CSS بپردازیم.
با پی وی لرن همراه باشید.

QR: جلسه ۰۵ : آموزش کار با فرم ها در Pure CSS

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۵ : آموزش کار با فرم ها در Pure CSS

مقدمه

آموزش کار با فرم ها در Pure CSS

مثال

نتیجه

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ