Jinsi ya kumwua: Forma inayoreshwa

Mwongozo wa kumwua forma inayoreshwa kwa CSS.

Forma inayoreshwa

Tungua ukanda wa mkia wa ingia kwa kuona matokeo (kwenye ekran za kiasi kidogo, label na ingia zipatakiwe kwa kufikia, bali zizungumza):

亲自试一试

Jinsi ya kumwua forma inayoreshwa

Mwaka 1 - Ongeza HTML:

Tumia elementi ya <form> kuendelea input. Wewe unaweza kueleza zaidi katika mafunzo yetu ya PHP.

Ongeza ukurasa wa input kwa kila kundi (na label ambalo linapatikana) na kugawaza label na input kwa kujishughulisha kwa CSS kwa ukurasa wa ukingo:

<div class="container">
  <form action="action_page.php">
    
<div class="col-25"> <label for="fname">Jina la Kiume</label>
<div class="col-75"> <input type="text" id="fname" name="firstname" placeholder="Andika jina lako..">
<div class="col-25"> <label for="lname">Jina la Kwanza</label>
<div class="col-75"> <input type="text" id="lname" name="lastname" placeholder="Andika jina lako la kwanza..">
<div class="col-25"> <label for="country">Nchi</label>
<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 class="col-25"> <label for="subject">Mada</label>
<div class="col-75"> <textarea id="subject" name="subject" placeholder="Andika hii.." style="height:200px"></textarea>

第二步 - 添加 CSS:

/* 为输入框、选择元素和文本域设置样式 */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
/* 设置标签的样式以使其显示在输入框旁边 */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
/* 设置提交按钮的样式 */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
/* 设置容器的样式 */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
/* 标签浮动列:25% 宽度 */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
/* 输入浮动列:75% 宽度 */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
/* 清除列后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 响应式布局 - 当屏幕宽度小于 600px 时,使两列堆叠,而不是并排 */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

亲自试一试

相关页面

教程:HTML 表单

教程:CSS 表单