Paano gumawa: Responsive Form
Matututunan kung paano gumawa ng responsive form gamit ang CSS.
Responsive Form
Ayusin ang laki ng window ng browser upang makita ang epekto (sa mas maliit na screen, ang label at ang kahon ng pagpasok ay babang, hindi magkakasama):
Paano gumawa ng responsive form
Unang hakbang - Magdagdag ng HTML:
Gumamit ng <form> elemento upang hawakan ang pagpasok. Makakatutok ka sa mas malalim na information sa aming PHP tutorial.
Magdagdag ng pagpasok para sa bawat pangako (may kasangkop na label), at gamitin ang <div> elemento upang mapakikita ang bawat label at pagpasok, upang gamitin ang CSS na inilagay na lapad:
<div class="container"> <form action="action_page.php"> <div class="row"> <div class="col-25"> <label for="fname">Unang Pangalan</label> </div> <div class="col-75"> <input type="text" id="fname" name="firstname" placeholder="Iyong pangalan.."> </div> </div> <div class="row"> <div class="col-25"> <label for="lname">Pangalawang Pangalan</label> </div> <div class="col-75"> <input type="text" id="lname" name="lastname" placeholder="Iyong pangalawang pangalan.."> </div> </div> <div class="row"> <div class="col-25"> <label for="country">Bansa</label> </div> <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> </div> <div class="row"> <div class="col-25"> <label for="subject">Pangalawang Pangalan</label> </div> <div class="col-75"> <textarea id="subject" name="subject" placeholder="Makita something.." style="height:200px"></textarea> </div> </div> <div class="row"> <input type="submit" value="Submit"> </div> </form> </div>
第二步 - 添加 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 表单