は、私が研究目的のためにregisterationフォームを作っていますし、私はPHPとHTMLを使用してに新しいです幅

Question

に基づいて、HTMLフォーム内の1つの別の下の入力フィールドを作ります。 は、これまでのところ、私がやっていることです：

<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> 

私のスクリーンショットに、以下のように出力与える：

私が遭遇した問題は、フォームを完了した後だったが、私は上でそれを使用しようとしました小型の装置。 右側の入力フィールドは表示されません。 デバイスの幅が特定のピクセル以下に変化した場合は、lastnameから始まるフィールド、つまり右の列入力フィールドが他のフィールドの下に表示されるような方法はありませんか。 私はちょうど基本を学び始めたので私が誤っている場合は、私を許してください。

Answer 1

あなたはtbody > tr > td、同様のCSSスタイルを変更するのは簡単CSS Media queriesを使用することができます。

/* 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