如何用HTML5存储用户输入的信息

我们平时进行网页开发的时候，经常使用数据库存储用户输入的信息。但是数据库安装配置比较复杂，对于一些简单的需求并不适合。下面小编就给大家分享用HTML5快速存储信息的方法。

工具/材料

SublimeText

操作方法

首先打开Sublime Text软件，在HTML界面中我们用HTML5语言布局一些输入框供用户输入信息，如下图所示

接下来我们在编写查找用户输入信息的界面，如下图所示，只需要一个输入框和一个按钮即可

然后我们在script标签中获取用户输入的信息，并且通过localStorage对象进行本地存储，如下图所示

下面实现信息查找的功能编写，这里主要是通过localStorage的getItem方法进行信息获取的，如下图所示

然后我们通过列表的形式将HTML5存储的信息都展示出来，如下图所示

接下来我们运行页面程序，在输入框里面输入你要添加的数据，这里简单的输入一些测试数据，然后点击新增记录按钮即可，如下图所示

当我们新增记录以后，就会在列表中看到我们增加的信息了，它是以键值对的形式存储的，如下图所示

最后在查找输入框里面我们输入键就会得到相应的值，如下图所示

html5用户注册信息提交在什么位置

怎么用html5新增元素制作用户注册页面？这个示例告诉你！

表单数据提交是网站中比较常见的用户交互行为，在html页面中常见的是注册表单，提交数据前，会检查表单数据的完整性，是否出现漏填、误填）。如果出现漏填、误填会提示用户提示用户，确保填写数据准确有效。在检查表单数据数据一般都是使用php或者JavaScript，今天为大家介绍怎么使用html5新增元素制作用户注册页面并进行检查的数据检查。

html5代码如下:

页面运行结果

分析

1、H5中的fieldset标签

fieldset标签用于表单中的元素组合起来，标签会在相关表单元素周围绘制边框，大部分浏览器支持这个标签，本实例中fieldset标签把表单中所有的元素都包裹起来。

2、input标签

input标签用户信息，type有不同的值，输入字段有很多形式。比如说文本字段、复选框、按钮（单选、复选），input不是html5新增的元素，html4也可以支持iuput标签。只是h5新增加了一些新的input属性，比如说本例中的required属性，它告诉用户输入字段的值是必需的，不能为空，input的placeholder属性用于帮助用户填写输入字段的提示。input标签的list属性，表示输入字段的预定义选项的 datalist 。

3、output标签

output是h5中的新标签，它定义不同类型的输出。onforminput是input标签的属性，h5支持onforminput属性，它表示户输入时运行的脚本。本例中是用户输入时运行“value=range1.value”。

4、datalist标签

datelist定义选项列表，和input元素配合使用，input 元素的 list 属性来绑定 datalist标签，不能单独使用。本例中的datelist标签是提示输入的个人主页的示例列表。注意的是ie不支持datelist标签这一点是需要注意的。

5、label标签

label标签不会向用户呈现任何效果，如果在 label 元素内点击文本，会触发控件。它不是h5中的新标签。

关于“html5新增元素制作用户注册页面”先聊到这。每天学习一个知识点，每日寄语”每一个成功者都有一个开始。勇于开始，才能找到成功的路。”如转载请标注出处。