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

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

工具/材料

Sublime Text

01

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

02

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

03

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

04

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

05

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

06

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

07

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

08

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

已经有的输入类型

HTML代码示例：

代码如下:

文本域

<input

type="text">

单选按钮

<input

type="radio">

复选框

<input

type="checkbox">

下拉列表

<select><option>

密码域

<input

type="password">

提交按钮

<input

type="submit">

可单击按钮

<input

type="button">

图像按钮

<input

type="image">

隐藏域

<input

type="hidden">

重置按钮

<input

type="reset">

文件域

<input

type="file">

在HTML5中，增加了多个新的表单input输入类型，通过使用这些新增元素，可以实现更好的输入控制和验证。

1、email类型的应用

email类型的input元素是一种专门用于输入E-mail地址的文本输入框，在提交表单的时候，会自动验证email输入框的值。

代码如下:

<input

type="email"

name="user_email"

/>

2、url类型的应用

url类型的input元素提供用于输入url地址这类特殊文本的文本框。

代码如下:

<input

type="url"

name="user_url"

/>

3、number类型的应用

number类型的input元素提供用于输入数值的文本框。

代码如下:

<input

type="number"

name="number1"

min="1"

max="20"

step="4"

/>

4、range类型的应用

range类型的input元素提供用于输入包含一定范围内数字值得文本框，在网页中显示为滚动条。

代码如下:

<input

type="range"

name="range1"

min="1"

max="30"

/>

5、日期检出类型的应用

输入类型

HTML代码

功能说明

代码如下:

date

<input

type="date">

选取日、月、年

month

<input

type="month">

选取月、年

代码如下:

week

<input

type="week">

选取周和年

代码如下:

time

<input

type="time">

选取时间（小时和分钟）

代码如下:

datetime

<input

type="datetime">

选取时间、日、月、年（UTC时间）

代码如下:

datetime-local

<input

type="datetime-local">

选取时间、日、月、年（本地时间）

6、search类型的应用

search类型的input元素提供用于输入搜索关键词的文本框。

代码如下:

<input

type="search"

name="search1"

/>

input[type="search"]{

-webkit-appearance:textfield

}

7、tel类型的应用

tel类型的input元素提供专门用于输入电话号码的文本框。

代码如下:

<input

type="tel"

name="tel"

/>

8、color类型的应用

color类型的input元素提供专门用于设置颜色的文本框。

代码如下:

<input

type="color"

name="color"

/>

---