كيف إلى - نموذج مضمّن
تعرف على كيفية إنشاء نموذج مضمّن سريع الاستجابة باستخدام CSS.
نموذج مضمّن سريع الاستجابة
قم بتغيير حجم نافذة المتصفح لرؤية التأثير (سوف تتكدس التصنيفات والمدخلات فوق بعضها البعض بدلاً من بعضها البعض على الشاشات الأصغر):
كيفية إنشاء نموذج مضمّن
الخطوة 1) أضف HTML
استخدم عنصر <form> لمعالجة الإدخال. يمكنك معرفة المزيد عن هذا في دروسنا في PHP .
مثال
<form class="form-inline" action="/action_page.php">
<label
for="email">Email:</label>
<input type="email" id="email"
placeholder="Enter email" name="email">
<label for="pwd">Password:</label>
<input type="password" id="pwd" placeholder="Enter password" name="pswd">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
<button type="submit">Submit</button>
</form>
الخطوة 2) أضف CSS:
مثال
/* Style the form - display items horizontally */
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
/* Add some margins for each label */
.form-inline label {
margin: 5px 10px 5px 0;
}
/* Style the input fields */
.form-inline input {
vertical-align: middle;
margin:
5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
/* Style the submit button */
.form-inline button {
padding: 10px 20px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
}
.form-inline button:hover
{
background-color: royalblue;
}
/* Add responsiveness -
display the form controls vertically instead of horizontally on screens that
are less than 800px wide */
@media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
نصيحة: انتقل إلى البرنامج التعليمي لنموذج HTML الخاص بنا لمعرفة المزيد حول نماذج HTML.
نصيحة: انتقل إلى البرنامج التعليمي لنموذج CSS الخاص بنا لمعرفة المزيد حول كيفية تصميم عناصر النموذج.