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>