Reputation: 1129

HTML form not responsive

I have this code below which consist of a simple HTML, what i am trying to accomplish is to make this form mobile responsive. I have tried to add bootstrap's grid to my code but it still doesn't seem to work when i minimize the screen.

This is what i get when i minimize my screen with my current codes.

This is what i want my form to look like when i minimize the screen. Is there an easy way to accomplish this? Any help would be greatly appreciated.

$().ready(function() {
  // validate the comment form when it is submitted
  $("#commentForm").validate();

  // validate signup form on keyup and submit
  $("#signupForm").validate({
	rules: {
	  fname: "required",
	  lname: "required",
	  password: {
	    required: true,
		minlength: 8
      },
	  cpassword: {
	    required: true,
		minlength: 8,
		equalTo: "#password"
	  },
	  email: {
	    required: true,
		email: true
	  },
	  topic: {
	    required: "#newsletter:checked",
		minlength: 2
	  },
	  agree: "required"
	},
	messages: {
	  firstname: "Your first name is required.",
	  lastname: "Please enter your lastname",
	  username: {
	    required: "Please enter a username",
		minlength: "Your username must consist of at least 2 characters"
	  },
	  password: {
	    required: "Please provide a password",
		minlength: "Password must be 8 characters long"
	  },
	  cpassword: {
	    required: "Please provide a password",
		minlength: "Password must be 8 characters long",
		equalTo: "Password do not match!"
	  },
	  email: "Please enter a valid email address",
	}
  });
});

* {
    box-sizing:border-box;
}
input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  border-radius: 3px;
  width:100%;
}

.form-row {
  flex-direction: row;
  display: flex;
}

.form-row > div {
  margin: 10px;
  flex-grow:1;
}

.form-panel {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}
label{
	color:#d54445;
	margin-left: 2px;
	margin-top: 5px;
}
input {
  display: block;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
  </head>
  <body>
    <form class="form-panel" id="signupForm">
      <div class="form-row form-name">
        <div class="col-sm-3"><input type="text" name="fname" id="fname" placeholder="First Name"></div>
        <div class="col-sm-3"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
      </div>
      <div class="form-row form-email">
        <div class="col-sm-6"><input type="email" name="email" id="email" placeholder="Email Address"></div>
      </div>
      <div class="form-row form-password">
        <div class="col-sm-3"><input type="password" name="password" id="password" placeholder="Password"></div>
        <div class="col-sm-3"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
      </div>
      <input type="submit" class="btn btn-default submit-button" value="Sign up!">
    </form>
  </body>
</html>

Upvotes: 3

Answers (9)

Darryl Ferdinands

Reputation: 1

From what I understand, 1.) You need to include the proper Bootstrap script tag in your head tag.

2.) You need to include the bootsrap css file as well.

3.) Remove the col-sm from wherever you have placed it and just put a div class="container" tag outside your form tag. Ex, .... .

This should suffice.

Upvotes: 0

Alexander Arce

Reputation: 126

Seems that you forgot to include the Bootsrap CDN in your HTML, besides you need to add col-sm for small devices plus col-md for medium, is this what you were trying to accomplish?

$().ready(function() {
		// validate the comment form when it is submitted
		$("#commentForm").validate();

		// validate signup form on keyup and submit
		$("#signupForm").validate({
			rules: {
				fname: "required",
				lname: "required",
				password: {
					required: true,
					minlength: 8
				},
				cpassword: {
					required: true,
					minlength: 8,
					equalTo: "#password"
				},
				email: {
					required: true,
					email: true
				},
				topic: {
					required: "#newsletter:checked",
					minlength: 2
				},
				agree: "required"
			},
			messages: {
				firstname: "Your first name is required.",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
				password: {
					required: "Please provide a password",
					minlength: "Password must be 8 characters long"
				},
				cpassword: {
					required: "Please provide a password",
					minlength: "Password must be 8 characters long",
					equalTo: "Password do not match!"
				},
				email: "Please enter a valid email address",
			}
		});
	});

* {
  box-sizing:border-box;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  border-radius: 3px;
  width:100%;
}

.form-row > div {
  margin-bottom: 10px;
}

.form-panel {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

</head>
<body>
        <form class="form-panel" id="signupForm">
                <div class="form-row form-name">
                  <div class="col-12 col-md-3"><input type="text" name="fname" id="fname" placeholder="First Name"></div>
                  <div class="col-12 col-md-3"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
                </div>
                <div class="form-row form-email">
                  <div class="col-12 col-md-6"><input type="email" name="email" id="email" placeholder="Email Address"></div>
                </div>
                <div class="form-row form-password">
                  <div class="col-12 col-md-3"><input type="password" name="password" id="password" placeholder="Password"></div>
                  <div class="col-12 col-md-3"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
                </div>
                <input type="submit" class="btn btn-default submit-button" value="Sign up!">
              </form>

</body>
</html>

Upvotes: 3

BumbleBee

Reputation: 41

You'll have to use media queries in your CSS.
It must look like this for a screen < 768px :

@media only screen and (max-width : 768px){
    ... your css for mobile goes here
}

Upvotes: 0

Przemysław Gęsieniec

Reputation: 648

As you can see in Grid options section of bootstrap documentation(https://getbootstrap.com/docs/4.0/layout/grid/), you have some class prefixes for predefined container widths in pixels.

One thing which is always forgotten is that you can add more than one class prefix into your div. This way you will get full experience of scalable user interface:

 <div class="container">
      <div class="row">
        <div class> 
          <div class=".col-lg-6 .col-sm-12"> 
            <input type="text" name="fname" id="fname" placeholder="First Name">
          </div>
          <div class=".col-lg-6 .col-sm-12"> 
            <input type="text" name="lname" id="lname" placeholder="Last Name">
          </div>
      </div>
 </div>

First Name and Last Name input field will appear in one row for large width (≥992px) and if you squeeze this window to ≥576px, last name div will jump under First Name.

Upvotes: 0

Alexandre Babeanu

Reputation: 188

Problem is with your usage of bootstrap. You need to understand that col-sm-3 means the column will be 3 units wide for small devices and above.

The way bootstrap works is that you want your columns to expand when view is retracting so you should do:

<form class="form-panel" id="signupForm">
            <div class="form-row form-name">
              <div class="col-6 col-md-3"><input type="text" name="fname" id="fname" placeholder="First Name"></div>
              <div class="col-6 d-md-none"></div>
              <div class="col-6 col-lg-3"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
              <div class="col-6 d-md-none"></div>
            </div>
            <div class="form-row form-email">
              <div class="col-md-6"><input type="email" name="email" id="email" placeholder="Email Address"></div>
            </div>
            <div class="form-row form-password">
              <div class="col-6 col-md-3"><input type="password" name="password" id="password" placeholder="Password"></div>
              <div class="col-6 d-md-none"></div>
              <div class="col-6 col-md-3"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
              <div class="col-6 d-md-none"></div>
            </div>
            <input type="submit" class="btn btn-default submit-button" value="Sign up!">
</form>

col-6 specifies 6 units for all devices, col-md-3 overides col-6 for medium and large devices.

The tricky part is the empty div. The way bootstrap works is that it populates a row with twelve columns and then adds another line so if you have an element like col-12 the next element will automatically be on the next line.

thus an empty col-6 div hidden on medium and large screens (d-md-none).

you can also do this with flex box on bootstrap 4. flexbox doc

Hope this is clear.

Upvotes: 0

Khyati Chandak

Reputation: 66

You should use some Bootstrap classes like col-md-6, col-sm-12, col-xs-12, row. Jsfiddle

$().ready(function() {
  // validate the comment form when it is submitted
  $("#commentForm").validate();

  // validate signup form on keyup and submit
  $("#signupForm").validate({
    rules: {
      fname: "required",
      lname: "required",
      password: {
        required: true,
        minlength: 8
      },
      cpassword: {
        required: true,
        minlength: 8,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "Your first name is required.",
      lastname: "Please enter your lastname",
      username: {
        required: "Please enter a username",
        minlength: "Your username must consist of at least 2 characters"
      },
      password: {
        required: "Please provide a password",
        minlength: "Password must be 8 characters long"
      },
      cpassword: {
        required: "Please provide a password",
        minlength: "Password must be 8 characters long",
        equalTo: "Password do not match!"
      },
      email: "Please enter a valid email address",
    }
  });
});

* {
  box-sizing: border-box;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  border-radius: 3px;
  width: 100%;
}

.form-panel {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

label {
  color: #d54445;
  margin-left: 2px;
  margin-top: 5px;
}

input {
  display: block;
  margin: 10px 0px;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>

</head>

<body>
  <form class="form-panel" id="signupForm">
    <div class="row form-name">
      <div class="col-md-6 col-sm-12 col-xs-12"><input type="text" name="fname" id="fname" placeholder="First Name"></div>

      <div class="col-md-6 col-sm-12 col-xs-12"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
    </div>
    <div class="row form-email">
      <div class="col-md-12 col-sm-12 col-xs-12"><input type="email" name="email" id="email" placeholder="Email Address"></div>
    </div>
    <div class="row form-password">
      <div class="col-md-6 col-sm-12 col-xs-12"><input type="password" name="password" id="password" placeholder="Password"></div>
      <div class="col-md-6 col-sm-12 col-xs-12"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
    </div>
    <input type="submit" class="btn btn-default submit-button col-md-6 col-sm-6 col-xs-6" value="Sign up!">
  </form>

</body>

</html>

Upvotes: 0

Vanonckelen Dieter

Reputation: 64

I do not understand what you are exactly looking for but try this for a second, mayby it looks better?

* {
    box-sizing:border-box;
}
input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  border-radius: 3px;
  width:100%;
}

.form-row {
  flex-direction: row;
  display: flex;
}

.form-row > div {
  margin: 10px;
  flex-grow:1;
}

.form-panel {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}
label{
	color:#d54445;
	margin-left: 2px;
	margin-top: 5px;
}
input {
  display: block;
}
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
/* Clear floats after the columns */

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>

</head>
<body>
  <div class="container">
        <form class="form-panel" id="signupForm">
                <div class="row">
                  <div class="col-75"><input type="text" name="fname" id="fname" placeholder="First Name"></div>
                  <div class="col-75"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
                </div>
                <div class="row">
                  <div class="col-75"><input type="email" name="email" id="email" placeholder="Email Address"></div>
                </div>
                <div class="row">
                  <div class="col-75"><input type="password" name="password" id="password" placeholder="Password"></div>
                  <div class="row">
                  <div class="col-75"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
                </div>
                  <div class="col-75">
                <input type="submit" class="btn btn-default submit-button" value="Sign up!">
                  </div>
              </form>
  </div>

</body>
</html>

Upvotes: 0

Mr. Roshan

Reputation: 1805

Try this:-

$().ready(function() {
		// validate the comment form when it is submitted
		$("#commentForm").validate();

		// validate signup form on keyup and submit
		$("#signupForm").validate({
			rules: {
				fname: "required",
				lname: "required",
				password: {
					required: true,
					minlength: 8
				},
				cpassword: {
					required: true,
					minlength: 8,
					equalTo: "#password"
				},
				email: {
					required: true,
					email: true
				},
				topic: {
					required: "#newsletter:checked",
					minlength: 2
				},
				agree: "required"
			},
			messages: {
				firstname: "Your first name is required.",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
				password: {
					required: "Please provide a password",
					minlength: "Password must be 8 characters long"
				},
				cpassword: {
					required: "Please provide a password",
					minlength: "Password must be 8 characters long",
					equalTo: "Password do not match!"
				},
				email: "Please enter a valid email address",
			}
		});
	});

* {
    box-sizing:border-box;
}
input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  border-radius: 3px;
  width:100%;
}

.form-row {
  flex-direction: row;
  display: flex;
}

.form-row > div {
  margin: 10px;
  flex-grow:1;
}

.form-panel {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}
label{
	color:#d54445;
	margin-left: 2px;
	margin-top: 5px;
}
input {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>

</head>
<body>
        <form class="form-panel" id="signupForm">
                <div class="form-row form-name">
                  <div class="col-sm-12 col-md-3"><input type="text" name="fname" id="fname" placeholder="First Name"></div>   
                  <div class="col-sm-12 col-md-3"><input type="text" name="lname" id="lname" placeholder="Last Name"></div>
                </div>
                <div class="form-row form-email">
                  <div class="col-sm-6"><input type="email" name="email" id="email" placeholder="Email Address"></div>
                </div>
                <div class="form-row form-password">
                  <div class="col-sm-12 col-md-3"><input type="password" name="password" id="password" placeholder="Password"></div>

                  <div class="col-sm-12 col-md-3"><input type="password" name="cpassword" id="cpassword" placeholder="Comfirm Password"></div>
                </div>
                <input type="submit" class="btn btn-default submit-button" value="Sign up!">
              </form>

</body>
</html>

Upvotes: 0

Reign.85

Reputation: 2518

You don't need bootstrap for this, you should use media queries : https://www.w3schools.com/css/css3_mediaqueries_ex.asp

For exemple, you could change width to 100% when screen is lower than 600px.

Upvotes: 1

HTML form not responsive

Answers (9)

Related Questions