黑马程序员技术交流社区

标题: 【上海校区】HTML5中新增的表单元素[智能表单] [打印本页]

作者: 不二晨 时间: 2018-12-7 09:32
标题: 【上海校区】HTML5中新增的表单元素[智能表单]
【HTML5 智能表单】
H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。
<FORM id=foo>
      …
</FORM>

<INPUT … form="foo">

type新增属性：详见表格
   email、URL、date、time、month、week、number、range、color

input元素的新增属性：
Autocomplete：自动完成功能.记录用户之前输入的内容，并在下次输入时自动提示完成输入。
>>> 属性值： on/off
>>> 可以在form表单上使用，对整张表单的所有控件进行自动完成的开关
      也可以在input上使用，对特定输入框进行修改。
>>> 绝大部分浏览器，默认开启。

Autofocus：自动获得焦点. autofocus="autofocus",只能设置input元素自动获得焦点。

Form：所属表单。通过form表单的id，确定此input输入哪张表单。

Required：必填.required="required" 设置input必填，否则阻止提交。

Pattern：使用正则表达式验证input的模式（后续讲解）

Placeholder：提示内容，当有value时，取消提示。

<form action="Test.html" method="get">
<fieldset>
      <legend>HTML5新增表单元素</legend>
      <table>
         <tr>
            <td>邮箱</td>
            <td><input type="email" name="email"></td>
         </tr>
         <tr>
            <td>地址</td>
            <td><input type="url" name="url"></td>
         </tr>
         <tr>
            <td>日期</td>
            <td><input type="date" name="data"></td>
         </tr>
         <tr>
            <td>时间</td>
            <td><input type="time" name="time"></td>
         </tr>
         <tr>
            <td>月份</td>
            <td><input type="month" name="month"></td>
         </tr>
         <tr>
            <td>星期</td>
            <td><input type="week" name="week"></td>
         </tr>
         <tr>
            <td>滑动条</td>
            <td><input type="range" name="range"></td>
         </tr>
         <tr>
            <td>颜色</td>
            <td><input type="color" name="color"></td>
         </tr>
         <tr>
            <td><input type="submit"></td>
         </tr>
      </table>
</fieldset>
</form>

---------------------
【转载】仅作分享，侵删
作者：枕梦
原文：https://blog.csdn.net/qq_37768482/article/details/68946511

作者: 不二晨 时间: 2018-12-11 15:46

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2