如何構建靈活的HTML表單佈局？

-3

我想建立具有以下特點靈活的HTML表單：如何構建靈活的HTML表單佈局？

標籤應該待在他的組件的上方（見下圖）;
組件應填充（寬度尺寸）屏幕上可用的所有空間，並使用最小寬度配置;
如果屏幕寬度不適合所有表單組件，則應將其堆疊;

HTML表格與填充所有的屏幕寬度

具有降低的屏幕寬度

什麼是更好的解決方案，以實現該結果相同的HTML表格的部件，沒有使用HTML表格，只有HTML + CSS？

來源

2016-03-29 Davi

你會想要使用CSS媒體查詢 - https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries –

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    
 
    <title></title> 
 
    
 
</head> 
 
<body> 
 
    <form class="container-fluid"> 
 
<div class="row"> 
 
    <div class="col-md-4 col-xs-6"> 
 
    <label>field 1</label> 
 
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text1"> 
 
    </div> 
 
    <div class="col-md-4 col-xs-6"> 
 
    <label>field 2</label> 
 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="text2"> 
 
    </div> 
 
    <div class="col-md-4 col-xs-6"> 
 
    <label>field 3</label> 
 
    <select class="form-control"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
</select> 
 
    </div> 
 
</div> 
 
    
 
    <div class="row"> 
 
    <div class="col-md-6 col-xs-8"> 
 
    <label>field 4</label> 
 
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text3"> 
 
    </div> 
 
    <div class="col-md-6 col-xs-8"> 
 
    <label>field 6</label> 
 
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text4"> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-md-12 col-xs-12" 
 
    <label>field5</label> 
 
    <textarea class="form-control" rows="3"></textarea> 
 
    </div> 
 
    </div> 
 
<br> 
 
<button type="button" class="btn btn-primary">OK</button> 
 
<button type="button" class="btn btn-info">CANCEL</button> 
 
    </form> 
 
</body> 
 
</html>

這是所有什麼你想通過使用最好的方式來完成，使用bootstrap，你需要練習引導，在這裏你可以去Bootstrap forms。快樂的編碼！

來源

2016-03-29 17:22:22 Manish62

由於代碼簡潔，並且因爲它利用了非常完善的框架，所以沒有提及它避免重新發明輪子。謝謝@Manish。 – Davi

歡迎，快樂編碼！ @Davi – Manish62

這應做到：

.form-group { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.form-control { 
 
    padding: 3px; 
 
    box-sizing: border-box; 
 
    float: left; 
 
} 
 

 
.form-control input, 
 
.form-control select, 
 
.form-control textarea { 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
} 
 

 
.form-control textarea { 
 
    resize: vertical; 
 
} 
 

 
#form-group-1 .form-control { 
 
    width: 33.333%; 
 
} 
 

 
#form-group-2 .form-control { 
 
    width: 50%; 
 
} 
 

 
#form-group-3 .form-control { 
 
    width: 100%; 
 
} 
 

 
#form-group-4 .form-control { 
 
    width: 6em; 
 
} 
 

 
@media (max-width: 500px) { 
 
    #form-group-1 .form-control { 
 
     width: 50%; 
 
    } 
 
    
 
    #form-group-2 .form-control { 
 
     width: 66.6666%; 
 
    } 
 
}

<form> 
 
    <div class="form-group" id="form-group-1"> 
 
     <div class="form-control"> 
 
      <label for="field1">Field 1</label> 
 
      <input name="field1" id="field1" placeholder="text1"> 
 
     </div> 
 
     <div class="form-control"> 
 
      <label for="field2">Field 2</label> 
 
      <input name="field2" id="field2" placeholder="text2"> 
 
     </div> 
 
     <div class="form-control"> 
 
      <label for="field3">Field 3</label> 
 
      <select name="field3" id="field3"> 
 
       <option value="1">Option 1</option> 
 
       <option value="2">Option 2</option> 
 
      </select> 
 
     </div> 
 
    </div> 
 
    <div class="form-group" id="form-group-2"> 
 
     <div class="form-control"> 
 
      <label for="field4">Field 4</label> 
 
      <input name="field4" id="field4" placeholder="text4"> 
 
     </div> 
 
     <div class="form-control"> 
 
      <label for="field5">Field 5</label> 
 
      <input name="field5" id="field5" placeholder="text5"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group" id="form-group-3"> 
 
     <div class="form-control"> 
 
      <label for="field6">Field 6</label> 
 
      <textarea name="field6" id="field6"></textarea> 
 
     </div> 
 
    </div> 
 
    <div class="form-group" id="form-group-4"> 
 
     <div class="form-control"> 
 
      <input type="submit" value="OK" /> 
 
     </div> 
 
     <div class="form-control"> 
 
      <input type="button" value="CANCEL" /> 
 
     </div> 
 
    </div> 
 
</form>

（見this Fiddle）

來源

2016-03-29 15:49:23

豎起大拇指，因爲這個解決方案不需要任何外部依賴。謝謝@ john-slegers。 – Davi

如何構建靈活的HTML表單佈局？

回答

相關問題