フォームにスクロール機能を追加する

私が直面している問題は、フォームがwindow.But上に静的なままであるということです。しかし、私が望むのは、form_1がユーザのクエリを「あなたの開始 "都市テキストボックスを入力してください。フォームにスクロール機能を追加する

<html> 
<head> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style type="text/css"> 
    img.bg { 
     min-height: 100%; 
     min-width: 1024px; 

     width: 100%; 
     height: auto; 

     position: fixed; 
     top: 0; 
     left: 0; 
    } 

    @media screen and (max-width: 1024px){ 
     img.bg { 
      left: 50%; 
      margin-left: -512px; } 
     #form_1 { 
      width: 20%; 
     } 
    } 

    #form_1 {  
     position: relative; 
     border-radius: 15px; 

     width: 80%; 
     margin: 15% auto; 
     padding: 20px; 
     background: white; 
     -moz-box-shadow: 0 0 20px black; 
     -webkit-box-shadow: 0 0 20px black; 
     box-shadow: 0 0 20px black; 
     display: table; 
     border :solid 2px black; 
     padding: 15px; 
    } 

    .row { 
     display:table-row; 
    } 

    .row label { 
     text-align: right; 
    } 
</style> 
</head> 
<body> 

<div id="yt" > 
    <img src="bg.jpg" class="bg"> 
    <form id="form_1" tabindex="0"> 
    <label>Enter Starting City</label> 
    <div class="row"> 
    <input type="text" name="s_city"></br> 
</div> 
<div class="row"> 
    <label>Wait While The Cities Appear 
    </label></br> 
    <textarea rows="10" cols="30"></textarea></br> 
    <div class="row"> 
</form> 
</div> 

</body> 
</html>

出典

2016-05-09 art

私はtabIndexプロパティを使用してみましたが、フォームがなく、ウィンドウの一番上にジャンプするテキストエリアでクエリを入力するとき、それは – art

を@cale_b達成するためにwindow.location.hash 「開始都市を入力してください」という入力タイプを入力すると、@ EricMüller – art

間違ったタグと誤った終了タグがあることにお気づきになりました。

<html> 
 
    <head> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <style type="text/css"> 
 
     img.bg { 
 
     min-height: 100%; 
 
     min-width: 1024px; 
 

 
     width: 100%; 
 
     height: auto; 
 

 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
     } 
 

 
     @media screen and (max-width: 1024px){ 
 
     img.bg { 
 
      left: 50%; 
 
      margin-left: -512px; } 
 
     #form_1 { 
 
      width: 20%; 
 
     } 
 
     } 
 

 
     #form_1 {  
 
     position: relative; 
 
     border-radius: 15px; 
 

 
     width: 80%; 
 
     margin: 15% auto; 
 
     padding: 20px; 
 
     background: white; 
 
     -moz-box-shadow: 0 0 20px black; 
 
     -webkit-box-shadow: 0 0 20px black; 
 
     box-shadow: 0 0 20px black; 
 
     display: table; 
 
     border :solid 2px black; 
 
     padding: 15px; 
 
     } 
 

 
     .row { 
 
     display:table-row; 
 
     } 
 

 
     .row label { 
 
     text-align: right; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 

 
    <div id="yt" > 
 
     <img src="bg.jpg" class="bg" /> 
 
     <form id="form_1" tabindex="0"> 
 
     <label>Enter Starting City</label> 
 
     <div class="row"> 
 
      <input type="text" name="s_city"><br/> 
 
     </div> 
 
     <div class="row"> 
 
      <label>Wait While The Cities Appear</label><br/> 
 
      <textarea rows="10" cols="30"></textarea><br/> 
 
     </div> 
 
     </form> 
 
    </div> 
 

 
    </body> 
 
</html>

出典

2016-08-10 08:04:06 pradeep1991singh

フォームにスクロール機能を追加する

答えて

関連する問題