16.HTML 表单提交

现代web开发中，表单是用户与网站互动的重要方式之一。HTML5为表单提交提供了强大的功能和丰富的输入类型，让收集和验证用户输入数据变得更加容易和安全。本文将详细介绍HTML5表单的各个方面，包括基本结构、输入类型、验证方法和提交过程。

基本结构

HTML表单由<form>标签定义，它可以包含输入字段、标签、按钮等元素。一个基本的表单结构如下所示：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">电子邮箱：</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="提交">
</form>

在这个例子中，表单有两个输入字段：姓名和电子邮箱。每个输入字段都有一个<label>标签，这不仅有助于用户理解输入的内容，也有助于屏幕阅读器等辅助技术。<form>标签的action属性定义了数据提交到服务器的URL，method属性定义了提交数据的HTTP方法（通常是post或get）。

输入类型

HTML5提供了多种输入类型，以支持不同的数据格式和设备。

文本输入

<!-- 单行文本 -->
<input type="text" name="username" placeholder="请输入用户名" required>

<!-- 密码 -->
<input type="password" name="password" required minlength="8">

<!-- 邮箱 -->
<input type="email" name="email" required placeholder="example@domain.com">

<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">

数值输入

<!-- 数值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑动条 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 电话号码 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和时间输入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 时间 -->
<input type="time" name="appointmenttime">

<!-- 日期和时间 -->
<input type="datetime-local" name="appointmentdatetime">

选择输入

<!-- 复选框 -->
<label><input type="checkbox" name="interest" value="coding"> 编程</label>
<label><input type="checkbox" name="interest" value="music"> 音乐</label>

<!-- 单选按钮 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<!-- 下拉选择 -->
<select name="country" required>
  <option value="china">中国</option>
  <option value="usa">美国</option>
</select>

特殊输入

<!-- 颜色选择器 -->
<input type="color" name="favcolor" value="#ff0000">

<!-- 文件上传 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

验证方法

HTML5表单提供了内置的验证功能，可以在数据提交到服务器之前进行检查。

必填字段

<input type="text" name="username" required>

正则表达式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="请输入5位数的邮政编码">

数值范围

<input type="number" name="age" min="18" max="99">

长度限制

<input type="text" name="username" minlength="4" maxlength="8">

表单提交

当用户填写完表单并点击提交按钮时，浏览器会自动检查所有输入字段的有效性。如果所有字段都满足要求，表单数据将被发送到服务器。否则，浏览器会显示错误信息，并阻止表单提交。

<input type="submit" value="提交">

可以使用JavaScript来自定义验证或处理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 检查表单数据
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表单提交
    // 自定义错误处理
  }
  // 可以在这里添加额外的逻辑，比如发送数据到服务器的Ajax请求
});

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交并显示JSON</title>
</head>
<body>

<!-- 表单定义 -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>

  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email">
  <br>

  <input type="button" value="提交" onclick="submitForm()">
</form>

<script>
// JavaScript函数，处理表单提交
function submitForm() {
  // 获取表单元素
  var form = document.getElementById('myForm');
  
  // 创建一个FormData对象
  var formData = new FormData(form);
  
  // 创建一个空对象来存储表单数据
  var formObject = {};
  
  // 将FormData转换为普通对象
  formData.forEach(function(value, key){
    formObject[key] = value;
  });
  
  // 将对象转换为JSON字符串
  var jsonString = JSON.stringify(formObject);
  
  // 弹出包含JSON字符串的对话框
  alert(jsonString);
  
  // 阻止表单的默认提交行为
  return false;
}
</script>

</body>
</html>

在这个例子中：

我们定义了一个包含姓名和电子邮件输入字段的表单，以及一个按钮，当点击按钮时会调用submitForm函数。
在submitForm函数中，我们首先获取表单元素并创建一个FormData对象。然后，我们遍历FormData对象，将表单数据复制到一个普通的JavaScript对象formObject中。
接着，我们使用JSON.stringify方法将formObject转换成JSON字符串。
最后，我们使用alert函数弹出一个包含JSON字符串的对话框。

注意，这个例子中我们使用了type="button"而不是type="submit"，因为我们不希望表单有默认的提交行为。我们的JavaScript函数submitForm会处理所有的逻辑，并且通过返回false来阻止默认的表单提交。如果你想要使用type="submit"，你需要在<form>标签上添加一个onsubmit="return submitForm()"属性来代替按钮上的onclick事件。

结论

HTML5的表单功能为开发者提供了强大的工具，以便创建功能丰富、用户友好且安全的网站。通过使用HTML5的输入类型和验证方法，可以确保用户输入的数据是有效的，同时提高用户体验。随着技术的不断进步，HTML5表单和相关API将继续发展，为前端工程师提供更多的可能性。

据W3C网页规范化设计要求，网页应该遵循结构（Structure）、表现（Presentation）和行为（Behavior）的分离。这3种技术简单说明如下。

结构：使用HTML、XHTML或者XML语言规范设计的网页标签代码，即网页的结构和内容。
表现：使用CSS语言规范设计的网页样式代码，即网页显示效果（或称呈现效果）。
行为：使用JavaScript语言和DOM规范设计的网页脚本代码，即网页特效、动画或者互动行为。

在深入网页设计之前，初学者应该先掌握HTML语言，能够熟练使用HTML标签。这对于大部分初学者来说，通过认真阅读本章知识，能够初步达成这个目标。同时纠正初学者不规范的操作习惯，养成良好的、符合标准的手写代码习惯。

HTML

HTML是目前在网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文档是由HTML标签组成的描述性文本，HTML标签可以标识文字、图形、动画、声音、表格、链接等。

HTML与XHTML

HTML是Hypertext Markup Language的缩写，中文翻译为超文本标识语言。使用HTML标签编写的文档称为HTML文档，目前最新版本是HTML 5.0，使用最广泛的是HTML 4.1版本。

早期版本的HTML语言不适合构建标准化网页，因为它把结构和表现混淆在一起，例如， HTML把不同类型的元素，如描述性元素color、i等和结构性元素div、table等，以及元素属性放在一起，为以后的维护和管理埋下隐患。

XHTML是The Extensible HyperText Markup Language的缩写，中文翻译为可扩展标识语言，实际上它是HTML语言的升级版本，目前遵循的是W3C于2000年1月推荐的XHTML 1.0（参考http://www.w1.org/TR/xhtml1）。XHTML和HTML在语法和标签使用方面差别不大。熟悉HTML语言，再稍加熟悉标准结构和规范，也就熟悉了XHTML语言。XHTML具有如下特点：

　用户可以扩展元素，从而扩展功能，但在目前1.0版本下，用户只能够使用固定的预定义元素，这些元素基本上与HTML 4版本元素相同，但删除了部分属性描述性的元素。

　能够与HTML很好地沟通，可以兼容当前不同的网页浏览器，实现XHTML页面的正确浏览。

HTML语言作用

HTML作为一种网页内容标识语言，易学易懂，熟悉使用该语言可以制作功能强大、美观大方的网页。HTML语言的主要作用说明如下：

使用HTMl语言标识文本。
使用HTML语言建立超链接，通过超链接可以访问互联网上的所有信息，当使用鼠标单击超链接时，会自动跳转到链接页面。
使用HTML语言创建列表，把信息有序地组织在一起，以方便浏览。
使用HTMl语言在网页中显示图像、声音、视频、动画等多媒体信息，把网页设计得更富冲击力。
使用HTML语言可以制作表格，以方便显示大量数据。
使用HTML语言制作表单，允许在网页内输入文本信息，执行其他用户操作，方便信息互动。

HTML文档基本结构

HTML文档一般都应包含两部分：头部区域和主体区域。HTML文档基本结构由3个标签负责组织：<html>、<head>和<body>。其中<html>标签标识HTML文档，<head>标签标识头部区域，而<body>标签标识主体区域。

Query File Upload是一个开源（MIT协议）的文件上传插件。支持文件上传、多文件选择窗口、拖拽上传，提供进度条、验证和预览图像、音频、视频的功能。支持跨域、分块和可暂停的文件上传及客户端图像调整。适用于任何服务器端平台（PHP、Python、Ruby on Rails、Java、Node.js、Go etc等），支持标准的HTML表单文件上传。

1、下载及初始化

https://github.com/blueimp/jQuery-File-Upload

下载插件解压放到项目任意位置，在页面中引入文件上传依赖jQuery、jQuery UI widget factory（如果已引入jQuery UI则不用引入）、jQuery Iframe Transport plugin（支持XHR文件上传的插件），除此之外还有可选插件，如Bootstrap、JavaScript Load Image library等。

然后在body中创建一个文件类型的input元素，设置id、name、data-url属性。

最后写入如下代码，运行脚本，一个最简单的文件上传就完成了。

2、产品特点

多文件上传

可以同时选择多个文件并上传。

支持拖拽

允许拖拽上传文件，从你的桌面拖拽或文件管理，把他们拖到你的浏览器窗口。

可撤销上传

可以取消停止上传单个文件上传。

可恢复上传

可以恢复单个文件上传。

分块上传

大文件支持分成多个小块上传。

客户端图像调整

图片在客户端可以自动调整大小。

预览图像、音频和视频

支持图像、音频和视频文件预览。

不需要浏览器插件(例如Adobe Flash)

jQuery File Upload是基于开放标准的HTML5和JavaScript实现的，不需要任何浏览器插件。

HTML表单文件上传

允许通过使用一个标准的HTML文件上传表单部件元素。

跨域文件上传

支持上传文件到另一个域和跨站点。

可定制和扩展

提供了一个API来设置各个选项，为各种上传事件定义回调方法。

兼容任何服务器端应用程序平台

适用于任何服务器端平台（PHP、Python、Ruby on Rails、Java、Node.js、Go etc）

桌面浏览器兼容：

Google Chrome
Apple Safari 4.0+
Mozilla Firefox 3.0+
Opera 11.0+
Microsoft Internet Explorer 6.0+

移动端浏览器兼容：

Apple Safari on iOS 6.0+
Google Chrome on iOS 6.0+
Google Chrome on Android 4.0+
Default Browser on Android 2.3+
Opera Mobile 12.0+

详情前往官网查看：

https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

有哪里写得不好的地方请大家提出来，请轻喷，谢谢。同时有什么与编程相关的好东西可以推举给我，再次感谢！

在线咨询

上一篇：三个“首次”提前泄露白鹭引擎领跑HTML5行业
下一篇：一行代码实现网页全自动翻译

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商