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

Dragon水魅

发布于 2026-01-23 14:45:10

750

注：学习笔记基于小甲鱼学习视频，官方论坛：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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-01-23，如有侵权请联系 cloudcommunity@tencent.com 删除

input