|
|
@@ -0,0 +1,94 @@
|
|
|
+<!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 style="height: 3000px;" 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
|
|
|
+ 滑块类型
|
|
|
+ step属性 定义每一次滑动的距离
|
|
|
+ -->
|
|
|
+
|
|
|
+ search:<input type="search"><br>
|
|
|
+ <!--
|
|
|
+ type:search
|
|
|
+ 输入框可以输入内容 但是 带有清除按键
|
|
|
+ -->
|
|
|
+
|
|
|
+ number:<input type="number" max="20" min="10" step="2"><br>
|
|
|
+ <!--
|
|
|
+ type:number
|
|
|
+ 输入数字
|
|
|
+ max 最大值
|
|
|
+ min 最小值
|
|
|
+ 当我们输入的数字 不是有效值 会默认调整为有效值 在进行 计算
|
|
|
+ 当输入的数字 不是规定的范围 那么会默认调整为最贴近范围的数字
|
|
|
+ -->
|
|
|
+
|
|
|
+ tel:<input type="tel" maxlength="11"><br>
|
|
|
+ <!--
|
|
|
+ type:tel
|
|
|
+ 在手机端会默认唤醒拨号键盘
|
|
|
+ maxlength 输入最大长度
|
|
|
+ -->
|
|
|
+
|
|
|
+ file:<input type="file" accept="image/png"><br>
|
|
|
+
|
|
|
+ <!--
|
|
|
+ type:file
|
|
|
+ 选择文件进行提交
|
|
|
+ -->
|
|
|
+
|
|
|
+ <select name="" id="">
|
|
|
+ <option value="1">1</option>
|
|
|
+ <option value="2">2</option>
|
|
|
+ </select>
|
|
|
+
|
|
|
+
|
|
|
+ <input type="text" list="list1">
|
|
|
+
|
|
|
+ <datalist id="list1">
|
|
|
+ <option value="xiaoming" label="zhang"></option>
|
|
|
+ <option value="xiaohong"></option>
|
|
|
+ <option value="xiaoming" label="liu"></option>
|
|
|
+ </datalist>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <input type="submit">
|
|
|
+ </form>
|
|
|
+</body>
|
|
|
+</html>
|
zsydgithub