1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- <!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
- 滑块类型
- step属性 定义每一次滑动的距离
- -->
- search: <input type="search"><br>
- <!--
- type:search
- 输入框可以输入内容 但是带有自己的清除按键
- -->
- number: <input type="number" step="2" max="20" min="9"><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
- 上传文件
- accept 设置选择文件的类型
- -->
- <select name="" id="">
- <option value="1">1</option>
- <option value="2">2</option>
- </select><br>
- <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>
- <input type="submit">
- </form>
- </body>
- </html>
|