摘要：一个表单由一或多个部件组成，这些部件可以是文本框单行或多行选择框按钮复选框或单选按钮。在我们的示例里，一个文本框中用了该属性的默认值，该值表示一个基本的单行文本框，用于接收无控制或验证的任何文本。
前言
这个系列译自mdn上的一份表单指南，原文详尽阐述了表单相关的基础知识。而表单作为一个经典的页面交互方式，是每个前端工程师绕不开的话题，通过翻译这个系列的文章既是有助于扫清自己的知识盲区，也希望借此能让更多人受惠吧~
先列下目录：
第一个HTML表单
怎样构建HTML表单
原生表单组件
HTML表单的CSS
HTML表单样式
HTML表单高级样式
表单组件的属性兼容表
发送表单数据
表单数据校验
怎样创建定制表单组件
通过JavaScript发送表单
使用FormData对象
遗留浏览器中的表单
声明：本文源于mdn，遵循mdn的相关协议，翻译过程可能会加入我个人的理解，转载请注明出处。
好，该说的都说完了，正文开始~
第一个HTML表单原文
这是一篇介绍HTML表单的文章，通过一个简单的contact表单，我们可以看到构建HTML表单的所有基本知识。本文假设你已掌握基本的HTML和CSS，但还不了解HTML表单。
开始之前 啥是HTML表单？HTML表单是用户和网站或引用的一个主要交互点。表单允许用户发送数据给网站，大多数时候数据会发到服务器上，然而页面也可以把数据拦下来给自己用。
一个HTML表单由一或多个部件组成，这些部件可以是文本框（单行或多行）、选择框、按钮、复选框、或单选按钮。通常，部件们会伴随一个描述它们使用目的的label出现。
处理表单需要什么？处理HTML时，你只需一个文本编辑器和一个浏览器即可。当然，你也也可以使用诸如Visual Studio、 Eclipse，Aptana之类的IDE。
此外，HTML表单和常规的HTML的主要区别在于表单收集的数据往往会被发送到服务器，这时你就需要搭个服务器来接受和处理这些数据了。至于如何搭建服务器，本文不作讨论，欲知详情，你可以看一篇这方面的文章：发送表单数据。
设计你的表单在开始撸代码前，最好先花点时间来构思下我们的表单。一个快速设计模型有助于你定义希望从用户那获得的数据集。从用户体验（UX）的观点来看，要知道你的表单越大，你越有可能失去用户。所以你应该保持简单和专注，只问你真想要的内容。要具体讨论表单的用户体验已超出本文的范围，给几篇这方面的文章把：
Smashing Magazine有不少和表单UX有关的好文章，但其中最重要的莫属Extensive Guide To Web Form Usability啦。
UXMatters上的资源也蛮丰富的，从基本的最佳实践到类似多页表单复杂内容都有。
在本文，我们将建立一个简单的contact表单，草图如下：
在我们的表单里，有三个文本框和一个按钮。文本框用来询问用户的名字、邮箱和他们想发送的消息，点击按钮则会把数据发给服务器。
尽情地写一波HTML吧现在我们要开始编码了，建立起我们的contact表单，一共需要这几个的HTML元素： , , ,
至于元素，type属性是其最重要的属性，因为该属性定义了input元素的行为。欲知更多，请阅读原生表单组件。 在我们的示例里，一个文本框中用了该属性的默认值text，该值表示一个基本的单行文本框，用于接收无控制或验证的任何文本。而另外一个文本框则使用了值email，表示定义一个只接收合法邮箱地址单行文本框，也就是说它会对用户输入的数据进行一些检查。我们会在表单数据校验这篇文章里讨论更多和表单验证有关的内容， 最后，我们来比较下和间的语法差别。就是所谓的自动闭合元素，这种元素需要你加个"/"而不是结束标签来闭合（译注：这只是xhtml的强制要求，但在html里不用"/"也是可以的）；而
再加个button来完成表单
我们的表单代码已经快准备好了，只差个让用户发送数据的按钮而已，再加个元素就可以很简单地完成任务： 按钮共有三种类型：submit, reset, button。 点击submit型按钮，会按照我们在元素上定义的action属性，把表单数据发给指定的页面。 点击reset型按钮，会直接重置所有表单组件为它们的默认值。从用户体验的角度来看，这其实是个不太好的操作。 点击button型按钮，什么都不会发生。。。听起来有点蠢，但其实这对于用javascript来定义自定义按钮是再好不过啦。 当然，你也可以用元素来生成上面那几个按钮，和使用相比，最大的区别就是元素只允许使用纯文本作为它的内容，而元素可以使用其他的HTML内容。（译注：比如图片，其实元素通过css也能实现类似效果。此外还有个更大的差别，就是在旧版本IE中会出现构造的按钮提交的是其value属性值，然而按钮提交的不是value值而是元素的文本内容，不过考虑到要把按钮也设置value提交的情况实在少见，这个差别其实也没多大意义） HTML表单已经有了，在你的浏览器下看看吧，其实还是有点丑的： 下面我们给它加点CSS装点装点，先让form元素居中并带上点边框： 接下来，给表单组件间加些间隔： 然后再来解决label们，最佳做法是设置所有label为统一大小并沿同一方向对齐。这里我们使用右对齐，但某些情况下使用左对齐也可以： 其实HTML表单的组件样式还是蛮难整的，其中文本框还算简单、但其他组件就难说了，若想深入了解如何设置表单组件样式，可见HTML表单样式。 首先我们进行下一些通用配置：协调字体、大小和边框： HTML表单还支持不少伪类，用以表现各元素的状态。比如，我们可以在组件被激活时作突出显示，这样可以方便用户知道表单填到哪一步了： 多行文本框还需要一些独有的自定义样式，
元素在这里用于结构化我们的代码并方便我们定义样式。此外还要注意元素for属性的使用，该属性是一种显式联系label和表单组件的方法，可以给它赋予想要关联组件的id值。这样一来，用户就可以通过点击label来激活表单组件了。如果你还想了解for
属性的其他好处，就参考这篇文章吧：怎样构建HTML表单
form {
/* 用来使表单相对页面居中 */
margin: 0 auto;
width: 400px;
/* 设置表单外沿 */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
label {
/* 确保所有label大小相同并适当对齐 */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* 确保所有文本框有相同的字体设置
默认设置一个等宽字体 */
font: 1em sans-serif;
/* 给所有文本框设置相同的大小 */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* 协调文本框边框的外形 */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* 让元素被激活时突出显示 */
border-color: #000;
}
在本例中，表单会发送三组数据，依次命名为user_name、user_email和user_message，他们会以HTTP POST的方式发送到URL"/my-handling-form-page"。
而在服务端，负责处理URL"/my-handling-form-page"的脚本会从HTTP请求中以3组键/值对的形式接收这些数据。至于脚本如何处理这些数据就取决于你的需求了，各种服务端语言（PHP, Python, Ruby, Java, C#等）有它们自有的机制来做这件事。要深入探究这方面就不是本文的主题了，欲知详情，我们会在发送表单数据这篇文章中给你一些例子。
结论恭喜！你终于完成你的第一个HTML表单啦~下面就是最终效果的在线演示：
演示
接下来是时候更上一层楼了，其实HTML表单远比我们在这里展现的强大，本指南的其他文章将会帮助你掌握剩下的内容。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54367.html
摘要：提到老旧浏览器，我们脑海中往往复现的就是旧版的。但幸运的是，有一些技巧可以协助解决由老旧浏览器引起的的问题。放弃表单和老旧浏览器的最大问题是对的支持。结论如你所见，处理老旧浏览器所涉及的内容不止有表单。 系列文章说明 原文 所有的web开发者都会很快（或者很痛苦地）意识到Web是一个粗糙的环境，其中最糟糕的一点就是老旧的浏览器。提到老旧浏览器，我们脑海中往往复现的就是旧版的IE。但...
摘要：提到老旧浏览器，我们脑海中往往复现的就是旧版的。但幸运的是，有一些技巧可以协助解决由老旧浏览器引起的的问题。放弃表单和老旧浏览器的最大问题是对的支持。结论如你所见，处理老旧浏览器所涉及的内容不止有表单。 系列文章说明 原文 所有的web开发者都会很快（或者很痛苦地）意识到Web是一个粗糙的环境，其中最糟糕的一点就是老旧的浏览器。提到老旧浏览器，我们脑海中往往复现的就是旧版的IE。但...
摘要：并非所有组件受的影响都是平等的如今在表单使用时依然有一些困难这些问题可归为三类还好的若存在跨平台问题，一些元素可以只添加少许的样式，有如下几个结构元素此外，还有所有的文本框组件单行或多行，以及按钮。 系列文章说明 原文 本文中，我们将学习如何使用CSS来让HTML表单看起来更漂亮，这可能需要窍门才能做到。由于历史及技术上的原因，表单组件并不太适合使用CSS；而也正因为有这些困难，许...
摘要：并非所有组件受的影响都是平等的如今在表单使用时依然有一些困难这些问题可归为三类还好的若存在跨平台问题，一些元素可以只添加少许的样式，有如下几个结构元素此外，还有所有的文本框组件单行或多行，以及按钮。 系列文章说明 原文 本文中，我们将学习如何使用CSS来让HTML表单看起来更漂亮，这可能需要窍门才能做到。由于历史及技术上的原因，表单组件并不太适合使用CSS；而也正因为有这些困难，许...
摘要：这个方法论在内容和容器之间有着明显的区分。这是通过把命名为表示其角色的类名。通过使用这种扁平的命名方式避免了多后代的选择器。 原文链接：A Look at Some CSS methodologies CSS在大型，复杂，快速迭代的系统中难以管理的程度是出了名的。 其中一个原因是CSS缺少内置的作用域管理机制。在CSS中，所有的一切都是全局的，这意味着任何你所做的改变都有可能层叠或者改...
阅读 2136·2023-04-26 00:23
阅读 806·2021-09-08 09:45
阅读 2434·2019-08-28 18:20
阅读 2541·2019-08-26 13:51
阅读 1594·2019-08-26 10:32
阅读 1390·2019-08-26 10:24
阅读 2025·2019-08-26 10:23
阅读 2194·2019-08-23 18:10
