如何构建灵活的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表单布局？

回答

相关问题