表单的应用
- 隐藏域(hidden)
- 只读(readonly)
- 禁用(disabled)
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="01.我的第一个网页.html" method="get">
<input type="text" value="只读" readonly>
<input type="text" value="禁用" disabled>
<input type="text" value="隐藏" hidden>
</form>
</body>
</html>
运行结果:
增强鼠标的可以性
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<label for="textId">点我鸭</label>
<input type="text" id="textId">
</div>
</body>
</html>
运行结果:
表单的初级验证
思考?为什么要进行表单验证
答案:检查用户输入的信息是否安全,提高网站的安全。
常用方式
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="01.我的第一个网页.html" method="get">
<!--placeholder 提示信息-->
<input type="text" placeholder="请输入文本">
<!--required 元素不能为空-->
<input type="text" required>
邮箱验证:<input type="text" pattren="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
<input type="submit">
</form>
</body>
</html>
运行结果: