HTML|搜索框滑块和简单验证
1.简单验证
比如我们将input的type改为email即可进行简单的邮箱验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框滑块和简单验证</title>
</head>
<body>
<!--
邮箱验证
将input的type改为email即可进行简单的邮箱验证
-->
<form action="https://blog.csdn.net/qq_45985728" method="get">
<p>
邮箱：
<input type="email" name="email">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
我们输入的内容只要中间不含@就会提交错误，这个可以进行一个很简单的检查验证。
还可以对输入数字、网址等进行简单检查，但是完善一些的话，可以后续用JavaScript做。
2.滑块
滑块，比如我们平时调节进度条，调节音量的时候都会用到
我们同样也是用一个input标签，将type改为range即可，可以使用max和min设置其调节范围， 用step设置增长的最小单元：
假如我们写一个音量滑块，最小为0，最大为100，最小调节单元为10：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框滑块和简单验证</title>
</head>
<body>
<!--
邮箱验证
将input的type改为email即可进行简单的邮箱验证
还可以进行其他验证
网址：url
数字：number 最大值max 最小值min step数字每次增大的间隔间隔
-->
<form action="https://blog.csdn.net/qq_45985728" method="get">
<!--邮箱验证-->
<p>
邮箱：
<input type="email" name="email">
</p>
<!--滑块-->
<p>
音量：
<input type="range" name="voice" max="100" min="0" step="10">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
可以看到有了一个滑块，可以拖拽滑动。
3.搜索框
搜索框：将input的type改为search即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框滑块和简单验证</title>
</head>
<body>
<!--
邮箱验证
将input的type改为email即可进行简单的邮箱验证
还可以进行其他验证
网址：url
数字：number 最大值max 最小值min step数字每次增大的间隔间隔
-->
<form action="https://blog.csdn.net/qq_45985728" method="get">
<!--邮箱验证-->
<p>
邮箱：
<input type="email" name="email">
</p>
<!--滑块-->
<p>
音量：
<input type="range" name="voice" max="100" min="0" step="10">
</p>
<!--搜索框-->
<p>
搜索：
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
人生没有白走的路，每一步都算数！
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
