လုပ်နည်း - အီးမေးလ်သတင်းလွှာ
CSS ဖြင့် အီးမေးလ်သတင်းလွှာ ဖန်တီးနည်းကို လေ့လာပါ။
ကျွန်ုပ်တို့၏သတင်းလွှာကို စာရင်းသွင်းပါ။
ကျွန်ုပ်တို့၏သတင်းလွှာ blabla ကို အဘယ်ကြောင့် စာရင်းသွင်းသင့်သနည်းဟူသော Lorem ipsum စာသား။ ကျွန်ုပ်တို့၏သတင်းလွှာ blabla ကို အဘယ်ကြောင့် စာရင်းသွင်းသင့်သနည်းဟူသော Lorem ipsum စာသား။ ကျွန်ုပ်တို့၏သတင်းလွှာ blabla ကို အဘယ်ကြောင့် စာရင်းသွင်းသင့်သနည်းဟူသော Lorem ipsum စာသား။
သတင်းလွှာဖန်တီးနည်း
အဆင့် 1) HTML ကိုထည့်ပါ။
ထည့်သွင်းမှုကို လုပ်ဆောင်ရန် <form> ဒြပ်စင်ကို အသုံးပြုပါ။ ဤအကြောင်းကို ကျွန်ုပ်တို့၏ PHP သင်ခန်းစာ တွင် သင်ပိုမိုလေ့လာနိုင်ပါသည် ။ ထို့နောက် "submit" ခလုတ်ဖြင့် အကွက်တစ်ခုစီအတွက် ထည့်သွင်းမှုများကို ပေါင်းထည့်ပါ-
ဥပမာ
<form action="action_page.php">
<div class="container">
<h2>Subscribe to our Newsletter</h2>
<p>Lorem ipsum..</p>
</div>
<div class="container" style="background-color:white">
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked"
name="subscribe"> Daily Newsletter
</label>
</div>
<div class="container">
<input type="submit"
value="Subscribe">
</div>
</form>
အဆင့် 2) CSS ကိုထည့်ပါ
ဥပမာ
/* Style the form element with a border
around it */
form {
border: 4px solid #f1f1f1;
}
/* Add some padding and a grey background color to containers */
.container {
padding: 20px;
background-color: #f1f1f1;
}
/* Style the input elements and the
submit button */
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Add margins to the checkbox */
input[type=checkbox] {
margin-top: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
အကြံပြုချက်- HTML Form အကြောင်းပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ HTML Form Tutorial သို့ သွားပါ ။
အကြံပြုချက်- ဖောင် ပုံစံဒြပ်စင်များကို စတိုင်လ်ပုံစံလုပ်နည်းကို ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Form Tutorial သို့ သွား ပါ။