江阴网站建设,江阴网站制作,江阴网站设计,江阴SEO优化,江阴小程序开发-江阴雨辰互联

  1. JustNews 首页
  2. questions

javascript - HTML form not responsive - Stack Overflow

admin••questions•阅读0

I have this code below which consist of a simple HTML, what i am trying to acplish is to make this form

I have this code below which consist of a simple HTML, what i am trying to acplish 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 acplish this? Any help would be greatly appreciated.

$().ready(function() {
  // validate the ment form when it is submitted
  $("#mentForm").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=".3.1/jquery.min.js"></script>
    <script src="//code.jquery/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="/[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>

I have this code below which consist of a simple HTML, what i am trying to acplish 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 acplish this? Any help would be greatly appreciated.

$().ready(function() {
  // validate the ment form when it is submitted
  $("#mentForm").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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery./ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr/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>

  • javascript
  • html
  • css
Share Improve this question edited Jul 19, 2018 at 9:23 Manav 5517 silver badges18 bronze badges asked Jul 19, 2018 at 8:29 Best JeanistBest Jeanist 1,1294 gold badges14 silver badges37 bronze badges 3
  • @Teemu i have updated my question – Best Jeanist Commented Jul 19, 2018 at 8:34
  • write <input type="text" class="form-control col-sm-12 col-xs-12" /> – CodingFriend Commented Jul 19, 2018 at 8:38
  • @CodingFriend i have added it in but still no luck – Best Jeanist Commented Jul 19, 2018 at 8:44
Add a ment  | 

9 Answers 9

Reset to default 3

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

$().ready(function() {
		// validate the ment form when it is submitted
		$("#mentForm").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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery./ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr/npm/[email protected]/dist/jquery.validate.js"></script>
  <link href="https://stackpath.bootstrapcdn./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>

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

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

Try this:-

$().ready(function() {
		// validate the ment form when it is submitted
		$("#mentForm").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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery./ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr/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>

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery./ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr/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>

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

$().ready(function() {
  // validate the ment form when it is submitted
  $("#mentForm").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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//code.jquery./ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr/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>

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.

As you can see in Grid options section of bootstrap documentation(https://getbootstrap./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.

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
}

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.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745324846a4622607.html

adminadmin
0

相关推荐

  • javascript - HTML form not responsive - Stack Overflowquestions

    javascript - HTML form not responsive - Stack Overflow

    I have this code below which consist of a simple HTML, what i am trying to acplish is to make this form

    adminadmin
    5小时前
    10

发表回复

评论列表（0条）

  • 暂无评论

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信