根據寬度以html格式製作輸入字段

Question

我正在爲研究目的製作一個註冊表單，並且我是使用php和html的新手。 到目前爲止，我所做的是：

<div style="text-align: center;"><label><span class="glyphicon glyphicon-lock"></span> Register</label></div> 
     <div id="register_wrapper"> 

      <form id="frm_reg" name="frm_reg" method="POST" onsubmit="return validateForm();" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" autocomplete="off"> 
    <!--<span class="error" id="error_blank"></span>--><input id="blank_focus" name="tp" type="text" style="border: 0px none;background-color: #FFF;box-shadow: none;cursor: default;color: transparent;" readonly/> 
    <br> 
<table cellpadding="5"> 

<tr> 
<td> 

<div align="left"><label><span class="bold">Personal Details</span></label></div> 

</td> 
</tr> 
<tr> 
<td> 
    <div align="left"><label><span class="glyphicon glyphicon-user"></span> First Name</label></div> 
      <input id="firstname" name="firstname" type="text" required="required" placeholder="First Name" autofocus=""><br/><span id="first_error" class="error"></span> 
</td> 
<td> 
    <div align="left"><label>Last Name</label></div> 
      <input id="Lastname" name="lastname" type="text" required="required" placeholder="Last Name" autofocus=""><br/><span id="first_error" class="error"></span> 
</td> 
</tr> 
<tr> 
<td> 
<div align="left"><label><span class="glyphicon glyphicon-home"></span> Address</label></div> 
<textarea id="address" name="address" required="required" rows="5" cols="32" style="text-transform: uppercase;resize: none;"></textarea><br/><span id="address_error" class="error"></span> 
</td> 
<td> 
      <div align="left"><label><span class="glyphicon glyphicon-flag"></span> Country</label></div> 
      <select class="register_select" id="country" name="country" required="required" onchange="print_state('state',this.selectedIndex);"></select><br/><span id="country_error" class="error"></span> 

      <script language="javascript">print_country("country");</script> 

<div align="left" style="margin-top: 3%;"><label><span class="glyphicon glyphicon-envelope"></span> Email</label></div> 
      <input id="uemail" name="uemail" type="email" required="required" placeholder="example@email.com" autofocus="" onblur="return validateEmail(this.value)"><br/><span class="error" id="email_error"><?php echo $email_error; ?></span><span class="error" id="email_error1"></span> 
</td> 

</tr> 
<tr> 
<td> 
    <div align="left"><label><span class="glyphicon glyphicon-lock"></span> Password</label></div> 
      <input id="pword" name="pword" type="password" required="required" placeholder="Password" onblur="check(this.value);" onfocus="this.value=''" ><br/><span id="pass_error" class="error"></span></td> 
<td> 
    <div align="left"><label><span class="glyphicon glyphicon-repeat"></span> Confirm Password </label> <span id='message'></span></div> 
      <input id="cpword" name="cpword" type="password" required="required" placeholder="Confirm Password" onfocus="this.value=''" onblur="validateCpass()"><br/><span id="cpass_error" class="error"></span> 
</td> 
</tr> 
<tr> 
<td> 
<div align="left"><label><span class="glyphicon glyphicon-pushpin"></span> Pincode</label></div> 
<input id="pincode" name="pincode" type="text" required="required" maxlength="8" placeholder="Pincode" ><br/><span id="pincode_error" class="error"></span></td> 
<td> 
<div align="left"><label><span class="glyphicon glyphicon-phone"></span> Contact Number</label></div> 
      <input id="contact" name="contact" type="text" required="required" size="11" maxlength="11" placeholder="Contact Number" ><br/><span id="contact_error" class="error"></span> 
</td> 
</tr> 

這使我在下面的截圖中顯示的輸出：

我遇到的問題是在填寫表格後，我試圖用它在更小的設備。 右側的輸入字段不可見。 如果設備寬度變化低於特定像素，是否有任何方法可以使字段從姓氏開始，即右列輸入字段顯示爲低於其他字段。 請原諒我是否因爲剛開始學習基礎知識而犯錯。

Answer 1

您可以使用簡單的CSS Media queries改變tbody > tr > td的CSS樣式，像：

/* If the screen size is less than equal to 767px (default bootstrap width) */ 
@media screen and (max-width: 767px) { 
tbody tr td { 
    display: table-row; 
    } 
} 

看一看下面的代碼片段（使用全屏幕預覽&調整瀏覽器的寬度看出差別）：

@media screen and (max-width: 767px) { 
 
tbody tr td { 
 
    display: table-row; 
 
    } 
 
}

<div style="text-align: center;"><label><span class="glyphicon glyphicon-lock"></span> Register</label></div> 
 
     <div id="register_wrapper"> 
 

 
      <form id="frm_reg" name="frm_reg" method="POST" onsubmit="return validateForm();" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" autocomplete="off"> 
 
    <!--<span class="error" id="error_blank"></span>--><input id="blank_focus" name="tp" type="text" style="border: 0px none;background-color: #FFF;box-shadow: none;cursor: default;color: transparent;" readonly/> 
 
    <br> 
 
<table cellpadding="5"> 
 

 
<tr> 
 
<td> 
 

 
<div align="left"><label><span class="bold">Personal Details</span></label></div> 
 

 
</td> 
 
</tr> 
 
<tr> 
 
<td> 
 
    <div align="left"><label><span class="glyphicon glyphicon-user"></span> First Name</label></div> 
 
      <input id="firstname" name="firstname" type="text" required="required" placeholder="First Name" autofocus=""><br/><span id="first_error" class="error"></span> 
 
</td> 
 
<td> 
 
    <div align="left"><label>Last Name</label></div> 
 
      <input id="Lastname" name="lastname" type="text" required="required" placeholder="Last Name" autofocus=""><br/><span id="first_error" class="error"></span> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td> 
 
<div align="left"><label><span class="glyphicon glyphicon-home"></span> Address</label></div> 
 
<textarea id="address" name="address" required="required" rows="5" cols="32" style="text-transform: uppercase;resize: none;"></textarea><br/><span id="address_error" class="error"></span> 
 
</td> 
 
<td> 
 
      <div align="left"><label><span class="glyphicon glyphicon-flag"></span> Country</label></div> 
 
      <select class="register_select" id="country" name="country" required="required" onchange="print_state('state',this.selectedIndex);"></select><br/><span id="country_error" class="error"></span> 
 

 
      <script language="javascript">print_country("country");</script> 
 

 
<div align="left" style="margin-top: 3%;"><label><span class="glyphicon glyphicon-envelope"></span> Email</label></div> 
 
      <input id="uemail" name="uemail" type="email" required="required" placeholder="example@email.com" autofocus="" onblur="return validateEmail(this.value)"><br/><span class="error" id="email_error"><?php echo $email_error; ?></span><span class="error" id="email_error1"></span> 
 
</td> 
 

 
</tr> 
 
<tr> 
 
<td> 
 
    <div align="left"><label><span class="glyphicon glyphicon-lock"></span> Password</label></div> 
 
      <input id="pword" name="pword" type="password" required="required" placeholder="Password" onblur="check(this.value);" onfocus="this.value=''" ><br/><span id="pass_error" class="error"></span></td> 
 
<td> 
 
    <div align="left"><label><span class="glyphicon glyphicon-repeat"></span> Confirm Password </label> <span id='message'></span></div> 
 
      <input id="cpword" name="cpword" type="password" required="required" placeholder="Confirm Password" onfocus="this.value=''" onblur="validateCpass()"><br/><span id="cpass_error" class="error"></span> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td> 
 
<div align="left"><label><span class="glyphicon glyphicon-pushpin"></span> Pincode</label></div> 
 
<input id="pincode" name="pincode" type="text" required="required" maxlength="8" placeholder="Pincode" ><br/><span id="pincode_error" class="error"></span></td> 
 
<td> 
 
<div align="left"><label><span class="glyphicon glyphicon-phone"></span> Contact Number</label></div> 
 
      <input id="contact" name="contact" type="text" required="required" size="11" maxlength="11" placeholder="Contact Number" ><br/><span id="contact_error" class="error"></span> 
 
</td> 
 
</tr>

希望這有助於！

更多參考文獻：Responsive Web Design: CSS Media Queries