كيف - نموذج الاستجابة
تعرف على كيفية إنشاء نموذج سريع الاستجابة باستخدام CSS.
نموذج الاستجابة
قم بتغيير حجم نافذة المتصفح لرؤية التأثير (سوف تتكدس التصنيفات والمدخلات فوق بعضها البعض بدلاً من بعضها البعض على الشاشات الأصغر):
كيفية إنشاء نموذج متجاوب
الخطوة 1) أضف HTML
استخدم عنصر <form> لمعالجة الإدخال. يمكنك معرفة المزيد عن هذا في دروسنا في PHP .
أضف مدخلات (مع تسمية مطابقة) لكل حقل ، ولف عنصر <div> حول كل تسمية ومدخل لتعيين عرض محدد باستخدام CSS:
مثال
<div class="container">
<form action="action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input
type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label
for="lname">Last Name</label>
</div>
<div class="col-75">
<input
type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label
for="country">Country</label>
</div>
<div class="col-75">
<select
id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label
for="subject">Subject</label>
</div>
<div class="col-75">
<textarea
id="subject" name="subject" placeholder="Write something.."
style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
الخطوة 2) أضف CSS:
مثال
/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
/* Style the
label to display next to the inputs */
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px
20px;
border: none;
border-radius: 4px;
cursor:
pointer;
float: right;
}
/* Style the container */
.container {
border-radius: 5px;
background-color:
#f2f2f2;
padding: 20px;
}
/* Floating column for labels:
25% width */
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content:
"";
display: table;
clear: both;
}
/* Responsive layout - when the
screen is less than 600px wide, make the two columns stack on top of each
other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
نصيحة: انتقل إلى البرنامج التعليمي لنموذج HTML الخاص بنا لمعرفة المزيد حول نماذج HTML.
نصيحة: انتقل إلى البرنامج التعليمي لنموذج CSS الخاص بنا لمعرفة المزيد حول كيفية تصميم عناصر النموذج.