41.HTML5 表单增强

TML5 为前端开发者带来了许多表单增强功能，这些功能使得创建交互式和用户友好的表单变得更加容易。在本文中，我们将介绍几种 HTML5 新增的表单功能，并提供完整的 HTML 示例，以帮助你了解如何在实际项目中应用这些功能。

1. 新的输入类型

HTML5 引入了一系列新的 input 类型，以支持更多种类的数据输入，比如电子邮件、日期等。

例子：电子邮件和网址输入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电子邮件和网址输入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            padding: 20px; /* 页面内边距 */
        }

        form {
            max-width: 400px; /* 表单最大宽度 */
            margin: 0 auto; /* 居中显示 */
            padding: 20px; /* 表单内边距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 5px; /* 边框圆角 */
            background-color: #f9f9f9; /* 背景颜色 */
        }

        label {
            display: block; /* 使标签独占一行 */
            margin-bottom: 5px; /* 标签下方间距 */
            font-weight: bold; /* 字体加粗 */
        }

        input[type="email"],
        input[type="url"] {
            width: 100%; /* 输入框宽度 */
            padding: 8px; /* 内边距 */
            margin-bottom: 20px; /* 与下一个元素的间距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 4px; /* 边框圆角 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 边框圆角 */
            cursor: pointer; /* 鼠标样式 */
            font-size: 16px; /* 字体大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>
<body>

<form>
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required>

    <label for="url">个人网站:</label>
    <input type="url" id="url" name="url">

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

</body>
</html>

在这个示例中，我们使用了 type="email" 和 type="url" 来要求用户输入有效的电子邮件地址和网址。如果用户输入的不符合格式，浏览器会在提交表单前显示一个警告。

2. 占位符属性

placeholder 属性允许我们在输入字段中设置一个提示文本，当输入字段为空时显示，一旦开始输入，提示文本就会消失。

例子：带占位符的输入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>带占位符的输入框示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            padding: 20px; /* 页面内边距 */
        }

        form {
            max-width: 300px; /* 表单最大宽度 */
            margin: 0 auto; /* 居中显示 */
            padding: 20px; /* 表单内边距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 5px; /* 边框圆角 */
            background-color: #f9f9f9; /* 背景颜色 */
        }

        label {
            display: block; /* 使标签独占一行 */
            margin-bottom: 10px; /* 标签下方间距 */
            font-weight: bold; /* 字体加粗 */
        }

        input[type="search"] {
            width: calc(100% - 22px); /* 输入框宽度，减去内边距和边框的宽度 */
            padding: 10px; /* 内边距 */
            margin-bottom: 20px; /* 与下一个元素的间距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 4px; /* 边框圆角 */
            box-sizing: border-box; /* 盒子模型，使宽度包含边框和内边距 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 边框圆角 */
            cursor: pointer; /* 鼠标样式 */
            font-size: 16px; /* 字体大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>
<body>

<form>
    <label for="search">搜索:</label>
    <input type="search" id="search" name="search" placeholder="请输入搜索关键字">

    <input type="submit" value="搜索">
</form>

</body>
</html>

这里的 placeholder="请输入搜索关键字" 就是一个占位符，它会在用户输入之前显示在搜索框中。

3. 自动聚焦属性

autofocus 属性可以让页面加载时自动将焦点放到某个表单元素上。

例子：自动聚焦的输入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动聚焦的输入框示例</title>
</head>
<body>

<form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" autofocus>

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

</body>
</html>

在这个示例中，当页面加载完成后，姓名输入框将自动获得焦点。

4. 表单验证

HTML5 为表单验证提供了内置支持，通过简单的属性如 required、min、max 和 pattern 等，可以在不使用 JavaScript 的情况下进行基本的验证。

例子：表单验证

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单验证示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* 包括边框和内边距在内的宽度 */
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }
    </style>
</head>
<body>

<form>
    <label for="age">年龄:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>

    <label for="zipcode">邮编:</label>
    <input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="请输入5位数字的邮编" required>

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

</body>
</html>

在这个示例中，年龄字段要求用户输入一个介于 18 到 99 之间的数字，而邮编字段要求用户输入一个符合特定模式（5位数字）的文本。

结语

HTML5 的表单增强功能大大简化了表单处理和验证的工作，使得开发更加高效，同时也提高了用户体验。通过上述示例，我们可以看到，利用 HTML5 的新特性，可以创建功能强大且易于使用的表单。随着技术的不断进步，我们作为开发者应该不断学习和实践，以便更好地利用这些新工具来构建更好的网页。

小白，你最近看CSS的时候碰到position属性了么？"

“碰到了，通过position可以改变容器的定位，我记得官方描述是这样的：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。”

“恩，不错，今天咱说一下position里面的fixed类型吧，这个属性值是让容器基于浏览器窗口的绝对定位，在我们平时的制作中经常会碰到。”

老朱接着说：“给一个容器设定position为fixed以后，可以通过left、right、bottom、top进行四个方向的距离定位。现在我们在页面中写一个fixed容器，看一下代码片段。”

“你看，这里我在body里面加了一个标识为foot的div，然后他的css里面把position设置成了fixed，并且bottom（距离底部）为0，这里的bottom是基于浏览器窗口的距离进行计算的，foot的宽和高也进行了设定。现在我们看一下效果！”

“你可以看到，拖动滚动条往下滚动网页的时候，foot的位置并不会随着滚动条的滚动发生改变，它就像是漂浮在那里一样。这里的foot是一个div容器，所以它的内部我们还可以放任何你希望布局的内容，比如放一个图片，或者其他的容器。”

“这里插入的图片要想跟foot容器宽度一致，根据我们之前说过的对图片css的操作，把图片的宽度（width）设定为100%，图片就会自动与父容器宽度一致了。”

小白突然想到了很多手机HTML5页面下方都有导航条，问道：“很多手机的HTML5页面里面下方的导航条不会随着页面的滚动而滚动，这种导航条是不是也通过fixed来设定的。”

“是的，跟这里的foot一样，我们只需要把导航条的父容器设定为fixed就可以了。有个需要注意的地方是导航条会根据手机屏幕的分辨率自动占用屏幕宽度，所以我们在给foot设定css样式的时候就不能设定宽度了。”

小白问道：“那应该怎么设定呢？”

老朱说：“你忘了我们刚说了fiex可以通过top、right、bottom、left设定四个方向的距离么？如果要让一个fixed容器左右靠边，我们只需要left为0，right为0，它就会自动匹配窗口的宽度。现在我们把之前的foot容器改一下。”

“通过设定bottom、left、right可以让foot靠近底部并且保持与窗口宽度一致。然后我们在foot里面放了一个ul-li容器，让li容器向左浮动并且宽度为父容器的25%，布局就会变成这样。”

“网页上的底部导航通常都会放入透明的png图片，现在我们插入png图，再进行一下css的调整。”

“网页底部导航条，上面还会牵扯到鼠标事件，焦点样式变化，这些知识我们随后也会一一展开讨论，今天先这样吧！你先练习练习今天说的这些内容，然后试着做一个居中漂浮的层，看看能不能做出来！”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！

网页设计过程中，我们会经常用到一些HTML5特效代码，下面就是为大家整理分享的一些好看炫酷且实用的HTML5特效代码，可以放心在您的应用程序中使用。

一、Canvas跟随鼠标光标动画特效

演示、下载地址：http://www.php.cn/xiazai/js/845

二、HTML5 Canvas泡泡悬浮鼠标特效

演示、下载地址：http://www.php.cn/xiazai/js/1599

三、HTML5卡通可爱风格网页找不到404错误页面网页模板

演示、下载地址：http://www.php.cn/xiazai/js/2987

四、HTML5-Canvas线条背景动画

演示、下载地址：http://www.php.cn/xiazai/js/2930

五、HTML5-Canvas线条背景动画

演示、下载地址：http://www.php.cn/xiazai/js/2919

六、HTML5-Canvas五彩纸屑飘落动画特效

演示、下载地址：http://www.php.cn/xiazai/js/2917

更多炫酷html5、javascript特效代码，尽在：js特效大全

以上就是html5精选特效代码分享（收藏）的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！

在线咨询

上一篇：一个优秀的 HTML5 视频播放器插件，支持字幕、弹幕、直播
下一篇：CSS自动换行、强制不换行、强制断行、超出显示省略号

您的项目需求

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

整合营销服务商