零基础学习HTML(20)——input标签（四）

最新推荐文章于 2024-07-17 22:23:53 发布

Dragon水魅

最新推荐文章于 2024-07-17 22:23:53 发布

阅读量409

点赞数

分类专栏：零基础学习Web开发

本文链接：https://blog.csdn.net/qq_43650934/article/details/108897745

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

本文介绍了HTML5中input标签的多种类型及其在表单验证中的应用，如number限制数字输入，min、max和step设置输入范围和步长，range创建数值滚动条，以及email、tel、url属性用于输入邮箱、电话和网址。同时，通过pattern属性实现正则表达式匹配，加强了表单数据的校验功能。

摘要由CSDN通过智能技术生成

注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

可以通过设置 input 标签的 number 设置限制数字输入：

<!DOCTYPE html>
<html>
<head>
    <title>第二十节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="POST" enctype="multipart/form-data">
        <!-- input 限制数字输入 -->
        <label>输入年龄：<input type="number" name="age"></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>

在这里插入图片描述
可以通过设置 input 标签的 min 、max 和 step 显示数字输入范围和步长：

<!DOCTYPE html>
<html>
<head>
    <title>第二十节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="POST" enctype="multipart/form-data">
        <!-- input 限制数字输入范围和步长 -->
        <label>输入年龄：<input type="number" name="age" min="1" max="100" step="1"></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>

在这里插入图片描述
可以通过设置 input 标签的 range 属性设置数值滚动条：

<!DOCTYPE html>
<html>
<head>
    <title>第二十节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="POST" enctype="multipart/form-data">
        <!-- input 实现数值滚动条 -->
        <label>来个滚动条：<input type="range" name="love" min="1" max="100" step="1"></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>

在这里插入图片描述
可以通过 input 标签的 email 、tel 、url 属性设置邮箱、电话和网址：

<!DOCTYPE html>
<html>
<head>
    <title>第二十节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="POST" enctype="multipart/form-data">
        <!-- input 获取邮箱、电话和地址 -->
        <label>邮箱：<input type="email" name="email"></label>
        <br><br>
        <label>电话：<input type="tel" name="tel"></label>
        <br><br>
        <label>网址：<input type="url" name="url"></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>

在这里插入图片描述
可以使用 input 标签的 pattern 属性进行正则表达式匹配：

<!DOCTYPE html>
<html>
<head>
    <title>第二十节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="POST" enctype="multipart/form-data">
        <!-- input 获取邮箱、电话和地址 -->
        <label>邮箱：<input type="email" name="email" pattern="\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}"></label>
        <br><br>
        <label>电话：<input type="tel" name="tel" pattern="0?(13|14|15|17|18|19)[0-9]{9}"></label>
        <br><br>
        <label>网址：<input type="url" name="url" pattern="^((https|http)?:\/\/)[^\s]+"></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>