HTML表单

发布于 2016-07-13 00:07:05| 分类于 前端/HTML

最近总是想着，是时候给博客搭一个后台了，然而昨天晚上才开始看PHP，大致翻了《PHP从入门到精通》这本书，关于该书内容这里就不做评价（略那啥...）。

只是接触到后台之后，才对于表单form标签开始有了一点了解，想想前两天被后台的同学吐槽“为什么一个页面上要套那么多form”，丢脸丢到家了，赶紧学一点点后台（2017-5-18：哈哈）。

好了不说废话了，现在总结一下form标签。

form标签主要用于接收用户的不同类型的输入或选择，并在提交表单时向服务器传输数据，接下来主要从HTML的form标签属性和HTML表单元素两方面说起;

标签属性

form是一个块状元素，没有内外边距和边框，甚至没有任何其他默认样式，除了独有的属性之外跟一个普通的div元素没有什么区别。 Action：属性值为一个url路径，表示整个表单打包的数据发送到的目标地址，一般指向一个后台处理程序文件（比如xx.php），然后再处理程序中通过函数或变量获取表单数据内容。

method

指定表单传递的方式，属性值有post和get两种。这两种方式有很大的区别：

• 使用post方式提交数据，表单数据会作为HTTP请求的一部分发送给服务器（关于HTTP的简单理解，这里是一个链接）
• 使用get方式提交数据，表单数据会添加在action属性值所指定的url地址后面发送到服务器。

主要的区别有以下两点：

• 由于url长度的限制，因此使用get方式传输的数据量一般比较小，而post则没有这个限制；
• 使用get方式传递的参数附在url后，存在安全隐患。

traget

与a标签的target属性一致，表示点击提交按钮之后打开新窗口的方式。

entctype

指定表单数据编码方式，编码过程是在数据发送到服务器之前进行的。表单中的enctype属性有：

• application/x-www-form-urlencoded：窗体数据被编码为名称/值对。这是标准的编码格式，
  • get请求时该编码格式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割；
  • post请求时该编码格式会把form数据封装到请求报文主体中，然后发送到服务器
  • 如果没有input[type=file]则使用x-www-form-urlencoded就够了。
• multipart/form-data：如果存在input[type=file]，则需要使用form-data编码格式，窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。

实际上用的最多的就是application/x-www-form-urlencoded了，对于GET和POST都适用，因此默认情况下不需要设置请求头部；如果需要异步上传图片，需要修改为multipart/form-data。

name

name属性是一个非常重要的表单属性，表明表单的名称，注意name和id的区别：

• id用来操控CSS和JS，只存在于客户端（即浏览器中）；
• 而name是浏览器与服务器通信时所使用的名称（比如数组键值）。

两者功能不同，不能混淆。在表单和表单元素中，name是一个不可或缺的属性。

表单元素

form标签只是构成了整个表单的容器，而具体内容则是根据需要在容器中加入不同的表单元素。

为了便于理解，我将表单元按功能分成了三类：文本输入，选择框和按钮三大类，当然这只是我个人的理解，其实无关痛痒。

文本输入

有text,password,textarea，分别对应文本，密码和文本域。

其中前两者使用input标签并设置其type属性为对应的值来创建，其内容保存在value中；

而textarea则是一个闭合的标签，会解析其中的换行与空格，此外需要注意的是使用innerHTML可以在文本框中看见其内容，但是表单提交时输入的内容保存在value中而非innerHTML；

选择框

有checkbox，radio，select，分别对应复选框，单选框和下拉菜单。

前两者也是使用input标签并设置其type属性为对应的值来创建。

而select是下拉菜单容器，下拉选项由options标签创建。

选择框有一个比较重要的属性checked(或selected)，表示选择的状态，用于判断是否已被选中。

按钮

有file，button，submit，hidden，分别对应文件上传，普通按钮，提交按钮和隐藏按钮；

其中文件上传按钮又有accept等多个属性，这里不做详细介绍。

hidden在页面上不会显示，主要的作用是用来收集某些数据；

而submit作为整个表单的提交，应当放在整个表单的末尾。

注意事项

表单元素最重要的属性，大概就是name和value了，前者作为服务器处理程序的数组键名，后者作为该数组某键对应值，承担着打包和整理整个表单数据的作用。

其中有一些需要注意的小细节（虽然用处不大）：

• input标签默认的type是text，但是一般会显示的指定type；
• checkbox默认的value值是on；
• 要使一组radio生效，则必须为他们指定相同的name属性值；

其他

样式定制

此外，默认的表单元素样式都比较朴素（比如单复选框），网上有很多利用CSS美化表单的方式，我的解决思路是使用一个label来美化，然后使用:checked伪类来改变样式。由于CSS是不支持父类选择器的，可以使用+兄弟元素选择器来实现。

.checkbox {
    display: inline-block;
}
.checkbox_item {
    display: none
}
.checkbox_icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: red;
}
.checkbox_item:checked + .checkbox_icon{
    background-color: blue;
}

然后对应的页面结构，使用字体图标来定制对应的选框样式，或者是直接设置checkbox_icon的样式就可以了

<label class="checkbox">
    <input type="checkbox" class="checkbox_item">
    <i class="iconfont checkbox_icon"></i>
</label>

除了checked伪类外之外，jQuery还专门增强了表单选择器的选项，这里就不展开了。

表单事件

表单事件中比较常用的的事件有：

• focus，表示元素获得焦点
• blur，表示元素失去焦点
• change，select元素选项改变时触发，制作联动菜单必备。
• submit，表单提交时触发，多用于表单检测

在前端开发工作中，必不可少的一环就是表单验证，其原理就是在提交表单之前，依次校验表单元素的值是否符合预期规范。

#标签

你要请我喝一杯奶茶？

版权声明：自由转载-非商用-保持署名和原文链接。

本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。