根据宽度以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