Search code examples
htmlcssformsalignment

Making the input fields below one another in html form based on width

I am making a registeration form for study purpose and i am new to using php and html. So far what I have done is :

<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="[email protected]"    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>

which gives me the output as shown below in the screenshot:enter image description here

The problem i encountered was after completing the form , i tried to use it on a smaller device. The input fields on the right side are not visible. Is there any way for the fields starting from lastname ie right column input fields to appear one below other if the device width changes below certain pixels. Please excuse me if i have erred because i have just started learning the basics.

Solution

  • You can use simple CSS Media queries to change the CSS styling of tbody > tr > td, Like:

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

    Have a look at the snippet below (Use full screen preview & adjust the browser width to see the difference):

    @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="[email protected]"    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>

    Hope this helps!

    More References: Responsive Web Design: CSS Media Queries