| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- <!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="" style="height: 8000px;">
- text:<input type="text"> <br>
- <!--
- type:email
- 会对输入的内容进行一个邮箱的校验 但是校验规则不是很正规
- 其中输入的内容必须包含@ 并且@前不为汉字 @后必须有内容
- -->
- email:<input type="email"><br>
- <!--
- type:color
- 调色板
- -->
- color:<input type="color"><br>
- <!--
- type:date
- 实现一个日历的功能 带有自己的样式
- -->
- date:<input type="date"><br>
- <!--
- type:time
- 实现一个选取时间的功能
- -->
- time:<input type="time"><br>
- <!--
- type:range
- 滑块类型
- step 属性 定义每一次滑动的距离
- -->
- range:<input type="range"><br>
- range:<input type="range" step="20"><br>
- <!--
- type:search
- 输入框可以输入内容 但是 带有自己的清除键
- -->
- search:<input type="search"><br>
- <!--
- type:number
- 输入数字
- min 最小值
- max 最大值
- 当我们输入的数字 不是我们规定的范围 点击加减 会默认调整到规定的范围内
- step 输入值 不等min+step 那么就会调整为有效值
- -->
- number:<input type="number" max="20" min="9" step="2"><br>
- <!--
- type:tel
- 输入电话号
- 手机端会弹起拨号键盘
- maxlength 输入的最大长度
- -->
- tel:<input type="tel" maxlength="11"><br>
- <!--
- type:file
- 选择文件进行提交
- accept 属性 选择文件的类型
- -->
- file:<input type="file" accept="image/png"><br>
- <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="wang"></option>
- </datalist>
- <br>
- <input type="submit">
- </form>
- </body>
- </html>
|
