Как я могу предотвратить перемещение формы на моем мобильном веб-сайте прямо в альбомной ориентации при каждом выборе поля ввода?

Question

Я пытался использовать float, overflow, clear, и все же моя HTML-форма продолжает плавать прямо. Я предполагаю, что HTML-форма останется портретной на моем мобильном устройстве, когда я пойду, чтобы заполнить форму.

Это текущий код моей HTML-формы:

<form name = "CommentsForm" action ="Actionpage.php" onsubmit="return       
validateForm()" method="post">
<u class = "FormHeading">Send Comment</u><br>
<br>
First Name:<br>
<input type="text" name="firstname">
<br>
<div style = "position: relative; top: 4px; left: 01px;">
Last Name:<br>
<input type="text" name="lastname">
</div>
<br>
<div style = "position: relative; top: -13px; left: 1px;">
 Email:<br>
<input type="text" name="email">
</div>
<br>
<div style = "position: relative; top: -24px; left:03px;">
<label for="comment"> Comment:</label></div>
<textarea id="comment" name="comment" placeholder="Type commment              
here" style="height: 69px;">
</textarea>
<br>
<br>
<input type="submit" name ="submit" value="Send" >
</form>

Это CSS для формы HTML на моем мобильном сайте:

form 
{ 
 border: 10px solid #D3D3D3; 
 border-radius: 4px;
 background: #D3D3D3;
 width: 176px;
 height: 319px;
 position: absolute;
 top: 620px; 
 left: 91px;
 font-family: "Arial", "Times New Roman", "Sans Serif"; 
 font-style: normal;
 text-decoration: none;
 float: none;
 }
.FormHeading
{
 text-decoration: underline;
 font-weight: bold;
 position: relative;
 left: 29px;
 }
 input[type=text]
 {
 width: 168px;
 float: none;
 }
 input[type=text]:focus
 {
 float: none;
 }
 textarea
 {
 resize: none;
 box-sizing: border-box;
 position: relative;
 top: -23px;
 left: 01px;
width: 173px;
float: none;
}

input[type=submit]
{
background-color: #ADD8E6;
position: relative;
top: -44px;
left: 119px;
text-align: center;
}

Обратите внимание, что у меня HTC desire 626, и я проектирую свой мобильный веб-сайт с учетом этого.

Answer 1

используйте свойства вашей формы следующим образом:

form { border: 10px solid #D3D3D3; border-radius: 4px; background: #D3D3D3; width: 176px; height: 319px; position: relative; margin: 0 auto; font-family: "Arial", "Times New Roman", "Sans Serif"; font-style: normal; text-decoration: none; }

Я удалил ваш поплавок и сделал относительное положение и добавил поле: 0 авто; Я полагаю, вы пытаетесь сохранить форму в середине экрана? Если да, то это сработает.

Answer 2

Я делюсь ручкой с возможным решением:

Ваши позиции были зафиксированы, поэтому я сделал их гибкими, используя проценты. Дайте мне знать, если все в порядке.

Нажмите для решения на codepen

form {
  padding: 10px;
  border-radius: 4px;
  background: #d3d3d3;
  width: 176px;
  transform: translateX(-50%);
  height: 319px;
  position: absolute;
  bottom: 0;
  left: 50%;
  font-family: "Arial", "Times New Roman", "Sans Serif";
  font-style: normal;
  text-decoration: none;
}
.FormHeading {
  text-decoration: underline;
  font-weight: bold;
  position: relative;
  left: 29px;
}
input[type="text"] {
  width: 168px;
  float: none;
}
input[type="text"]:focus {
  float: none;
}
textarea {
  resize: none;
  box-sizing: border-box;
  position: relative;
  top: -23px;
  left: 1px;
  width: 173px;
  float: none;
}

input[type="submit"] {
  background-color: #add8e6;
  position: relative;
  top: -44px;
  left: 119px;
  text-align: center;
}

input[type=submit]
{
background-color: #ADD8E6;
position: relative;
top: -44px;
left: 119px;
text-align: center;
}

<form name="CommentsForm" action="Actionpage.php" onsubmit="return validateForm()" method="post">
  <u class="FormHeading">Send Comment</u><br>
  <br> First Name:<br>
  <input type="text" name="firstname">
  <br>
  <div style="position: relative; top: 4px; left: 01px;">
    Last Name:<br>
    <input type="text" name="lastname">
  </div>
  <br>
  <div style="position: relative; top: -13px; left: 1px;">
    Email:<br>
    <input type="text" name="email">
  </div>
  <br>
  <div style="position: relative; top: -24px; left:03px;">
    <label for="comment"> Comment:</label></div>
  <textarea id="comment" name="comment" placeholder="Type commment here" style="height: 69px;"></textarea>
  <br>
  <br>
  <input type="submit" name="submit" value="Send">
</form>