|
|
@@ -0,0 +1,87 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <form action="">
|
|
|
+ text: <input type="text"> <br>
|
|
|
+ email: <input type="email"><br>
|
|
|
+ <!--
|
|
|
+ type: email
|
|
|
+ 会对输入的内容进行一个邮箱格式的校验
|
|
|
+ 必须要包含 @
|
|
|
+ @ 后面要有内容
|
|
|
+ -->
|
|
|
+
|
|
|
+ color: <input type="color"><br>
|
|
|
+ <!--
|
|
|
+ type: color
|
|
|
+ 调色板
|
|
|
+ -->
|
|
|
+
|
|
|
+ date: <input type="date"><br>
|
|
|
+ <!--
|
|
|
+ type: date
|
|
|
+ 日历功能 带有自己的样式
|
|
|
+ -->
|
|
|
+ time: <input type="time"><br>
|
|
|
+ <!--
|
|
|
+ type: time
|
|
|
+ 时间功能
|
|
|
+ -->
|
|
|
+ range: <input type="range"><br>
|
|
|
+ range: <input type="range" step="20"><br>
|
|
|
+ <!--
|
|
|
+ type: range
|
|
|
+ 滑块类型
|
|
|
+ setp属性 定义每一次滑动的距离
|
|
|
+ -->
|
|
|
+
|
|
|
+ search: <input type="search"><br>
|
|
|
+ <!--
|
|
|
+ type: search
|
|
|
+ 输入框可以输入内容 但是带有自己的清除按键
|
|
|
+ -->
|
|
|
+
|
|
|
+ number: <input type="number" max="20" min="9" step="2"> <br>
|
|
|
+ <!--
|
|
|
+ type: number
|
|
|
+ 如果超出有效值 默认调整为最近的有效值
|
|
|
+ -->
|
|
|
+
|
|
|
+ tel: <input type="tel" maxlength="11"><br>
|
|
|
+ <!--
|
|
|
+ type: tel
|
|
|
+ maxlength 输入的最大长度
|
|
|
+ 在手机端会默认唤醒拨号键盘
|
|
|
+ -->
|
|
|
+ file: <input type="file" accept="image/png"><br>
|
|
|
+ <!--
|
|
|
+ type: file
|
|
|
+ 上传文件
|
|
|
+ accept 设置选择文件的类型
|
|
|
+ -->
|
|
|
+
|
|
|
+ <select name="" id="">
|
|
|
+ <option value="xx">1</option>
|
|
|
+ <option value="aa">2</option>
|
|
|
+ </select>
|
|
|
+
|
|
|
+
|
|
|
+ <input type="text" list="list1">
|
|
|
+
|
|
|
+ <datalist id="list1">
|
|
|
+ <option value="xiaoming" label="zhang">xiaoming</option>
|
|
|
+ <option value="xiaohong">xiaohong</option>
|
|
|
+ <option value="xiaoming" label="wang">xiaoming</option>
|
|
|
+ </datalist>
|
|
|
+
|
|
|
+ <br>
|
|
|
+ <input type="submit">
|
|
|
+ </form>
|
|
|
+</body>
|
|
|
+</html>
|
zsydgithub