HTML表单

最近总是想着,是时候给博客搭一个后台了,然而昨天晚上才开始看PHP,大致翻了《PHP从入门到精通》这本书,关于该书内容这里就不做评价(略那啥...)。只是接触到后台之后,才对于表单form标签开始有了一点了解,想想前两天被后台的同学吐槽“为什么一个页面上要套那么多form”,丢脸丢到家了,赶紧学一点点后台(2017-5-18:哈哈)。好了不说废话了,现在总结一下form标签。

<!--more-->

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

1. 标签属性

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

1.1. method

指定表单传递的方式,属性值有post和get两种。这两种方式有很大的区别:使用post方式提交数据,表单数据会作为HTTP请求的一部分发送给服务器(关于HTTP的简单理解,这里是一个链接);使用get方式提交数据,表单数据会添加在action属性值所指定的url地址后面发送到服务器。主要的区别有以下两点:

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

1.2. traget

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

1.3. 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了,对于GETPOST都适用,因此默认情况下不需要设置请求头部;如果需要异步上传图片,需要修改为multipart/form-data

1.4. name

name属性是一个非常重要的表单属性,表明表单的名称,注意name和id的区别:id用来操控CSS和JS,只存在于客户端(即浏览器中);而name是浏览器与服务器通信时所使用的名称(比如数组键值)。两者功能不同,不能混淆。在表单和表单元素中,name是一个不可或缺的属性。

2. 表单元素

form标签只是构成了整个表单的容器,而具体内容则是根据需要在容器中加入不同的表单元素。为了便于理解,我将表单元按功能分成了三类:文本输入,选择框和按钮三大类,当然这只是我个人的理解,其实无关痛痒。

2.1. 文本输入

text,password,textarea,分别对应文本,密码和文本域。其中前两者使用input标签并设置其type属性为对应的值来创建,其内容保存在value中;而textarea则是一个闭合的标签,会解析其中的换行与空格,此外需要注意的是使用innerHTML可以在文本框中看见其内容,但是表单提交时输入的内容保存在value中而非innerHTML;

2.2. 选择框

checkboxradioselect,分别对应复选框,单选框和下拉菜单。前两者也是使用input标签并设置其type属性为对应的值来创建。而select是下拉菜单容器,下拉选项由options标签创建。选择框有一个比较重要的属性checked(或selected),表示选择的状态,用于判断是否已被选中。

2.3. 按钮

filebuttonsubmithidden,分别对应文件上传,普通按钮,提交按钮和隐藏按钮;其中文件上传按钮又有accept等多个属性,这里不做详细介绍,hidden在页面上不会显示,主要的作用是用来收集某些数据;而submit作为整个表单的提交,应当放在整个表单的末尾。

2.4. 注意事项

表单元素最重要的属性,大概就是name和value了,前者作为服务器处理程序的数组键名,后者作为该数组某键对应值,承担着打包和整理整个表单数据的作用。其中有一些需要注意的小细节(虽然用处不大):

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

3. 其他

3.1. 样式定制

此外,默认的表单元素样式都比较朴素(比如单复选框),网上有很多利用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还专门增强了表单选择器的选项,这里就不展开了。

3.2. 表单事件

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

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

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

初识正则表达式HTML5自定义属性