如何构建灵活的HTML表单布局？

Question

我想构建具有以下功能的灵活 html 表单：

标签应位于其组件的正上方（见下图）；
组件应填充（宽度尺寸）屏幕上所有可用的 space，具有最小宽度配置；
如果屏幕宽度不适合所有表单组件，则应堆叠它们；

HTML 组件填充整个屏幕宽度的表单

相同的 HTML 屏幕宽度减小的表单

在不使用 html table 而只使用 HTML + CSS 的情况下，实现此结果的更优雅的解决方案是什么？

Answer 1

应该这样做：

.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）

Answer 2

<!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，参考这里你可以去Bootstrap forms。编码愉快！

如何构建灵活的HTML表单布局？

How to build a flexible HTML form layout?

html

css

forms

layout

css-frameworks