【HTML5】HTML5基础教程(6)
前言:
本文内容:搜索框滑动和简单验证、表单应用、表单初级验证、HTML总结
推荐免费HTML5基础讲解视频:【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili
HTML5笔记代码下载地址:
蓝奏云:下载地址 密码:joker
百度云:下载地址 提取码:drtu
搜索框滑动和简单验证
1 |
|
表单应用
- 隐藏域
hidden
- 只读
readonly
- 禁用
disabled
1 | <!-- 增强鼠标可用性--> |
表单初级验证
-
为什么要进行表单验证?
- 减轻数据库压力,减少错误数据反复提交
- 增加网页安全性
-
常用方式
- placeholder 输入框提示
- required 非空验证
- pattern 正则表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单简单验证</title>
</head>
<body>
<form method="get" action="html1.html">
<!--
placeholder 提示信息
-->
<p>文本框:<input type="text" name="text" placeholder="请输入用户名"/></p>
<!-- required 非空验证-->
<p>密码框:<input type="password" placeholder="请输入密码" required></p>
<!--正则表达式-->
<p>手机号:
<input type="text" name="diymail" pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$">
</p>
<p>
<input type="submit" value="提交"/>
<input type="reset" value="取消"/>
</p>
</form>
</body>
</html>
HTML总结
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Hey,Joker!
评论
ValineTwikoo