css 响应式表单_使用CSS3和HTML5创建时尚的响应式表单

CSS3编码极大地改变了前端Web开发的格局。 有更多的机会来构建具有渐变，阴影和圆角的独特界面。 所有这些影响都在每个主要的Web浏览器中逐渐被采用。

在本教程中，我想展示许多这些很棒CSS3效果。 我使用一些较新HTML5输入类型构建了一个简单的Web表单。 布局也很敏感 ； 它将随着窗口尺寸的减小而适应。 这种情况非常适合构建支持智能手机用户的Web表单。

查看源代码，看看是否可以按照文件结构进行操作。 另外，请随时自定义这些元素并将其复制到您自己的网站中。

• 演示版
• 下载源代码

建立表格结构

首先，我创建了一个主文件index.html以及两个单独的样式表。 style.css包含所有默认选择器，而active.css处理不同的窗口大小。 我的文档类型是HTML5，并将整个表单包装在容器

。

此示例仅演示在CSS3中进行编码时可以体现的效果。 因此，我们没有帖子提交脚本或目标来重定向用户。 我下面的代码包含前几个表单元素的开始输入标签。

第一个块区域被包裹在section标签中，因此我们可以并排浮动布局。 左列包含所有这些输入：文本，电子邮件，URL和电话号码。 在手机上浏览时，移动键盘的显示应根据输入类型进行调整。 有很多充分的理由支持这些功能的移动设备，因为如今每个人都在忙于工作。

textarea元素还可以具有在页面加载时定义的占位符文本。 这类似于标签，一旦用户在字段中输入一些文本，标签就会消失。 未autocomplete的属性是autocomplete因为文本区域通常不填写相关内容。

侧边栏控件

我想构建此表单，以便它可以适当地响应于调整窗口显示的大小。 当窗口足够满时，两个输入列将彼此相邻浮动。 但是，如果将宽度略微减小，则右侧边栏将下降到主要内容之下。

这是我的侧边栏区域HTML：

	

	
Recipient:
		
			Editor-in-Chief
			Tech Department
			Public Relations
			General Support
		
	
	
	

		
Priority:
		
			
			Low
		
	
		
			
			Medium
		
	
		
			
			High
		
	

这段代码实际上并不太令人困惑。 只是一个简单的选项选择菜单和一些单选按钮。 另外，在这些对象之后，我在本节末尾放置了一个重置​​并提交按钮。

一切看起来都很好，现在让我们进入一些CSS属性。 在处理表单元素时，可以应用许多自定义设置。 尽量不要让自己陷入沉思，不要玩得开心！

动画盒阴影

当您在浏览每个主要输入元素时，您会注意到我为彩色外阴影设置了动画。 Google Chrome浏览器具有Outline属性，该属性执行类似的操作，但并不那么奢侈。 界面的这一小部分吸引了首次访问者。

/** the form elements **/
#hongkiat-form { box-sizing: border-box; }

#hongkiat-form .txtinput { 
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  border-style: solid;
  border-width: 1px;
  border-color: #dedede;
  margin-bottom: 20px;
  font-size: 1.55em;
  padding: 11px 25px;
  padding-left: 55px;
  width: 90%;
  color: #777;
  
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
  
  transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}

#hongkiat-form .txtinput:focus { 
  color: #333;
  border-color: rgba(41, 92, 161, 0.4);
  
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
  outline: 0 none; 
}

为了定位每个文本元素，我使用了.txtinput类。 每个过渡属性都适用于边框，框阴影和颜色。 我正在使用box-sizing: border-box; 在表单容器上，因此填充不会弄乱我们的响应式设计。

我不得不复制这些相同的样式，并对其进行略微编辑以用于textarea。 我更改了一些填充和边距，并附加了一个独特的背景图标。

#hongkiat-form textarea {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  border-style: solid;
  border-width: 1px;
  border-color: #dedede;
  margin-bottom: 15px;
  font-size: 1.5em;
  padding: 11px 25px;
  padding-left: 55px;
  width: 90%;
  height: 180px;
  color: #777;
  
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
  
  transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#hongkiat-form textarea:focus {
  color: #333;
  border-color: rgba(41, 92, 161, 0.4);

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
  outline: 0 none; 
}
#hongkiat-form textarea.txtblock {
	background: #fff url('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat;
}

侧边栏输入

单选按钮和选择菜单项的样式要简单得多。 您可以在这些元素上应用外部发光效果和类似的阴影，但是效果并不总是很好。 或者，设计人员将创建自定义用户界面，并将其作为背景图像附加。 但这可能需要jQuery解决方法来保持选项正确显示。

span.radiobadge {
  display: block;
  margin-bottom: 8px;
}

span.radiobadge label {
  font-size: 1.2em;
  padding-bottom: 4px;
}

select.selmenu {
  font-size: 17px;
  color: #676767;
  padding: 9px !important;
  border: 1px solid #aaa;
  width: 200px;
}

我还没有做很多事情来将它们从主要输入元素中删除。 大量的额外填充很重要，因此您的用户可以轻松地与表单交互。 当文本非常微小时，仅填写每个部分可能会很困难。 保持字体较大，但不要太大，以免淹没页面。

定制按钮

重置和提交按钮是自己设计的。 我建立了一组光渐变，以与表单字段中的蓝色高光很好地匹配。

以下是我的标准和悬停状态上的Submit按钮CSS代码。

#buttons #submitbtn {
  display: block;
  float: left;
  height: 3em;
  padding: 0 1em;
  border: 1px solid;
  outline: 0;
  font-weight: bold;
  font-size: 1.3em;
  color: #fff;
  text-shadow: 0px 1px 0px #222;
  white-space: nowrap;
  word-wrap: normal;
  vertical-align: middle;
  cursor: pointer;
  
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  
  border-color: #5e890a #5e890a #000;
  
  -moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
  -ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
  -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
  box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
  
  background-color: rgb(226,238,175);
  background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38))); 
  background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
  background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
  background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
  background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2eeaf', endColorstr='#90b026',GradientType=0 );
}
#buttons #submitbtn:hover, #buttons #submitbtn:active {
  border-color: #7c9826 #7c9826 #000;
  color: #fff;
  
  -moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
  -ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
  box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
  
  background: rgb(228,237,189);
  background: -moz-linear-gradient(top, rgb(228,237,189) 2%, rgb(207,219,120) 3%, rgb(149,175,54) 100%); 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(228,237,189)), color-stop(3%,rgb(207,219,120)), color-stop(100%,rgb(149,175,54))); 
  background: -webkit-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 
  background: -o-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: -ms-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4edbd', endColorstr='#95af36',GradientType=0 );
}

保持这种选择器干净几乎是不可能的！ 您需要列出太多属性，并需要它们支持许多较旧的旧版浏览器。 Internet Explorer甚至可以使用适当的过滤器渲染这些渐变。 请注意，除了背景渐变之外，我还添加了新的边框颜色，圆角和悬停时的阴影。

重置按钮看起来很相似，但是我在配色方案上走了一条完全不同的路线。 与明亮的绿色相比，浅灰色倾向于掉入背景中。 我们的重置按钮可能不会使用太多，因此不需要所有注意。

#buttons #resetbtn {
  display: block;
  float: left;
  color: #515151;
  text-shadow: -1px 1px 0px #fff;
  margin-right: 20px;
  height: 3em;
  padding: 0 1em;
  outline: 0;
  font-weight: bold;
  font-size: 1.3em;
  white-space: nowrap;
  word-wrap: normal;
  vertical-align: middle;
  cursor: pointer;
  
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  
  background-color: #fff;
  background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(240,240,240) 2%, rgb(222,222,222) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-stop(100%,rgb(222,222,222)));
  background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);
  background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);  background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);
  background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );
  
  border: 1px solid #969696;
  
  box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
  -moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
  -webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
  
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
#buttons #resetbtn:hover {
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);	
  color: #818181;
  
  background-color: #fff;
  background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));
  background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
  
  border-color: #aeaeae;
  
  box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
}

您甚至可以删除重置类型，并使用白色/灰色配色方案作为主要的提交按钮。 我使用了许多相同的渐变样式和阴影效果，以及用于内部标签的文本阴影。 它无疑为用户体验提供了不同的感觉。

响应式布局更改

移到其他CSS文件中，我们可以看一下我设置的简单响应式媒体查询。 任何高于800px的浏览器窗口都将具有完整的侧边栏界面。 当您达到此阈值以下时，左列将扩展为100％的宽度，并且您会看到侧边栏元素下降到下方。

@media screen and (max-width: 800px) {
	body {
		padding: 10px 15px;
	}
	#container {
		width: 100%;
	}
	#hongkiat-form #aligned {
		width: 100%;
		float: none;
		display: block;
	}
	#hongkiat-form #aside {
		width: 100%;
		display: block;
		float: none;
	}
	#hongkiat-form .txtinput, #hongkiat-form textarea {
		width: 85%;
	}
	#prioritycase {
		float: left;
		display: block;
	}
	#recipientcase {
		float: left;
		display: block;
		margin-right: 55px;
	}
}

随着尺寸的缩小，我尝试调整每种输入形式。 width属性的结束时间可能长于网页本身，然后我们将输入表单突出显示在边缘上。 这发生在550px左右，这是我打断下一个查询的地方，以及iPhone屏幕的纵向和横向显示分辨率。

/* smaller screen dropoff *******/
@media only screen and (max-width: 550px) {
 	#hongkiat-form .txtinput, #hongkiat-form textarea {
		width: 80%;
	}
}

/* iPhone Landscape ********/
@media only screen and (max-width: 480px) {
	body {
		padding: 10px 0px;
	}
	select.selmenu {
		width: 190px;
	}
}

/* iPhone portrait *******/
@media only screen and (max-width: 320px) {
	body {
		padding: 10px 0px;
	}
 	#hongkiat-form .txtinput, #hongkiat-form textarea {
		width: 70%;
	}
	#hongkiat-form #aligned {
		overflow: hidden;
	}
	select.selmenu {
		width: 160px;
	}
	#recipientcase {
		margin-right: 30px;
	}
}

水平横向模式仍然可以很好地将所有内容组合在一起。 我只是使下拉选择菜单更薄一些，以便为单选按钮腾出空间。 在纵向视图中，我将所有元素的尺寸都调整得太小了。 现在，我们的代码在调整大小的浏览器窗口中不会收支平衡。 但是也很高兴也支持iOS / Android智能手机。

• 演示版
• 下载源代码

结论

我希望本教程对解释Webform上可以完成的工作很有帮助。 新CSS3属性功能强大，足以仅需几行代码即可构建功能全面的动画。 从事Web开发并遵循这些趋势确实是一个激动人心的时刻。

如果您对教程代码有任何想法或建议，请随时通过下面的评论框与我们分享。

翻译自: https://www.hongkiat.com/blog/creating-responsive-form-with-css3-html5/