فُرم

<form class="joqd row">
	<div class="joqd desktop-6 laptop-6 tablet-6 mobile-12">
	  <div class="joqd input-field">
	    <input id="name" type="text" class="joqd input thin-bottom-border grey-border">
	    <label for="name" class="joqd grey-text">نام</label>
	  </div>
	</div>

	<div class="joqd desktop-6 laptop-6 tablet-6 mobile-12">
	  <div class="joqd input-field">
	    <input id="lastName" type="text" class="joqd input thin-bottom-border grey-border">
	    <label for="lastName" class="joqd grey-text">نام خانوادگی</label>
	  </div>
	</div>

	<div class="joqd desktop-12 laptop-12 tablet-12 mobile-12">
	  <div class="joqd input-field">
	    <input id="email" type="email" class="joqd input thin-bottom-border grey-border">
	    <label for="email" class="joqd grey-text">ایمیل</label>
	  </div>
	</div>

	<div class="joqd desktop-12 laptop-12 tablet-12 mobile-12">
	  <div class="joqd input-field">
	    <input id="password" type="password" class="joqd input thin-bottom-border grey-border">
	    <label for="password" class="joqd grey-text">رمز عبور</label>
	  </div>
	</div>
</form>

$('.joqd.input').each(function(){
  $(this).input();
})

<div class="joqd input-field">
	<input id="fullName" type="text" class="joqd input thin-bottom-border grey-border" disabled>
	<label for="fullName" class="joqd grey-text">نام و نام ‌خانوادگی</label>
</div>

$('.joqd.input').each(function(){
  $(this).input();
})

<form class="joqd row">
	<div class="joqd desktop-8 laptop-8 tablet-8 mobile-12">
		<div class="joqd input-field">
		<i class="joqd prefix grey-text gorbeh gorbeh_person"></i>
			<input id="Username" type="text" class="joqd input thin-bottom-border grey-border">
			<label for="Username" class="joqd grey-text">نام کاربری</label>
		</div>
	</div>

	<div class="joqd desktop-8 laptop-8 tablet-8 mobile-12">
		<div class="joqd input-field">
		<i class="joqd prefix grey-text gorbeh gorbeh_phone"></i>
			<input id="Usertel" type="tel" class="joqd input thin-bottom-border grey-border">
			<label for="Usertel" class="joqd grey-text">شماره تماس</label>
		</div>
	</div>
</form>

$('.joqd.input').each(function(){
$(this).input();
})

<div class="joqd input-field">
	<input id="password" type="password" class="joqd input thin-bottom-border grey-border"  value="youShouldNotSeeThis">
	<label for="password" class="joqd grey-text">رمز عبور</label>
</div>

$('.joqd.input').each(function(){
  $(this).input();
})

<form class="joqd row">
	<div class="joqd desktop-8 laptop-8 tablet-8 mobile-12">
	  <div class="joqd input-field">
	    <input id="OpenName" type="text" class="joqd input thin-bottom-border grey-border" value="جاوید ایزدفر">
	    <label for="OpenName" class="joqd grey-text always-open-input">نام و نام خانوادگی</label>
	  </div>
	</div>

	<div class="joqd desktop-8 laptop-8 tablet-8 mobile-12">
	  <div class="joqd input-field">
	    <input id="OpenName" type="text" class="joqd input thin-bottom-border grey-border" placeholder="نام و نام خانوادگی خود را وارد کنید">
	    <label for="OpenName" class="joqd grey-text always-open-input">نام و نام خانوادگی</label>
	  </div>
	</div>

	<div class="joqd desktop-8 laptop-8 tablet-8 mobile-12">
	  <div class="joqd input-field">
	    <input id="OpenName" type="text" class="joqd input thin-bottom-border grey-border">
	    <label for="OpenName" class="joqd grey-text always-open-input">نام و نام خانوادگی</label>
	  </div>
	</div>
</form>

$('.joqd.input').each(function(){
  $(this).input();
})

<form class="joqd row">
	<div class="joqd desktop-12 laptop-12 tablet-12 mobile-12">
		<div class="joqd input-field">
		  <textarea id="textarea" class="joqd input thin-bottom-border grey-border">
		  <label for="textarea" class="joqd grey-text">تکست‌اریا</label>
		</div>
	</div>
</form>

$('.joqd.input').each(function(){
	$(this).input();
})

<div class="joqd input-field">
	<textarea id="massage" class="joqd input thin-bottom-border grey-border" disabled>
	<label for="massage" class="joqd grey-text">پیام</label>
</div>

$('.joqd.input').each(function(){
	$(this).input();
})

<form class="joqd row">
	<div class="joqd desktop-8 laptop-8 tablet-8 mobile-12">
		<div class="joqd input-field">
			<i class="joqd prefix grey-text gorbeh gorbeh_create"></i>
			<textarea id="comment" class="joqd input thin-bottom-border grey-border">
			<label for="comment" class="joqd grey-text">شماره تماس</label>
		</div>
	</div>
</div>

$('.joqd.input').each(function(){
	$(this).input();
})

<div class="joqd checkbox-field">
  <input id="check1" type="checkbox" class="joqd checkbox" />
  <label for="check1" class="joqd grey-darken-2-text">اولی
    <span class="joqd box soft-corner thick-border grey-darken-4-border"></span>
  </label>
</div>

<div class="joqd checkbox-field">
	<input id="check2" type="checkbox" class="joqd checkbox" />
	<label for="check2" class="joqd grey-darken-2-text">دومی
		<span class="joqd box soft-corner thick-border grey-darken-4-border"></span>
	</label>
</div>

<div class="joqd checkbox-field">
	<input id="goRed" type="checkbox" class="joqd checkbox" />
	<label for="goRed" class="joqd grey-darken-2-text">قرمز شود
		<span class="joqd box soft-corner thick-border grey-darken-4-border"></span>
	</label>
</div>

.joqd.checkbox:checked + label .box{
	border-color: #f44336; /* کد رنگ قرمز به هگزادسیمال */
}

<div class="joqd checkbox-field">
	<input id="disabled" type="checkbox" class="joqd checkbox" disabled/>
	<label for="disabled" class="joqd grey-darken-2-text">غیرفعال
		<span class="joqd box soft-corner thick-border grey-darken-4-border"></span>
	</label>
</div>

<div class="joqd desktop-8 laptop-8 tablet-12 mobile-12">
  <div class="joqd input-field">
    <select id="lang" class="joqd input thin-bottom-border grey-border">
      <option value="0" class="joqd" disabled>زبان را مشخص کنید</option>
      <option value="1" class="joqd" selected>فارسی</option>
      <option value="2" class="joqd" lang="en">English</option>
      <option value="3" class="joqd" lang="fr">French</option>
    </select>
    <span class="joqd caret"></span>
    <label for="lang" class="joqd grey-text always-open-input">زبان</label>
  </div>
</div>

$('select').each(function(){
	$(this).select();
})

<div class="joqd desktop-8 laptop-8 tablet-12 mobile-12">
	<div class="joqd switch-field">
		<label for="doesit" class="joqd grey-text switch">
			خیر
			<input id="doesit" type="checkbox">
			<div class="joqd lever round-corner grey-lighten-1">
				<div class="joqd trigger grey-darken-1 circle-corner"></div>
			</div>
			بله
		</label>
	</div>
</div>

<div class="joqd desktop-8 laptop-8 tablet-12 mobile-12">
	<div class="joqd switch-field">
		<label for="offAndOn" class="joqd grey-text switch">
			خاموش
			<input id="offAndOn" type="checkbox">
			<div class="joqd lever round-corner grey-lighten-1">
				<div class="joqd trigger grey-darken-1 circle-corner"></div>
			</div>
			روشن
		</label>
	</div>
</div>

.joqd.switch-field label.joqd.switch input:checked + .joqd.lever .joqd.trigger{
	background-color: #e91e63;  /* کد رنگ صورتی به هگزادسیمال */
}
.joqd.switch-field label.joqd.switch input:checked + .joqd.lever {
	background-color: #f06292;  /* کد رنگ صورتی روشن به هگزادسیمال */
}