使用网格布局进行表单设计

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用网格布局进行表单设计相关的知识,希望对你有一定的参考价值。

我正在尝试使用Grid布局在CSS中设计搜索表单。我的目标是使表单看起来类似于:

.

我的方法是有4行:

  • 输入/文本标签的1行
  • 输入/文本字段的1行
  • 复选框有1行
  • 搜索按钮有1行

和10个分数列:

  • 输入/文本标签将跨越3列
  • 输入/文本字段将跨越10列
  • 复选框将跨越2/3列,标签将位于跨越3/4列的同一行上
  • 搜索按钮将居中并跨越7列

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
}

form {
  margin: 10% 2%;
  border-radius: 10px;
  background-color: #f2f2f2;
  padding: 30px;
  display: grid;
  /*row for search field, row for checkbox, empty row, search button row
		  checkbox is 1 column, label is 4 columns, search button is 7 columns*/
  grid-template-rows: 60px 45px 45px 60px;
  grid-template-columns: repeat(10, 1fr);
}

label {
  grid-row: 1;
  grid-column: 1 / 11;
}

input[type=text] {
  grid-row: 2;
  grid-column: 2 / 11;
}
<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="layout.css">
</head>

<body>
  <div class="form">
    <form action="{% url 'search_results' %}" method="post">
      <label for="search_field">Search for:</label>
      <!--<br>-->
      <input required id="search_field" type="text" name="search_term" placeholder="Search for...">
      <br>
      <input id="is_date" type="checkbox" name="is_date" value="date">
      <label for="is_date">I'm searching for a date (e.g. 02/10)</label>
      <br><br>
      <!--<input type="submit" value="Search">-->
      <button>Search</button>
    </form>
  </div>
</body>

</html>

但不知何故,我收到下面的输出。

我是以错误的方式接近这个吗?输入/文本字段不应该在第二行而不是第一行带有标签等。?

答案

您的CSS似乎不完整。没有样式应用于多个元素。目前尚不清楚为什么你的布局不起作用。

但是,有几种方法可以使布局工作。你选择了基于行的放置方法,所以我会在答案中坚持这一点。

form {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 60px 45px 45px 60px;
  grid-gap: 5px;
  padding: 30px;
  border: 2px solid green;
  border-radius: 10px;
  margin: 10px;
}

label[for="search_field"] {
  grid-row: 1;
  grid-column: 1 / 4;
}

input#search_field {
  grid-row: 2;
  grid-column: 1 / 11;
}

input#is_date {
  grid-row: 3;
  grid-column: 1 / 2;
}

label[for="is_date"] {
  grid-row: 3;
  grid-column: 2 / 5;
}

button {
  grid-row: 4;
  grid-column: 3 / 9;
  background-color: royalblue;
  border: none;
  color: white;
  font-weight: bold;
}

/* for demo styles only */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
}

form > * {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid green;
}

button {
  background-color: royalblue;
  border: none;
  color: white;
  font: 1.2em verdana;
}
<form method="post">
  <label for="search_field">Label</label>
  <input id="search_field" type="text" placeholder="Search for...">
  <input id="is_date" type="checkbox" value="date">
  <label for="is_date">Label for Checkbox</label>
  <button>Search</button>
</form>

以上是关于使用网格布局进行表单设计的主要内容,如果未能解决你的问题,请参考以下文章

reactjs中损坏的引导网格布局

如何在kotlin的片段内显示网格视图?

Python - 使用网格布局格式化窗口

网格(grid)

在移动设备上将 Bootstrap 布局从内联表单更改为网格

SAP UI5 Form 表单的 Responsive Grid Layout 布局中的 breakpoint