HTML-8-表单初级验证

最新推荐文章于 2024-09-20 13:42:43 发布
最新推荐文章于 2024-09-20 13:42:43 发布
阅读量89 收藏
点赞数
分类专栏： # HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38126306/article/details/110287161
版权

HTML -> 表单初级验证

  • placeholder 提示信息
  • required：非空判断
  • pattern 正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method:post/get 提交方式
        get:可以在url中看到提交的信息,不安全，但效率高
        post:比较安全，传输大文件，
-->
<form action="1.我的第一个网页.html" method="get">

    <!--<input type="text">文本输入框
        value:默认初识值
        maxlenth:最大能输入的字符数
        size:文本框的长度
    -->
    <p>姓名:<input type="text" name="username" placeholder="请输入用户名" required></p>

    <!--<input type="password">密码输入框-->
    <p>密码:<input type="password" name="pwd"></p>

    <!--单选框标签
    <input type="radio" value="boy" name="sex"/>
        value:单选框的值
        name:组 （防止多选）
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <!--多选框
    <input type="checkbox">
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏

    </p>
    <!--按钮
    input type="button"  普通按钮
    input type="image"   图像按钮
    input type="submit"  提交按钮
    input type="reset"   重置
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击">
        <!--图片按钮，和submit效果一样-->
        <input type="image" src="../resources/image/babe.jpg" width="200" height="200">
    </p>

    <!--下拉框 列表框
    -->
    <p>国家:
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="US">美国</option>
            <option value="Korea">韩国</option>
            <option value="Switzerland" selected>瑞士</option>
            <option value="India">印度</option>
        </select>
    </p>

    <!--文本域
    cols="10" rows="10"
    -->
    <p>反馈：
        <textarea name="textarea" cols="10" rows="10">文本内容</textarea>
    </p>

    <!--文件域
    <input type="file" name="files">
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!--邮件验证-->
    <p>邮箱:
        <input type="email" name="email" required>
    </p>

    <!--url验证-->
    <p>URL
        <input type="url" name="url" required>
    </p>

    <!--数字验证-->
    <p>商品数量
        <input type="number" name="num" max="100" min="0" step="1" required>
    </p>

    <!--滑块-->
    <p>音量
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>

    <!--搜索框-->
    <p>搜索
        <input type="search" name="search" >
    </p>

    <!--增强鼠标可用性-->
    <p>
        <label for="mark">点我试试</label>
        <input type="text" id="mark">
    </p>

    <p>自定义邮箱:
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

</form>
</body>
</html>
西西ANO
关注
专栏目录
HTML5-表单的应用、初级验证
qq_61727355的博客
08-22 238
点击文本后，对应的输入框获得焦点。通过 for 和 id 属性关联。有三种：placeholder、required、pattern。只是隐藏了框，属性依旧存在，我们可以通过隐藏域传递一些默认值。pleaseholder：提示信息（适用于输入框控件）required：非空校验（不允许元素为空）pattern：正则表达式。1）为什么要进行表单验证？
HTML的表单初级验证
m0_59796797的博客
07-27 127
表单验证： 表单的初级验证： 1.placeholder是指搜索框中灰色的提示语句 <input type="search" name="soso" placeholder="请输入要搜索的关键词"/> 2.required是指本框不得为空。 <input type="text" name="sosol" placeholder="请输入要搜索的关键词" required/> 3.pattern是指验证文本框中用户输入的内容是否与定义的格式相同。 <input type="
html表单的3个初级验证,HTML-表单
weixin_39597318的博客
06-17 133
表单主要用来制作动态网页，方便和用户进行交互常用的表单元素：文本框(text)密码框(password)单选按钮(radio)复选框(checkbox)列表框(和)按钮(button、submit和reset)邮箱()网址()数字()滑块()搜索()表单语法： 名字： 密码： 密码框：单选按钮：男女复选框：运动聊天玩游戏列表框：……图片按钮：重置按钮：提交按钮：普通按钮：多行文本域：文本...
HTML---表单验证
zhoutong2323的博客
03-01 1512
前端中的表单验证是在用户提交表单之前，对用户输入的数据进行合法性检查的过程。这种验证的目的是确保用户输入的数据符合预期的要求，从而减少错误和无效的数据提交，提高数据的质量和准确性。输入类型的验证：检查用户输入的数据是否符合预期的输入类型，如文本、数字、邮箱、密码等。必填字段的验证：确保用户必须填写某些字段，这些字段通常是表单中的关键信息。日期和时间范围的验证：检查用户输入的日期或时间是否在允许的范围内。步长的验证：对于某些需要递增或递减的输入字段，如价格、评分等，验证其步长是否符合要求。
HTML5-表单初级验证
Wjiahui的博客
02-01 625
HTML5-表单初级验证 及总结
html-表单初级验证
qq_38959934的博客
06-10 85
<!-- placeholder 输入框 提示信息 required 非空判断 pattern 正则表达式 --> <p>名字: <input type="text" name="username1" placeholder="请输入名字" required></p> <!-- pattern 正则表达式 常用正则表达式 https://www.j.
html表单的3个初级验证,表单
weixin_39596739的博客
07-04 397
1.表单的语法form表单能够获取用户的输入的内容、选择、上传文件全部发送给后端。 名字： 密码：action：控制数据提交的目的地不写的情况下，默认提交到当前页面所在的路径。只写路径后缀，后面框架上会资源定位到某个位置。method：控制数据提交的方式get：form表单默认是get请求post：提交数据label标签：通常情况下 input 标签需要结合 label 标签一起使用。user...
HTML|表单初级验证
Alan_Lowe
07-22 545
HTML|表单初级验证 1.placeholder 很多时候文本框的提示信息可以帮助人们更好更快的进行浏览，我们可以可以placeholder来给用户提示信息，比如我们写一个个签，提示信息为请填写你的个性签名： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单初级验证</title> </head> <bo
HTML----表单验证
xry12354的博客
04-05 1291
包括了表单介绍，表单的高级应用和表单初级验证
基于jQuery实现表单提交验证
10-25
- HTML表单代码：该部分定义了一个表单结构，其中包含用户名、邮箱和个人资料三个输入框，以及提交和重置按钮。每个输入框都使用了`required`类标记为必填项，其中用户名和邮箱输入框还被赋予了`required`类，这意味...
html(11)-表单的初级验证
enjoy_code_的博客
01-17 531
纯html表单验证上面有三种简单应用： placeholder 提示信息 required 非空判断 pattern 正则表达式 placeholder <form action="first.html" method="get"> <p>账号：<input type="text" name="username" placeholder="请输入用户名"/></p> <p>密码：<input type="password
HTML5-表单
MUYUFANSHENXUE的博客
03-13 1842
表单时网页中非常重要的元素，比如一些网站软件的注册页面，登录页面都会用到表单这个东西。 表单的初级应用： 1，表单的基本结构： <form method="post" action="result.html"> </form> method是指表单数据提交的方法，包括post和get，post相对于get安全一点，但也只是相对而言，两种方法，一般开发中通常采用post提交表单数据。action后面的表示向何处发送表单数据。 以上是一些表单元素常用的属性和属
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1532
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
jspdf踩坑 htmltocanvas
最新发布
bs521521的博客
09-20 153
解决方案是换到jspdf.js目录里。
左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗
y1059477028的博客
09-20 227
【代码】左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗。
使用HTML和CSS制作网页的全面指南
weidl001的博客
09-14 1409
HTML（超文本标记语言）是构建网页的基础语言。它用于定义网页的结构和内容。通过使用不同的标签（tags），我们可以告诉浏览器如何显示文本、图像、链接等。CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。通过以上步骤，我们已经了解了如何使用HTML和CSS创建一个简单但完整的网页。主题要点HTML基础了解HTML的结构和常用标签CSS基础理解CSS的语法、选择器和常用属性网页制作步骤规划布局 -> 编写HTML -> 添加CSS实践技巧。
打造民国风格炫酷个人网页：用HTML和CSS3传递民国风韵
m0_61118741的博客
09-14 1527
这个示例展示了如何结合民国风格和现代网页设计元素，创造一个既古典又炫酷的网页。通过细致的CSS样式和动画效果，我们实现了古典美学与现代技术的完美融合。这种设计不仅在视觉上吸引人，也在功能上提供了良好的用户体验。希望这个示例对你在网页设计方面有所启发！
在HTML中添加视频
Q18600000000的博客
09-15 388
这个标签允许你在网页上嵌入视频内容，并支持多种视频格式，如MP4、WebM和Ogg等
Bootstrap表单验证实战教程与API应用
Bootstrap表单验证是Web开发中提高用户体验的重要环节，通过实时检验用户的输入，确保数据的准确性和完整性。本文将详细介绍如何在项目中利用BootstrapValidator库实现表单验证功能。 首先，BootstrapValidator是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值