表单自适应_快速提示：鼓励自适应表单元素发挥出色

最新推荐文章于 2022-05-05 21:53:48 发布

daique1908

最新推荐文章于 2022-05-05 21:53:48 发布

阅读量273

点赞数

文章标签： css html js web html5 ViewUI

表单自适应

上周末，我下载了Dave Gamache的Skeleton样板进行玩耍。良好，干净，响应Swift的乐趣。当涉及到表单设计时，我想起了一个会影响灵活布局中的输入的问题：宽度错误。如果您曾经遇到过相同的问题，或者从未听说过，请继续阅读。

问题

假设我们有一个包含元素的布局，该元素具有灵活的宽度（拉伸浏览器，然后拉伸容器）。在我们的容器中，我们有各种各样的元素（标题，段落，水平线，div），并且我们还有一个简单的表单，可以容纳一些典型的表单和鲍勃。

所有内容物都会根据容器的宽度而增长和收缩。块级元素（例如div）完全匹配宽度。它们会自动填充容器宽度的100％，并且不管它们的边框或边框如何整齐地放置在其父代的边界内。

表单输入没有。

为了使它们填充容器的宽度，我们必须应用width: 100%; 。然而，这样做之后，添加填充，边框或边距将导致我们的输入因容器的约束而破裂。笨蛋

他们真的有不当行为吗？

好吧，不是真的。 CSS Box Model规定了元素尺寸的行为方式，并且自从引入Web标准以来，我们已经开始接受填充，边距和边框会增加元素的尺寸。

因此可以说，在这种情况下，我们的div是表现异常的那个，但这只是因为我们实际上尚未定义其宽度。

它似乎在处理Internet Explorer传统上使用的方式。怪异模式方法意味着您定义了元素的宽度和高度，并且在这些尺寸内将考虑任何填充或边框。如果您将div指定为600px宽，即使您添加了10px的填充，它仍将为600px宽。您会断然知道您的元素有多大。

响应式设计

只要知道元素的行为方式，我们就可以允许差异并相应地指定固定尺寸。但是在这个布局混乱的时代，我们不一定知道包含元素的范围。当然，有一种方法可以使我们的输入和文本区域的行为与其他所有行为相同？很高兴在那里。我们将构建一个快速演示来说明它。

演示

因为正是Skeleton样板让我想起了这个问题，所以我们将抓住它来快速构建自己的演示。

注意： Skeleton样板中的任何样式都是出于布局和基本美观的目的-我对其CSS的补充不是批评！

解压缩文件，您将看到以下内容：

我要做的第一个更改是index.html。在最后一列中，我们将内容换成表单：

<form action="">

  	<!-- Label and text input -->
  	<label for="regularInput">Regular Input</label>
  	<input type="text" id="regularInput" />

  	<!-- Label and textarea -->
  	<label for="regularTextarea">Regular Textarea</label>
  	<textarea id="regularTextarea"></textarea>

  	<!-- Label and select list -->
  	<label for="selectList">Select List</label>
  	<select id="selectList">
    	<option value="Option 1">Option 1</option>
    	<option value="Option 2">Option 2</option>
    	<option value="Option 3">Option 3</option>
  	</select>
			
  	<button type="submit">Submit Form</button>

</form>

然后将几行添加到stylesheets / layout.css：

.column {
	background: #f7f7f7;
}

input[type='text'],
select,
textarea {
	width: 100%;
}

我们所做的就是为列提供灰色背景（以便我们可以看到边界在哪里），并使表单元素100％宽。到目前为止检查结果。清楚地说明了输入行为异常的问题，因此现在解决该问题。

解决方案

我们可以使我们的表单元素按照带有一行CSS的旧怪癖模式框模型运行。

input[type='text'],
textarea {
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

好了，有六行，但是重要的是box-sizing: border-box; ，以及其供应商前缀的兄弟。我们已将此规则应用于文本输入和文本区域，告诉浏览器使用内部的填充和边框来呈现其尺寸。看看结果演示，perfecto！调整浏览器的大小，您将看到表单元素像其块级好友一样玩得很好。

在浏览器支持方面，您也很了解。具有讽刺意味的是，IE7无法识别box-sizing属性，但这是您唯一遇到麻烦的浏览器。