HTML|表单初级验证
1.placeholder
很多时候文本框的提示信息可以帮助人们更好更快的进行浏览,我们可以可以placeholder来给用户提示信息,比如我们写一个个签,提示信息为请填写你的个性签名:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单初级验证</title>
</head>
<body>
<!--
提示信息:
placeholder
-->
<p>
个签:
<input type="text" name="username" placeholder="请填写你的个性签名">
</p>
</body>
</html>
为input标签添加一个placeholder属性即可:
当我们输入一个内容过后将会覆盖掉原有的内容。
2.required
很多时候都会有必填选项,比如平时在学校填的问卷,我们使用required属性即可判断是否非空:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单初级验证</title>
</head>
<body>
<!--
提示信息:
placeholder
-->
<p>
个签:
<input type="text" name="username" placeholder="请填写你的个性签名">
</p>
<!--
必填
required
-->
<p>
密码:
<input type="password" name="pwd" required>
</p>
</body>
</html>
3.pattern
我们可以自定义一个验证方式,比如我们需要填写邮箱,不使用html的email,而是使用pattern,我们去网上找一个正则表达式:
直接赋值到pattern:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单初级验证</title>
</head>
<body>
<!--
提示信息:
placeholder
-->
<p>
个签:
<input type="text" name="username" placeholder="请填写你的个性签名">
</p>
<!--
必填
required
-->
<p>
密码:
<input type="password" name="pwd" required>
</p>
<!--
正则表达式
pattern
-->
<p>
自定义邮箱:
<input type="text" name="My_email" 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>
</body>
</html>
这样就可以了。
人生没有白走的路,每一步都算数!