တားမြစ် ပြီး ဖန်တီး

စာရင်းသင်္ကျီ ကို ဖန်တီး တားမြစ်

ပထမ အစ သုံးစွဲ မှု - အိမ်တိုင် အိမ်မှူး ထပ်ထည့်ပါ

လုပ်စမ်း ကွင်း အသုံးပြု ပြီး လုပ်စမ်း အချက်အလက် ကို ပြုပြင် ရန် အသုံးပြုပါ နှင့် ကျမ်းကျိန် ပေါ်တွင် အသုံးပြု ရန်</form>

အပ်လုပ် တစ်ခုခု အတွက် လုပ်စမ်း ကွင်း ပြင်ပါ လုပ်စမ်း ကွင်း ပါ အပ်လုပ် များ တွင် ပါ ပြီး လုပ်စမ်း အမည် ကို နှိုင်းယှဉ် ရန်</form>

<form action="action_page.php">
  <div class="container">
    <h1>စာရင်းသင်္ကျီ</h1>
    <p>ထိုင်းချင်း သင်္ကျီ အသုံးပြု လုပ်ကိုင် သင်္ကျီ ကို ဖန်တီး ရန် ပါဝင် ရန် ပါဝင် ရန်</p>
    <hr>
    <label for="email"><b>အီးလိုင်</b></label>
    <input type="text" placeholder="လုပ်စမ်း အီးလိုင်" name="email" id="email" required>
    <label for="psw"><b>လုပ်စမ်း အမည်</b></label>
    <input type="password" placeholder="လုပ်စမ်း အမည် ပြောက်ချင်" name="psw" id="psw" required>
    <label for="psw-repeat"><b>မှီခြေ လုပ်စမ်း အမည်</b></label>
    <input type="password" placeholder="မှီခြေ လုပ်စမ်း အမည်" name="psw-repeat" id="psw-repeat" required>
    <hr>
    <p>အစားအမှု နှင့် သတင်းသားမူ ကို အတူပြုပါ <a href="#">အခြေခံ နှင့် သတင်းသားမူ</a>.</p>
    <button type="submit" class="registerbtn">စာချုပ်ပေးပို့</button>
  </div>
  <div class="container signin">
    <p>အမှတ်ရှိပါသည်မည်? <a href="#">အရေးယူပါ</a>.</p>
  </div>
</form>

ဒုတိယ စက္ကူ - စက်သုံး CSS ပြင်ဆင်ပါ:

* {box-sizing: border-box}
/* အကောင်းအထိမ်း အကျယ်အဝန်း ပြင်ဆင်ပါ */
.container {
  padding: 16px;
}
/* ပန်းခွဲ အကျယ်အဝန်း အေျာင်းချိန် */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
/* hr အမည်မပြောင်း အေျာင်းချိန် */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* ပေးပို့/စာချုပ် အချက်အလက် အေျာင်းချိန် အေျာင်းပါ */
.registerbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
.registerbtn:hover {
  opacity:1;
}
/* လောက်ချက် အတွက် အနုျင်း ရောင်ခြည်း ပြင်ဆင်ပါ */
a {
  color: dodgerblue;
}
/* အရေးယူခြင်း အစိတ်အပိုင်း အတွက် ဖြူသတ်မှတ် ရောင်ခြည်း ပြင်ဆင် ပြီး ရေးသားခြင်း ကို အလယ်တွင် သတ်မှတ်ပါ */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}

亲自试一试

相关页面

教程：HTML 表单

教程：CSS 表单