- Inline Form လုပ်နည်း
CSS ဖြင့် တုံ့ပြန်မှုရှိသော inline ပုံစံတစ်ခုကို ဖန်တီးနည်းကို လေ့လာပါ။
တုံ့ပြန်မှု Inline ပုံစံ
အကျိုးသက်ရောက်မှုကိုကြည့်ရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ (အသေးစားစခရင်များတွင် တစ်ခုနှင့်တစ်ခုဘေးတွင်အစား အညွှန်းများနှင့် ထည့်သွင်းမှုများသည် တစ်ခုနှင့်တစ်ခုအပေါ်တွင် ထပ်နေပါမည်)
Inline Form ဖန်တီးနည်း
အဆင့် 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 Form အကြောင်းပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ HTML Form Tutorial သို့ သွားပါ ။
အကြံပြုချက်- ဖောင် ပုံစံဒြပ်စင်များကို စတိုင်လ်ပုံစံလုပ်နည်းကို ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Form Tutorial သို့ သွား ပါ။