新增表单控件

1、email ——电子邮箱文本框

描述：

（1）当输入不是邮箱的时候，验证通不过

（2）移动端的键盘会有变化，英文键盘

<form>
    <input type="email" />
    <input type="submit" /> 按钮
</form>

 

2、tel ——电话号码

描述：没有验证信息，移动端键盘会变成数字的

<form>
    <input type="tel" />
    <input type="submit" />
</form>

 

3、url——网页的URL

描述：当输入不是网址的时候，验证通不过

<form>
    <input type="url" />
    <input type="submit" />
</form>

 

4、search —— 搜索引擎

描述：chrome下输入文字后，会多出一个关闭的X

<form>
    <input type="search" />
    <input type="submit" />
</form>

 

5、range——数值选择器

描述：min最小值、max最大值、step步数、value当前值

<form>
    <input type="range" step="2" min="0" max="10" value="2" />
    <input type="submit" />
</form>

 

6、number ——只能包含数字的输入框

<form>
    <input type="number"/>
    <input type="submit" />
</form>

 

7、color ——颜色选择器

<form>
    <input type="color"/>
    <input type="submit" />
</form>

 

8、datetime ——显示完整日期

utc表示世界标准时间

<form>
    <input type="datetime"/>
    <input type="submit" />
</form>

 

9、datetime-local :——显示完整日期，不含utc

<form>
    <input type="datetime-local"/>
    <input type="submit" />
</form>

 

10、time ——显示时间

<form>
    <input type="time"/>
    <input type="submit" />
</form>

 

11、date  ——显示日期

<form>
    <input type="date"/>
    <input type="submit" />
</form>

 

12、week  ——显示周

<form>
    <input type="week"/>
    <input type="submit" />
</form>

 

十3、month ——显示月

<form>
    <input type="month"/>
    <input type="submit" />
</form>

 

十4、placeholder ——输入框提示信息

描述：输入的时候提示信息消失

<form>
    <input type="text" placeholder="请输入4-16个字符" />
    <input type="submit" />
</form>

 

十5、autocomplete —— 是否保存用户输入值

描述：不显示用户曾经输入的信息。默认为on，关闭提示选择off

<form>
    <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" />
    <input type="submit" />
</form>

 

十6、autofocus ——指定哪一个表单元素页面一打开就获取输入焦点

<form>
    <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" />
    <input type="password" placeholder="请输入4-16个字符" name="password" autocomplete="off" autofocus />  //这个页面一打开就获取焦点
    <input type="submit" />
</form>

 

十7、required :——此项必填，不能为空，不然不能提交有提示

<form>
    <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" required />
    <input type="password" placeholder="请输入4-16个字符" name="password" autocomplete="off" required />
    <input type="submit" />
</form>

 

十8、Pattern ——正则验证

描述：有安全隐患，能够经过F12删除

<form action="http://www.baidu.com">
    <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" pattern="\d{1,5}" />
    <input type="submit" value="提交" />
    <input type="submit" value="保存至草稿箱"/>
</form>

 

十9、Formaction ——在submit里定义单独的提交地址

<button type="submit" formaction="demo_admin.asp">以管理员身份提交</button>