HTML简单的示例--输入框空时错误提醒

最新推荐文章于 2026-06-23 15:39:54 发布

原创最新推荐文章于 2026-06-23 15:39:54 发布 · 4.8k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

HTML

当前文章被收录于：

HTML

13 篇文章 0 人学习

订阅专栏查看详情

css

当前文章被收录于：

css

6 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一个简单的HTML页面，该页面包含一个输入框和提交按钮。当用户尝试提交空的输入框时，浏览器将显示错误信息，以确保所有必填字段都已填写。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>输入框为空时错误提醒</title>
  <style type="text/css">
   #a{
    text-align: center;
    margin-left: 400px;
    margin-top: 80px;
    border: #4CAF50 30px groove;
    padding-top: 10px;
    width: 600PX;
   }
  </style>
 </head>
 <body>
  <div id="a">
   <form action="hello.html" method="get">
    <input type="text" name="fname" required="required"/>
    <input type="submit" value="提交" />
   </form>
   <h5> 点击提交，如果输入框为空，浏览器会提示错误信息</h5>
  </div>
  
 </body>
</html>

空的时候：

在这里插入图片描述
输入后：