دسته بندی :
تاریخ انتشار : ۱۲ خرداد ۱۳۹۴
گردآوری و تالیف : حسام موسوی

کارمو با طراحی گرافیکی شروع کردم و حدود 2 سال طراحی گرافیکی میکردم بعد به طراحی وب علاقه پیدا کردم و همراه طراحی وب عاشق کدنویسی شدم به PHP | sass | css | Jquery | javaScript تسلط کامل دارم . در بین فریم ورک های PHP اول با CodeIgniter کار کردم اما به laravel علاقه مند شدم و دارم بطور حرفه ای دنبالش میکنم . امید من اینکه بتونم کاربرهای ایرانی رو به دنیای بیرون متصل کنم تا بتونن از فناوری های تازه آگاهی داشته باشن

امروز میخوایم یک فرم تماس زیبا ، ساده و کاملا قابل شخصی سازی رو با هم بسازیم . یک قطعه فرم مینیمال و قابل تنظیم سازی که باعث میشه شما دارای یک فرم معنایی در پروژتون باشین . برخی از ویژگی های این فرم کاملا اختیاریه به این صورت که شما به راحتی میتونید اگه به یک جز احتیاج ندارین اونو حذف کنید . ما در اینجا تمام عناصر رایج یک فرم رو مانند دکمه های رادیویی ،  چک باکس، انتخاب کننده ها، پیام های خطا و غیره رو میسازیم .

  • ساختار کلی Html 

امروزه داشتن یک ساختار استاندارد و بهینه سازی شده یک راه برای صرفه جویی وقته . اینطور فکر نمیکنین ؟ خب ما درون تگ از دو تگ استفاده میکنیم . که فرم رو به دو بلوک اصلی تقسیم میکنه . هر المنت فرم ( که معمولا شامل   + میشه ) درون یک تگ ساده قرار میگیره . که این کار به شما اجازه میده کنترل ساده ای روی تنظیم فضا داشته باشین به این صورت که فقط یکبار با margin بتونین مکان رو تنظیم کنید . 

در کد زیر میتونید ساختار html رو بببنید . شما ممکنه متوجه برخی از کلاس های خاص شده باشین . این کلاس ها رو در بخش css توضیح میدم . 

<form class="cd-form floating-labels">
	<fieldset>
		<legend>Account Info</legend>
 
		<div class="error-message">
			<p>Please enter a valid email address</p>
		</div>
 
		<div class="icon">
			<label class="cd-label" for="cd-name">Name</label>
			<input class="user" type="text" name="cd-name" id="cd-name" required>
	    </div> 
 
	    <!-- ... -->
	</fieldset>
 
	<fieldset>
		<legend>Project Info</legend>
 
		<div>
			<h4>Budget</h4>
 
			<p class="cd-select icon">
				<select class="budget">
					<option value="0">Select Budget</option>
					<option value="1">&lt; $5000</option>
					<option value="2">$5000 - $10000</option>
					<option value="3">&gt; $10000</option>
				</select>
			</p>
		</div> 
 
		<div>
			<h4>Project type</h4>
 
			<ul class="cd-form-list">
				<li>
					<input type="radio" name="radio-button" id="cd-radio-1" checked>
					<label for="cd-radio-1">Choice 1</label>
				</li>
					
				<li>
					<input type="radio" name="radio-button" id="cd-radio-2">
					<label for="cd-radio-2">Choice 2</label>
				</li>
 
				<li>
					<input type="radio" name="radio-button" id="cd-radio-3">
					<label for="cd-radio-3">Choice 3</label>
				</li>
			</ul>
		</div>
 
		<!-- ... -->
 
		<div class="icon">
			<label class="cd-label" for="cd-textarea">Project description</label>
  			<textarea class="message" name="cd-textarea" id="cd-textarea" required></textarea>
		</div>
 
		<div>
	      	<input type="submit" value="Send Message">
	    </div>
	</fieldset>
</form>
  • اضافه کردن استایل 

استایل دهی کلی پروژه ما به سه بخش تقسیم میشه : بخش اول ) فرم ، بخش دوم ) آیکون های دلخواه ، بخش سوم ) برچسب های شناور . به این ترتیب ، اگه شما زمانی به این نتیجه رسیدید که یک بخش باید اضافه کنید و به کد نویسی احتیاج داشتن با هر کدوم از این بخش ها میتونید به راحتی کارتونو انجام بدید مثل بخش فرم . چطور میشه از آیکون های سفارشی در فرم استفاده کرد : شما نیاز دارید یک کلاس به المنتون اضافه کنید حالا اون المنت میخواد (input/select/textarea) باشه فرقی نداره که با اون کلاس شما میتونید آیکونی که میخواینو به راحتی به اون المنت اضافه کنید . در مرحله دوم شما باید کلاس .icon رو به المنت پدر بدید . در نهایت شما در css میتونید بصورت سفارشی با background-image آیکونتونو قرار بدید .

در ضمن اگه مثلا یک فرم required بود و شما میخواین که برای این موضوع هم آیکونی استفاده کنید شما باید از دوتا background-image برای این کار استفاده کنید . دقیقا مثل کد زیر : 

.cd-form .icon input, .cd-form .icon select, .cd-form .icon textarea {
 	padding-left: 54px !important;
}
.cd-form .user {
 	background: url("../img/cd-icon-user.svg") no-repeat 16px center;
}
.cd-form [required].user {
 	background: url("../img/cd-icon-user.svg") no-repeat 16px center, 
 				url("../img/cd-required.svg") no-repeat top right;
}

خب بخش سوم استایل دادن به label ها ، ما برای این که label در داخل المنت ها قرار بگیرن کلاس .floating-labels رو به المنت با کلاس .cd-form  اضافه میکنیم . شما در این مورد هرگز در الگوهای UX چیزی نشنیدین . که اولین بار توسط یک فرد به اسم Matt D. Smith این کار انجام شد . به نظر من این یک راحل UX بزرگه : که به شما اجازه میده که اول از label به عنوان placeholders  استفاده کنید و بعد از اینکه کاربر شروع به تایپ کرد بصورت متحرک به label تبدیل بشه . به این صورت کاربر همیشه یک سرنخ از این داره که داره چه اطلاعاتی رو کجا وارد میکنه . به این نکته توجه داشته باشین که کلاس .floating-labels از کلاس .js مشتق شده . این کلاس هم توسط Modernizr یک کتابخانه جاوااسکریپت برای پشتیبانی از مروگرهای مختلفه . به این ترتیب اگه جاوا اسکریپت توسط مرورگر کاربر متوقف شده باشه . فرم هنوز دارای برچسب های استندارد خواهد بود . 

به منظور سبک خاص دادن به یک  field ، ما از صفات بولی html5 بهره می بریم . در حالی که برای ارور ها ما از یک کلاس استفاده میکنیم . 

.cd-form [required] {
 	background: url("../img/cd-required.svg") no-repeat top right;
}
 
.cd-form .error {
	border-color: #e94b35 !important;
}

یک نکته دیگه که شاید براتون جالب باشه اینکه ما دکمه های رادیویی و دکمه های چک رو بصورت سفارشی سازی اماده کردیم . شما میتونید منابع زیادی در این رابطه پیدا کنید ، اما مختصرا ، ما position رو برابر absolute و opacity رو برابر 0 برای رادیو قرار دادیم و بجاش از شبه کلاس های ::before و ::after برای المنت  استفاده کردیم تا رادیو های شخصی شده داشته باشیم . شما میتونید این تکنیک ها رو در گوگل با یک سرچ ساده یاد بگیرین یا منتظر بمونین که ما براتون به طور کامل تو پست های دیگه توضیح بدیم . 

  • دست کاری عملکرد ها 

برای فعلا کردن برچسب های شناور ما از جاوااسکریپت استفاده کردیم . اگر یک المنت با کلاس .floating-labels در DOM وجود داشته باشه ، ما با استفاده از تابع  floatLabels مقدار دهی اولیه میکینم . وقتی یک Input رو انتخاب کنیم (جاوااسکریپت .cd-label رو مورد هدف قرار میده ) و بعد با استفاده از تابع keyup تابع checkVal رو اجرا میکنه تا تشخص بده که کاربر در حال تایپ تا label بصورت شناور در بیاد . 

if( $('.floating-labels').length > 0 ) floatLabels();
 
function floatLabels() {
	var inputFields = $('.floating-labels .cd-label').next();
	
	inputFields.each(function(){
		var singleInput = $(this);
		
		singleInput.keyup(function(){
			checkVal(singleInput);	
		});
	});
}

ممنون از شما که تا اینجایی این مقاله همرامون بودید این مقاله ترجمه شده از وب سایت codyhouse که امیدوارم لذت برده باشید . 

دیدگاه های مخاطبین

ثبت دیدگاه شما
  • فرید

    سلام من میخوام اطلاعاتی رو که داخل یک فرم نوشتم رو وقتی روی یک کلید میزنم بره توی یک فرم دیگه در کنار اون فرم قبلیه قرار بگیره چیکار باید بکنم میشه راهنماییم کنید؟

    • admin

      با زبان back-end ای که کار میکنید باید این عملو انجام بدید
      مثل php یا زبان های دیگه

  • داوود

    سلام حسام جان؛مثل همیشه عالی بود.دستت درد نکنه.

    • admin

      خوشحالیم که مورد استفادتون قرار گرفت

  • سوران

    بسیار زیبا دست شما هم درد نکنه

    • admin

      خوشحالیم که مورد استفادتون قرار گرفت

پیشنهاد میکنیم این مطالب رو هم مطالعه کنید :