image

编辑人: 未来可期

calendar2025-05-31

message3

visits213

html5在表单方面新增的功能都有哪些?

  • 新的控件类型

–<input type=”url|email|date|tel|search|datetime|date|month|week|datetime-local|number|range|color”>, <select data=”http://domain/getoptions”></select>

  • 文件上传控件

–<input type=”file” accept = “image/png” />

  • 重复的模型

–add, remove, move-up, move-down

  • 内建表单验证

–<input type=”email” required />, <input type=”number” min=10 max=100 />

  • XML Submission

–application/x-www-form+xml

举例:

         <form action=’/register’ enctype=”application/x-www-form+xml” method=”post”>

<p>

<label for=’name’>ID(请使用Email注册)</label>

<input name=’name’ required type=’email’ />

<p>

<label for=’password’>密码</label>

<input name=’password’ required type=’password’ />

<p>

<label for=’birthday’>出生日期</label>

<input type=’date’ name=’birthday’ />

<p>

<label for=’gender’>国籍</label>

<select name=’country’ data=’countries.xml’></select>

<p>

<label for=’photo’>个性头像</label>

<input type=’file’ name=’photo’ accept=’image/*’ />

<table>

<thead>

<td><button type=”add” template=”questionId”>+</button> 保密问题</td>

<td>答案</td>

<td></td>

</thead>

<tr id=”questionId” repeat=”template” repeat-start=”1″ repeat-min=”1″ repeat-max=”3″>

<td><input type=”text” name=”questions[questionId].q” /></td>

<td><input type=”text” name=”questions[questionId].a” /></td>

<td><button type=”remove”>删除</button></td>

</tr>

</table>

<p><input type=’submit’ value=’send’ class=’submit’ /></p>

</form>

喵呜刷题:让学习像火箭一样快速,快来微信扫码,体验免费刷题服务,开启你的学习加速器!

创作类型:
原创

本文链接:html5在表单方面新增的功能都有哪些?

版权声明:本站点所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明文章出处。
分享文章
share