注：学习笔记基于小甲鱼学习视频，官方论坛：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/"></option> <option value="https://www.jianshu.com/">简书</option> </datalist> </body> </html>