零基础学习HTML(21)——input标签（五）

Dragon水魅

发布于 2026-01-23 14:44:54

1080

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

官方资料

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

学习正文

可以通过 input 的 placeholder 属性设置输入框中的提示信息：

<!DOCTYPE html>
<html>
<head>
    <title>第二十节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="POST" enctype="multipart/form-data">
        <!-- 在输入框中显示提示信息 -->
        <label>邮箱：<input type="email" name="email" pattern="\w[-\w.+]*@(163.com|126.com)" placeholder="仅限163和126邮箱"></label>
        <br><br>
        <label>电话：<input type="tel" name="tel" pattern="0?(13|14|15|17|18|19)[0-9]{9}" placeholder="仅限手机号码"></label>
        <br><br>
        <label>网址：<input type="url" name="url" pattern="^((https|http)?:\/\/)[^\s]+" placeholder="仅限https和http开头的网址"></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>

可以通过 input 标签的 required 属性设置为输入框必填：

<!DOCTYPE html>
<html>
<head>
    <title>第二十节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="POST" enctype="multipart/form-data">
        <!-- 指定输入框为必填 -->
        <label>邮箱：<input type="email" name="email" pattern="\w[-\w.+]*@(163.com|126.com)" placeholder="仅限163和126邮箱" required></label>
        <br><br>
        <label>电话：<input type="tel" name="tel" pattern="0?(13|14|15|17|18|19)[0-9]{9}" placeholder="仅限手机号码" required></label>
        <br><br>
        <label>网址：<input type="url" name="url" pattern="^((https|http)?:\/\/)[^\s]+" placeholder="仅限https和http开头的网址" required></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>

可以通过设置 input 标签的 size 属性修改输入框的显示长度：

<!DOCTYPE html>
<html>
<head>
    <title>第二十节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="POST" enctype="multipart/form-data">
        <!-- 修改输入框的显示长度 -->
        <label>邮箱：<input type="email" name="email" pattern="\w[-\w.+]*@(163.com|126.com)" placeholder="仅限163和126邮箱" required></label>
        <br><br>
        <label>电话：<input type="tel" name="tel" pattern="0?(13|14|15|17|18|19)[0-9]{9}" placeholder="仅限手机号码" required></label>
        <br><br>
        <label>网址：<input type="url" name="url" pattern="^((https|http)?:\/\/)[^\s]+" placeholder="仅限https和http开头的网址" required size="30"></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>

可以通过设置 input 标签的 maxlength 属性限制最大字符输入数：

<!DOCTYPE html>
<html>
<head>
    <title>第二十节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="POST" enctype="multipart/form-data">
        <!-- 限制最大字符输入数 -->
        <label>邮箱：<input type="email" name="email" pattern="\w[-\w.+]*@(163.com|126.com)" placeholder="仅限163和126邮箱" required></label>
        <br><br>
        <label>电话：<input type="tel" name="tel" pattern="0?(13|14|15|17|18|19)[0-9]{9}" placeholder="仅限手机号码" required></label>
        <br><br>
        <label>网址：<input type="url" name="url" pattern="^((https|http)?:\/\/)[^\s]+" placeholder="仅限https和http开头的网址" required size="30" maxlength="22"></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>

可以通过 datalist 设置输入框中的数据列表：

<!DOCTYPE html>
<html>
<head>
    <title>第二十节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="POST" enctype="multipart/form-data">
        <!-- 在输入框中指定数据列表 -->
        <label>邮箱：<input type="email" name="email" pattern="\w[-\w.+]*@(163.com|126.com)" placeholder="仅限163和126邮箱" required></label>
        <br><br>
        <label>电话：<input type="tel" name="tel" pattern="0?(13|14|15|17|18|19)[0-9]{9}" placeholder="仅限手机号码" required></label>
        <br><br>
        <label>网址：<input type="url" name="url" pattern="^((https|http)?:\/\/)[^\s]+" placeholder="仅限https和http开头的网址" required size="30" maxlength="22" list="urllist"></label>
        <br><br>
        <input type="submit" value="提交">
    </form>
    
    <datalist id="urllist">
        <option value="https://www.baidu.com/">百度</option>
        <option value="https://www.csdn.net/">CSDN</option>
        <option value="https://www.jianshu.com/">简书</option>
    </datalist>
</body>
</html>