입력 필드를 너비에 따라 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