HTML表单的应用、增强鼠标的可用性、表单的初级验证

表单的应用

  • 隐藏域(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>

运行结果:
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/I_r_o_n_M_a_n/article/details/114177818