همونطور که مستحضرید فرم ها از عناصر زیادی تشکیل می شوند.نظیر ورودی های داده های متنی (input) و یا محدوده های متنی(text area) و یا انتخاب بین چند گزینه(select) ، دکمه های تایید ،تیک زدن چند گزینه و یا یک گزینه ،کپچا و …. .که ما استایل دهی دکمه ها رو در قسمت قبل بررسی کردیم.خب برای معرفی ساده ی کلاس های این عناصر در این قسمت به بررسی مثالی ساده خواهیم پرداخت.سپس تمام کد مورد نظر را با هم کنکاش خواهیم کرد :
<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”>
</div>
<div class=”pure-control-group”>
<label for=”password”>Password</label>
<input id=”password” type=”password” placeholder=”Password”>
</div>
<div class=”pure-control-group”>
<label for=”email”>Email Address</label>
<input id=”email” type=”email” placeholder=”Email Address”>
</div>
<div class=”pure-control-group”>
<label for=”foo”>fathers name</label>
<input id=”foo” type=”text” placeholder=”Enter something here…”>
</div>
<div class=”pure-controls”>
<label for=”cb” class=”pure-checkbox”>
<input id=”cb” type=”checkbox”> I’ve read the terms and conditions
</label>
<div class=”pure-u-1 pure-u-md-1-24″>
<label for=”state”>true??</label>
<select id=”state” class=”pure-input-1-5″>
<option>7learn</option>
<option>5learn</option>
<option>2learn</option>
</select>
</div> <br/>
<button type=”submit” class=”pure-button pure-button-primary”>Submit</button>
</div>
</fieldset>
</form>
همونطور که ملاحضه فرمودید بدون هیچ css نویسی و فقط به کمک html همچین عناصری زیبا به کارمون اعمال کردیم.
خب حالا بریم سراغ موشکافی این کد و کلاس ها مهم pure برای هر عنصر :
از خط اول در می یابیم که برای استایل دهی به فرم باید از دو کلاس استفاده کنیم :
سپس در خطوط بعد هم به کرار مشاهده می کنیم که کلاس pure-control-group برای هر عنصری که در فرم استفاده شده آمده تا نظم خاصی رو به فرم القا کنه و جایگاه عناصر رو منظم کنه.
در خط ۲۷ همpure-u-1 و pure-u-md-1-24 از سیستم گرید رسپانسیو pure استفاده شده که در قسمت یک کمی معرفی شد اما در این جا می خواهیم با مثال مفهومی آنرا واضح تر کنیم :در مثال اول تعریف کرده ایم که در سیستم اولیه گرید pure یعنی سیستم ۵ تیکه یک قسمت کامل رو اشغال کرده ایم.چون یک برابر با یک یکم هست و pure-u-1 برابر است با pure-u-1-1 .
مثال دوم هم ابراز کردیم که در نمایشگر های کوچکتر از ۷۶۸(و مساوی این عدد) تنها یک بیست و چهارم رو اون عنصر اشغال کنه.که md نشان دهنده ی اندازه ی نمایشگر هاست.
کلاس دیگه ای هم که اینجا بکار نبردیم ولی به زیبایی input-box ها می افزایه کلاس pure-input-rounded می باشد که گوشه ی این عناصر رو خود به خود و بدون نیاز به کد نویسی گرد می کنه.
البته این بخش یکسری کلاس هایی دیگه هم داره که بکار ما نمی آد و گفتنشون زیاد کاربردی نیست لذا از اونها صرف نظر می کنیم تا به بخش های ناب تری برسیم.
