как создать мобильную версию( Responsive Web Design)

Курсы, колледжи, университеты.
Forum rules
solution
Уже с Приветом
Posts: 9183
Joined: 03 Oct 2019 17:06

Re: как создать мобильную версию( Responsive Web Design)

Post by solution »

BronenosezPotemkin wrote: ↑16 Oct 2020 06:40
solution wrote: ↑16 Oct 2020 06:27
The validatror shows error when I put http of the page pointing to label class (below)...

https://validator.w3.org

//errors
1. Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
From line 14, column 25; to line 14, column 77
rm-group"><label class="col-sm-2 control-label" for="fullname">Name</

2. Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
From line 18, column 25; to line 18, column 77
rm-group"><label class="col-sm-2 control-label" for="comments">Commen

<h3>Form</h3>
<form class="form-hotizontal" action="index.php" method="post"></form>
<div class="form-group"><label class="col-sm-2 control-label" for="fullname">Name</label>
<div class="col-sm-10"><input id="name" class="form-control" name="fullname" type="text" value="" placeholder="Name in Full" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10"><input id="email" class="form-control" name="email" type="text" value="" placeholder="E-Mail" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="comments">Comments</label> <textarea id="exampleFormControlTextarea1" class="form-control" rows="5" placeholder="Comments"></textarea></div>
<button class="btn btn-primary" type="submit">Submit</button></div>
</div>
</body>
</html>
Вам надо сделать так, чтобы for заголовка совпадал с id контроля, к которому относится:
<div class="form-group"><label class="col-sm-2 control-label" for="fullname">Name</label>
<div class="col-sm-10"><input id="fullname" class="form-control" name="fullname" type="text" value="" placeholder="Name in Full" /></div>
So instead :
fullname need to put name?
email - nothing to change
comments need to use instead of exampleFormControlTextarea1?
or anything else?
Top
solution
Уже с Приветом
Posts: 9183
Joined: 03 Oct 2019 17:06

Re: как создать мобильную версию( Responsive Web Design)

Post by solution »

solution wrote: ↑16 Oct 2020 07:00
BronenosezPotemkin wrote: ↑16 Oct 2020 06:40
solution wrote: ↑16 Oct 2020 06:27
The validatror shows error when I put http of the page pointing to label class (below)...

https://validator.w3.org

//errors
1. Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
From line 14, column 25; to line 14, column 77
rm-group"><label class="col-sm-2 control-label" for="fullname">Name</

2. Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
From line 18, column 25; to line 18, column 77
rm-group"><label class="col-sm-2 control-label" for="comments">Commen

<h3>Form</h3>
<form class="form-hotizontal" action="index.php" method="post"></form>
<div class="form-group"><label class="col-sm-2 control-label" for="fullname">Name</label>
<div class="col-sm-10"><input id="name" class="form-control" name="fullname" type="text" value="" placeholder="Name in Full" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10"><input id="email" class="form-control" name="email" type="text" value="" placeholder="E-Mail" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="comments">Comments</label> <textarea id="exampleFormControlTextarea1" class="form-control" rows="5" placeholder="Comments"></textarea></div>
<button class="btn btn-primary" type="submit">Submit</button></div>
</div>
</body>
</html>
Вам надо сделать так, чтобы for заголовка совпадал с id контроля, к которому относится:
<div class="form-group"><label class="col-sm-2 control-label" for="fullname">Name</label>
<div class="col-sm-10"><input id="fullname" class="form-control" name="fullname" type="text" value="" placeholder="Name in Full" /></div>
I've changed as directed and no errors! :-)
Code as below.
Let me know if I need to add. or change something for mobile.
thanks.


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact us</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/j ... "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstr ... "></script>
</head>

<body>
<h3>Form</h3>
<form class="form-hotizontal" action="index.php" method="post"></form>
<div class="form-group"><label class="col-sm-2 control-label" for="name">Name</label>
<div class="col-sm-10"><input id="name" class="form-control" name="fullname" type="text" value="" placeholder="Name in Full" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10"><input id="email" class="form-control" name="email" type="text" value="" placeholder="E-Mail" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="comments">Comments</label> <textarea id="comments" class="form-control" rows="5" placeholder="Comments"></textarea></div>
<button class="btn btn-primary" type="submit">Submit</button></div>
</div>
</body>
</html>
Top
solution
Уже с Приветом
Posts: 9183
Joined: 03 Oct 2019 17:06

Re: как создать мобильную версию( Responsive Web Design)

Post by solution »

solution wrote: ↑16 Oct 2020 08:54
solution wrote: ↑16 Oct 2020 07:00
BronenosezPotemkin wrote: ↑16 Oct 2020 06:40
solution wrote: ↑16 Oct 2020 06:27
There are no errors but a form located in the left screen(code as below).

I've tried to use <center></center> but it said that it outdated...

Is anything could be done to put a form on the center or it is supposed to be this way on mobile version?

<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Us</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstra ... ap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/j ... "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstr ... "></script> -->

</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">ABC Toys</a></div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Productions</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Extra page</a></li>
</ul>
</div>
</nav>
<h2>Contact Us</h2>
<p><a href="#">Email </a> <br /> <a href="#">Phone </a> <br /> <a href="#">Facebook page </a></p>
<h2>Customer form</h2>
<form action="/action_page.php">
<div class="form-group"><label for="email">Email:</label> <input id="email" class="form-control" name="email" type="email" placeholder="Enter email" /></div>
<div class="form-group"><label for="pwd">Name</label> <input id="pwd" class="form-control" name="pwd" type="password" placeholder="Enter name" /></div>
<div class="checkbox"><label> <input name="remember" type="checkbox" /> Remember me </label></div>
<div class="form-group"><strong>Comments</strong> <br /> <textarea id="exampleFormControlTextarea1" class="form-control rounded-0" rows="10"></textarea></div>
<button class="btn btn-default" type="submit">Submit</button></form>
</body>
</html>
Top

Return to “Образование”