نموذج المدخلات
أعلى العلامات
نموذج المدخلات
مثال
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Namel</label>
<input class="w3-input" type="text">
</form>
انها محاولة لنفسك » تسميات أسفل
نموذج المدخلات
مثال
<form class="w3-container">
<input class="w3-input" type="text">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last
Name</label>
</form>
انها محاولة لنفسك » بطاقات الإدخال
رأس
مثال
<div class="w3-card-4">
<div class="w3-container
w3-green">
<h2>Header</h2>
</div>
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form>
</div> انها محاولة لنفسك » تسميات الخضراء
تسميات مع الطبقة = "W3-تسمية" هي الخضراء بشكل افتراضي:
مثال
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form> انها محاولة لنفسك » التحقق من صحة العلامات
تسميات التحقق الحمراء، واللون الأخضر عندما يصبح إدخال صالح.
لجعل التسميات التحقق، إضافة فئة W3-التحقق من صحة إلى صفك W3-التسمية.
مثال
<form class="w3-container">
<input
class="w3-input" type="text" required>
<label class="w3-label
w3-validate">First Name</label>
<input class="w3-input" type="text" required>
<label class="w3-label
w3-validate">Last Name</label>
<input class="w3-input" type="email" required>
<label class="w3-label
w3-validate">Email</label>
</form> انها محاولة لنفسك » تسميات الملونة
استخدام أي من الفئات W3-لون النص إلى اللون التسميات:
مثال
<form class="w3-container">
<label
class="w3-label w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="w3-label w3-text-blue"><b>Last Name</b></label>
<input class="w3-input w3-border" type="text">
<button class="w3-btn
w3-blue">Register</button>
</form> انها محاولة لنفسك » الإدخال يحدها
إضافة الطبقة W3-الحدود لخلق المدخلات يحدها:
مدورة حدود
استخدام أي من الفئات W3-جولة في خلق حدود مدورة:
مثال
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text"> انها محاولة لنفسك » الإدخال بلا حدود
الطبقة W3-المدخلات لديها الحد السفلي افتراضيا. إذا كنت ترغب في إدخال بلا حدود، إضافة الطبقة W3-الحدود-0:
مثال
<form class="w3-container w3-light-grey">
<label>First
Name</label>
<input class="w3-input w3-border-0" type="text">
<label>Last Name</label>
<input class="w3-input
w3-border-0" type="text">
</form> انها محاولة لنفسك » الألوان
لا تتردد في استخدام الأنماط المفضلة لديك والألوان:
نموذج المدخلات
مثال
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<label class="w3-label w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-label
w3-text-teal"><b>Last Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<button class="w3-btn w3-blue-grey">Register</button>
</form> انها محاولة لنفسك » المدخلات Hoverable
الطبقات اللون W3 hover- يضيف لون الخلفية إلى حقل الإدخال على الفأرة فوق:
مثال
<input class="w3-input w3-hover-green" type="text">
<input class="w3-input
w3-border w3-hover-red" type="text">
<input class="w3-input
w3-border w3-hover-blue" type="text">
انها محاولة لنفسك » المدخلات المتحركة
الطبقة W3-الأرواح المدخلات تحول العرض من حقل الإدخال إلى 100٪ عندما يحصل على التركيز:
مثال
<input class="w3-check" type="checkbox" checked="checked">
<label class="w3-validate">Milk</label>
<input class="w3-check"
type="checkbox">
<label class="w3-validate">Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label class="w3-validate">Lemon (Disabled)</label> انها محاولة لنفسك » مثال
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label class="w3-validate">Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label class="w3-validate">Don't know (Disabled)</label> انها محاولة لنفسك » اختر الخيارات
مثال
<select class="w3-select" name="option">
<option value="" disabled
selected>Choose your option</option>
<option value="1">Option
1</option>
<option value="2">Option 2</option>
<option
value="3">Option 3</option>
</select> انها محاولة لنفسك » اختر القائمة يحدها
عناصر النموذج في الشبكة
في هذا المثال، ونحن نستخدم نظام شبكة الاستجابة W3.CSS "لجعل مدخلات تظهر على نفس الخط (على شاشات أصغر حجما، وسوف كومة أفقيا مع عرض 100٪). سوف تتعلم المزيد عن ذلك لاحقا.
مثال
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> انها محاولة لنفسك » اثنين تخطيط عمود مع تسميات:
مثال
<div class="w3-row-padding">
<div class="w3-half">
<label>First Name</label>
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last
Name</label>
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> انها محاولة لنفسك »